@tap-payments/js_card NPM

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