@tap-payments/card-elements-v2 v0.0.40-development
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
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago