@tap-payments/card-sdk

v1.0.2

Published

a month ago

Tap Card Elements

Downloads

775

0High
0Medium
0Low

web-card-sdk

Handling card payments on the web using Tap's SDK

Install

This is a React module available through the npm registry. Installation is done using the npm install command:

npm install @tap-payments/card-sdk

---------------------------- OR -------------------------

yarn add @tap-payments/card-sdk

Examples

ES6

import React from 'react'
import { TapCard, Currencies, Direction, Edges, Locale, Theme } from '@tap-payments/card-sdk'

const App = () => {
	return (
		<TapCard
			publicKey='pk_test_...'
			merchant={{
				id: 'merchant id'
			}}
			transaction={{
				amount: 1,
				currency: Currencies.SAR
			}}
			customer={{
				id: 'customer id',
				name: [
					{
						lang: Locale.EN,
						first: 'Ahmed',
						last: 'Sharkawy',
						middle: 'Mohamed'
					}
				],
				nameOnCard: 'Ahmed Sharkawy',
				editable: true,
				contact: {
					email: '[email protected]',
					phone: {
						countryCode: '20',
						number: '1000000000'
					}
				}
			}}
			acceptance={{
				supportedBrands: ['AMEX', 'VISA', 'MASTERCARD', 'MADA'],
				supportedCards: ['CREDIT', 'DEBIT']
			}}
			fields={{
				cardHolder: true
			}}
			addons={{
				displayPaymentBrands: true,
				loader: true,
				saveCard: true
			}}
			interface={{
				locale: Locale.EN,
				theme: Theme.LIGHT,
				edges: Edges.CURVED,
				direction: Direction.LTR
			}}
			onReady={() => console.log('onReady')}
			onFocus={() => console.log('onFocus')}
			onBinIdentification={(data) => console.log('onBinIdentification', data)}
			onValidInput={(data) => console.log('onValidInputChange', data)}
			onInvalidInput={(data) => console.log('onInvalidInput', data)}
			onError={(data) => console.log('onError', data)}
			onSuccess={(data) => console.log('onSuccess', data)}
		/>
	)
}

Vanilla JS

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="https://tap-sdks.b-cdn.net/card/1.0.2/index.js"></script>

		<title>card demo</title>
	</head>
	<body>
		<div id="card-sdk-id"></div>
		<script>
			const { renderTapCard, Theme, Currencies, Direction, Edges, Locale } = window.CardSDK
			const { unmount } = renderTapCard('card-sdk-id', {
				publicKey: 'pk_test_...',
				merchant: {
					id: 'merchant id'
				},
				transaction: {
					amount: 1,
					currency: Currencies.SAR
				},
				customer: {
					id: 'customer id',
					name: [
						{
							lang: Locale.EN,
							first: 'Ahmed',
							last: 'Sharkawy',
							middle: 'Mohamed'
						}
					],
					nameOnCard: 'Ahmed Sharkawy',
					editable: true,
					contact: {
						email: '[email protected]',
						phone: {
							countryCode: '20',
							number: '1000000000'
						}
					}
				},
				acceptance: {
					supportedBrands: ['AMEX', 'VISA', 'MASTERCARD', 'MADA'],
					supportedCards: ['CREDIT', 'DEBIT']
				},
				fields: {
					cardHolder: true
				},
				addons: {
					displayPaymentBrands: true,
					loader: true,
					saveCard: true
				},
				interface: {
					locale: Locale.EN,
					theme: Theme.LIGHT,
					edges: Edges.CURVED,
					direction: Direction.LTR
				},
				onReady: () => console.log('onReady'),
				onFocus: () => console.log('onFocus'),
				onBinIdentification: (data) => console.log('onBinIdentification', data),
				onValidInput: (data) => console.log('onValidInputChange', data),
				onInvalidInput: (data) => console.log('onInvalidInput', data),
				onError: (data) => console.log('onError', data),
				onSuccess: (data) => console.log('onSuccess', data)
			})
		</script>
	</body>
</html>

Configurations

| Name | Type | R/O | Description | | ---------------------------------- | ---------- | ---------- | ----------------------------------------------------- | | publicKey | string | required | The public Key provided by Tap | | merchant | object | optional | The merchant object | | merchant.id | string | optional | The merchant's Tap id. | | transaction | object | required | The transaction object | | transaction.amount | number | required | The transaction amount. | | transaction.currency | string | required | The transaction currency. | | customer | object | optional | The customer object | | customer.id | string | optional | The customer ID | | customer.name | Array | optional | The customer name object | | customer.name[index].lang | string | optional | The customer name language | | customer.name[index].first | string | optional | The customer first name | | customer.name[index].last | string | optional | The customer last name | | customer.name[index].middle | string | optional | The customer middle name | | customer.name.nameOnCard | string | optional | The customer name on card | | customer.name.editable | boolean | optional | To control the name editing | | customer.contact | object | optional | The customer contact object | | customer.contact.email | string | optional | The customer email | | customer.contact.phone | object | optional | The customer phone object | | customer.contact.phone.countryCode | string | optional | The customer phone country code | | customer.contact.phone.number | string | optional | The customer phone number | | acceptance | object | optional | The acceptance object | | acceptance.supportedBrands | string[] | optional | The supported brands | | acceptance.supportedCards | string[] | optional | The supported cards | | fields | object | optional | The fields object | | fields.cardHolder | boolean | optional | To show/hide the card holder name | | fields.cvv | boolean | optional | To show/hide the cvv field | | fields.savedCardCVV | boolean | optional | To show/hide the cvv field when pay with saved card | | addons | object | optional | The addons object | | addons.loader | boolean | optional | To show/hide the loader on the card | | addons.saveCard | boolean | optional | To show/hide the save card option | | addons.displayPaymentBrands | boolean | optional | To show/hide the payment brands section | | interface | object | optional | The interface object | | interface.locale | string | optional | The card locale | | interface.theme | string | optional | The card theme | | interface.edges | string | optional | The card edges | | interface.direction | string | optional | The card direction | | onReady | function | optional | Callback function runs when card becomes ready | | onFocus | function | optional | Callback function runs when card is focused | | onBinIdentification | function | optional | Callback function runs when bin is identified | | onValidInput | function | optional | Callback function runs when card inputs are valid | | onInvalidInput | function | optional | Callback function runs when card inputs are invalid | | onError | function | optional | Callback function runs when card has an error | | onSuccess | function | optional | Callback function runs when card is successfully done |

Card Methods

You can import all the required methods from the package as follows:

import {
	resetCardInputs,
	saveCard,
	tokenize,
	updateCardConfiguration,
	updateTheme,
	loadSavedCard
} from '@tap-payments/card-sdk'

| Name | Description | | ----------------------- | ------------------------------ | | resetCardInputs | Reset the card inputs | | saveCard | Save the card data | | tokenize | Tokenize the card date | | updateCardConfiguration | Update the card configuration | | updateTheme | Update the card theme | | loadSavedCard | Load the saved card by card id |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme