New Tap Card SDK
Steps to integrate in 3rd party
1. Install latest version
npm
npm i @tap-payments/js_card@latest
yarn
yarn add @tap-payments/js_card@latest
2. Sample Code Create Token
import {TapCard, create} from '@tap-payments/js_card'
import { useState } from 'react';
function App() {
const [createEnabled,setCreateEnabled] = useState(false)
const [tokenCreated,setTokenCreated]=useState(false)
return (
<div style={{textAlign:"center"}}>
<div>
<TapCard
onBin={(data) => {
console.log(data)
}}
onFocus={(data) => {
console.log(data)
}}
onChangeSaveCardLater={(data) => {
console.log(data)
}}
onChangeSaveCardLaterTap={(data) => {
console.log(data)
}}
onChange={(data) => {
console.log(data)
}}
onTokenCreated={(token) => {
setTokenCreated(token.id)
}}
isAllInputsValid={(data) => {
setCreateEnabled(data)
}}
publicKey='pk_test_EtHFV4BuPQokJT6jiROls87Y' mid={null}
themeMode='light'
paymentOptions={{
locale:'en',
showBrands:true,
showLoadingState:true,
collectHolderName:true,
preLoadCardName:"Dummy Name",
cardNameEditable:false,
currencyCode: 'all',
labels: {
cardNumber: 'Card Number',
expirationDate: 'MM/YY',
cvv: 'CVV',
cardHolder: 'Card Holder Name'
},
paymentAllowed: 'all',
textDirection: 'ltr',
cardFundingSource: 'all',//'all'|'credit'|'debit'
saveCardOption: 'all',//'all' | 'merchant' | 'tap' | 'none'
}}
errors={{
showErrorComponent: true
}}
/></div>
<div>
{tokenCreated!=false &&
<div>
Token: {tokenCreated}
</div>}
<button onClick={create} className='button token_button' disabled={!createEnabled}>
Create Token
</button>
</div>
</div>
);
}
export default App;
3. Sample Code for Save Card, Load Saved Card Create Token and reset card
import {TapCard, create, loadSavedCard, reset, saveCard, threeDsRedirect } from '@tap-payments/js_card'
import { useState } from 'react';
const App = () => {
const [createEnabled, setCreateEnabled] = useState(true)
const [message, setMessage] = useState('')
const [tokenCreated, setTokenCreated] = useState(false)
const [savedCard, setSavedCard] = useState(false)
const [threeDSResponse, setThreeDSResponse] = useState(false)
return (
<div style={{ textAlign: 'center' }}>
<div>
<TapCard
on3dsResponse={(data) => {
setThreeDSResponse(data)
}}
onRedirectUrl={(data) => {
console.log(data)
}}
on3dsRedirect={(data) => {
console.log(data)
}}
on3dsFail={(data) => {
setMessage(data.message)
}}
onCardSaved={(data) => {
setSavedCard(data)
}}
onBin={(data) => {
console.log(data)
}}
onFocus={(data) => {
console.log(data)
}}
onChangeSaveCardLater={(data) => {
console.log(data)
}}
onChangeSaveCardLaterTap={(data) => {
console.log(data)
}}
onChange={(data) => {
console.log(data)
}}
onTokenCreated={(token) => {
setTokenCreated(token.id)
}}
isAllInputsValid={(data) => {
setCreateEnabled(data)
}}
onResetLoadedCard={() => console.log('loadedCard reset')}
publicKey='pk_test_dpfw6e4RlD1Qt3bBhyo9g5uC'
mid={null}
themeMode='light'
paymentOptions={{
cardFundingSource: 'all',
saveCardOption: 'all',
locale: 'en',
showBrands: true,
showLoadingState: true,
collectHolderName: true,
preLoadCardName: 'Dummy Name',
cardNameEditable: true,
currencyCode: ['KWD'],
labels: {
cardNumber: 'Card Number',
expirationDate: 'MM/YY',
cvv: 'CVV',
cardHolder: 'Card Holder Name'
},
paymentAllowed: 'all',
textDirection: 'ltr',
customer: 'cus_TS075220212320q2RD0707283'
}}
errors={{
showErrorComponent: true
}}
/>
</div>
{tokenCreated != false && <div>Token: {tokenCreated}</div>}
{message !== '' && <div>Message: {message}</div>}
{savedCard != false && <div>Saved Card: {JSON.stringify(savedCard)}</div>}
{threeDSResponse != false && <div>3DS Response: {JSON.stringify(threeDSResponse)}</div>}
<div style={{ display: 'flex', gap: '5px', justifyContent: 'center' }}>
<button className='button token_button' onClick={create} disabled={!createEnabled}>
Create Token
</button>
<button className='button token_button' onClick={saveCard} disabled={!createEnabled}>
Save Card
</button>
<button className='button token_button' onClick={() => loadSavedCard('card_iOj120231017AjsM12BV1m744')}>
Load Saved Card
</button>
<button className='button token_button' onClick={() => reset()}>
Reset
</button>
</div>
</div>
)
}
export default App;
Updating payment option without reloading
import {updatePaymentOption } from '@tap-payments/js_card'
updatePaymentOption({
currencyCode: ['SAR']
})
3DS redirect
Before creating a charge or authorize from a token, you will also get the url to pass in redirect_url request, after getting the token you will get the url as string on callback onRedirectUrl for 3DS redirect a method is provided namely threeDsRedirect, you can pass it the exact authorize or charge object you get from the API
import {threeDsRedirect } from '@tap-payments/js_card'
//after creating a charge/authorize, pass the API response to this method
threeDsRedirect({
"id": "chg_TS04A5620231240w4RJ2102536",
"object": "charge",
"live_mode": false,
"api_version": "V2",
"method": "CREATE",
"status": "INITIATED",
"amount": 1.000,
"currency": "KWD",
"threeDSecure": true,
"card_threeDSecure": false,
"save_card": false,
"merchant_id": "",
"product": "GOSELL",
"statement_descriptor": "Sample",
"description": "Test Description",
"metadata": {
"udf1": "test 1",
"udf2": "test 2"
},
"transaction": {
"timezone": "UTC+03:00",
"created": "1676983256552",
"url": "https://sandbox.payments.tap.company/test_gosell/v2/payment/tap_process.aspx?chg=Xj%2fukFm8u%2bEyC2IVLXWG0EM8ud73eUxlFky0HkmM5a8%3d",
"expiry": {
"period": 30,
"type": "MINUTE"
},
"asynchronous": false,
"amount": 1.000,
"currency": "KWD"
},
"reference": {
"gosell_id": "00",
"transaction": "txn_0001",
"order": "ord_0001"
},
"response": {
"code": "100",
"message": "Initiated"
},
"card": {
"object": "card",
"first_six": "424242",
"last_four": "4242",
"name": "DUMMY NAME",
"expiry": {
"month": "03",
"year": "30"
}
},
"receipt": {
"email": false,
"sms": true
},
"customer": {
"first_name": "test",
"last_name": "test",
"email": "test@test.com",
"phone": {
"country_code": "965",
"number": "50000000"
}
},
"merchant": {
"country": "KW",
"currency": "KWD",
"id": "1124340"
},
"source": {
"object": "token",
"id": "tok_O6g01623940FI8v21kr1F266"
},
"redirect": {
"status": "PENDING",
"url": "https://sandbox.payments.tap.company/test_gosell/v2/payment/redirect.aspx?id=redirect_TS04A5620231240Rx4g2102536"
},
"post": {
"status": "PENDING",
"url": "http://your_website.com/post_url"
},
"activities": [
{
"id": "activity_TS02A5720231240Me342102411",
"object": "activity",
"created": 1676983256552,
"status": "INITIATED",
"currency": "KWD",
"amount": 1.000,
"remarks": "charge - created"
}
],
"auto_reversed": false
})
when above method is invoked, the card form redirects to 3ds and upon redirecting back it retrieves authorize/charge and gives back response on callback on3dsResponse
Steps to run project independently
- Install dependencies
yarn install
- run dev server
yarn run start