Card SDK V1

Steps to integrate

$3

npm

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

yarn

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

`$3`

`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 (


			
									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'
					}}
				/>
			

			{tokenCreated != false && Token: {tokenCreated}
}
			{message != '' && Error: {message}
}

)
}

export default App;`

`$3`

`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 (


			
				Select Currencies:
									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)
					}}
				>
					
					
					
					
					
					
					
					
					
					
				
				
			

			
									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'
					}}
				/>
			

			{tokenCreated != false && Token: {tokenCreated}
}
			{message != '' && Error: {message}
}


	)
}
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

Card SDK V1

Steps to integrate

$3

npm

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

yarn

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

`$3`

`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 (


			
									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'
					}}
				/>
			

			{tokenCreated != false && Token: {tokenCreated}
}
			{message != '' && Error: {message}
}

)
}

export default App;`

`$3`

`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 (


			
				Select Currencies:
									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)
					}}
				>
					
					
					
					
					
					
					
					
					
					
				
				
			

			
									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'
					}}
				/>
			

			{tokenCreated != false && Token: {tokenCreated}
}
			{message != '' && Error: {message}
}


	)
}
export default App;

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

`BIN response sample`

`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

@tap-payments/card-elements-v1

Dist Tags

Card SDK V1

Steps to integrate

$3

`$3`

`$3`

`BIN response sample`

`Token Created Sample`

@tap-payments/card-elements-v1

Dist Tags

Card SDK V1

Steps to integrate

$3

`$3`

`$3`

`BIN response sample`

`Token Created Sample`