@tap-payments/card-sdk NPM

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: 'ahmed@gmail.com',
					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: 'ahmed@gmail.com',
						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.nameindex.lang	`string`	`optional`	The customer name language
customer.nameindex.first	`string`	`optional`	The customer first name
customer.nameindex.last	`string`	`optional`	The customer last name
customer.nameindex.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