@tap-payments/card-elements-v2

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": "[e-mail]",
        "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

1. Install dependencies

yarn install

2. run dev server

yarn run start