@tap-payments/card-elements-v1
v0.0.12
Published
Tap Card Elements v1
Downloads
4
Maintainers
Keywords
Readme
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