@tap-payments/card-sdk
v1.0.2
Published
Tap Card Elements
Downloads
415
Maintainers
Keywords
Readme
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 |