@tap-payments/card-elements-v1

Card SDK V1

Steps to integrate

Installation

npm

npm i @tap-payments/card-elements-v1@latest

yarn

yarn add @tap-payments/card-elements-v1@latest

1. Sample code to create token and get error messages

import {TapCard, create, updateCurrency, reset}  from '@tap-payments/card-elements-v1'
import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('')
	const [tokenCreated, setTokenCreated] = useState(false)
	return (
		<div style={{ textAlign: 'center' }}>
			<div>
				<TapCard
					onError={(message) => {
						setMessage(message)
					}}
					onBin={(data) => {
						console.log('onBin', data)
					}}
					onTokenCreated={(token) => {
						setTokenCreated(token.id)
						setMessage('')
						console.log('onTokenCreated', token)
					}}
					publicKey='pk_test_dpfw6e4RlD1Qt3bBhyo9g5uC'
					style={{
						base: {
							color: '#535353',
							lineHeight: '18px',
							fontFamily: 'sans-serif',
							fontSmoothing: 'antialiased',
							fontSize: '16px',
							'::placeholder': {
								color: 'rgba(0, 0, 0, 0.26)',
								fontSize: '15px'
							}
						},
						invalid: {
							color: 'red'
						}
					}}
					paymentOptions={{
						currencyCode: 'all',
						labels: {
							cardNumber: 'Card Number',
							expirationDate: 'MM/YY',
							cvv: 'CVV',
							cardHolder: 'Card Holder Name'
						},
						TextDirection: 'ltr'
					}}
				/>
			</div>
			{tokenCreated != false && <div>Token: {tokenCreated}</div>}
			{message != '' && <div>Error: {message}</div>}

			<div style={{ display: 'flex', gap: '5px', justifyContent: 'center' }}>
				<button className='button token_button' onClick={create}>
					Create Token
				</button>
			</div>
		</div>
	)
}

export default App;

2. Sample code update currencies after render, reset form, create token

import {TapCard, create, updateCurrency, reset}  from '@tap-payments/card-elements-v1'
import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('')
	const [tokenCreated, setTokenCreated] = useState(false)
	return (
		<div style={{ textAlign: 'center' }}>
			<div style={{ display: 'flex', gap: '5px' }}>
				<label>Select Currencies:</label>
				<select
					name='currency'
					id='currency'
					multiple
					onChange={(event) => {
						const result: any = []
						const options = event.target && event.target.options
						let opt

						for (let i = 0, iLen = options.length; i < iLen; i++) {
							opt = options[i]

							if (opt.selected) {
								result.push(opt.value || opt.text)
							}
						}
						updateCurrency(result)
					}}
				>
					<option value='KWD'>KWD</option>
					<option value='AED'>AED</option>
					<option value='BHD'>BHD</option>
					<option value='EGP'>EGP</option>
					<option value='EUR'>EUR</option>
					<option value='GBP'>GBP</option>
					<option value='OMR'>OMR</option>
					<option value='QAR'>QAR</option>
					<option value='SAR'>SAR</option>
					<option value='USD'>USD</option>
				</select>
				<button className='button reset_button' onClick={reset}>
					Reset Form
				</button>
			</div>
			<div>
				<TapCard
					onError={(message) => {
						setMessage(message)
					}}
					onBin={(data) => {
						console.log('onBin', data)
					}}
					onTokenCreated={(token) => {
						setTokenCreated(token.id)
						setMessage('')
						console.log('onTokenCreated', token)
					}}
					publicKey='pk_test_dpfw6e4RlD1Qt3bBhyo9g5uC'
					style={{
						base: {
							color: '#535353',
							lineHeight: '18px',
							fontFamily: 'sans-serif',
							fontSmoothing: 'antialiased',
							fontSize: '16px',
							'::placeholder': {
								color: 'rgba(0, 0, 0, 0.26)',
								fontSize: '15px'
							}
						},
						invalid: {
							color: 'red'
						}
					}}
					paymentOptions={{
						currencyCode: 'all',
						labels: {
							cardNumber: 'Card Number',
							expirationDate: 'MM/YY',
							cvv: 'CVV',
							cardHolder: 'Card Holder Name'
						},
						TextDirection: 'ltr'
					}}
				/>
			</div>
			{tokenCreated != false && <div>Token: {tokenCreated}</div>}
			{message != '' && <div>Error: {message}</div>}

			<div style={{ display: 'flex', gap: '5px', justifyContent: 'center' }}>
				<button className='button token_button' onClick={create}>
					Create Token
				</button>
			</div>
		</div>
	)
}

export default App;

CallBack	Type	Description
onError	string	Error Message
onBin	object	bank identification number (BIN)
onTokenCreated	object	Token Created

Methods	Params	Description
create	void	Initiate create token
updateCurrency	string	Array containing 3 character string of currency value(s)
reset	void	Reset/Clear Form

BIN response sample

{
   "bin":"424242",
   "bank":"",
   "card_brand":"VISA",
   "card_type":"CREDIT",
   "card_category":"",
   "card_scheme":"VISA",
   "country_name":"UNITED KINGDOM",
   "country":"GB",
   "website":"",
   "phone":"",
   "address_required":false,
   "api_version":"V2"
}

Token Created Sample

note: id is used from this response as a source to create Charges/Authorize/... etc

{
    "id": "tok_afsh4232047ycbv287f2h702",
    "created": 1680036424702,
    "object": "token",
    "live_mode": false,
    "type": "CARD",
    "used": false,
    "card": {
        "id": "card_y8gR4232047b9Zp28mP2Y706",
        "object": "card",
        "address": {},
        "funding": "CREDIT",
        "fingerprint": "gRkNTnMrJPtVYkFDVU485OL7nVBd0iO19Ozv01nzHV8%3D",
        "brand": "VISA",
        "scheme": "VISA",
        "name": "test",
        "exp_month": 3,
        "exp_year": 34,
        "last_four": "4242",
        "first_six": "424242"
    }
}

For Further Details on card options visit Card Documentation For API visit API Documentation