❤
npm
Sign UpSign In

@tap-payments/card-sdk
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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.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

Readme

Keywords

none

Package Sidebar

Install

npm i @tap-payments/card-sdk

Weekly Downloads

134

Version

1.0.2

License

ISC

Unpacked Size

58.2 kB

Total Files

41

Last publish

Collaborators

  • mostafaabobakr.tap
  • i.mousa
  • mahmoudallam
  • aya_tap
  • mud_fahmi
  • ahmedkaram-tap
  • haitham-tap
  • muhammadazhar007
  • elsharkawy
  • waqast
  • hala.q
  • reham_alsabbagh
  • kalpanatap
  • sadbarkhattak
Try on RunKit
Report malware