Handling the checkout process for the merchant
This is a React module available through the
npm registry. Installation is done using the
npm install command:
npm install @tap-payments/checkout-v2---------------------------- OR -------------------------
yarn add @tap-payments/checkout-v2coming soon<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
/>
<title>checkout-sdk</title>
<!-- add style script -->
<link rel="stylesheet" href="./build-0.0.36-development/main.css" />
<script src="./build-0.0.36-development/main.js"></script>
</head>
<body>
<div id="root"></div>
<script>
// once our cdn script is loaded we can use the window.TapPayments object
const { renderCheckout } = window.TapPayments;
let unmount = null;
const stopCheckout = () => {
unmount && unmount();
};
const startCheckout = () => {
const checkoutElement = renderCheckout('root', {
open: true,
onClose: () => {
console.log('onClose');
stopCheckout();
},
onSuccess: res => {
console.log('################## Charge Id ##################');
console.log(res.chargeId);
console.log('################################################');
},
onError: error => {
console.error(error);
},
checkoutMode: 'popup',
language: 'en',
themeMode: 'light',
supportedPaymentMethods: 'all',
supportedCurrencies: 'all',
paymentType: 'all',
selectedCurrency: 'KWD',
gateway: {
publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh',
merchantId: '',
},
customer: {
id: '',
firstName: 'Ahmed',
lastName: 'Sharkawy',
email: 'Ahmed@tap.company',
phone: {
country_code: '965',
number: '99999999',
},
},
transaction: {
mode: 'charge',
charge: {
saveCard: true,
redirect: {
url: `${window.location.href}`,
},
threeDSecure: true,
},
},
amount: 10,
order: {
items: [
{
amount: 10,
currency: 'KWD',
name: 'Item TItle',
quantity: 1,
description: 'Item Description',
},
],
},
cardOptions: {
showBrands: true,
showLoadingState: true,
collectHolderName: true,
preLoadCardName: false,
cardNameEditable: true,
cardFundingSource: 'all',
saveCardOption: 'all',
forceLtr: true,
},
});
// save the unmount function to be able to unmount the component
unmount = checkoutElement.unmount;
};
</script>
<button onclick="startCheckout()">Start</button>
<button onclick="stopCheckout()">Stop</button>
</body>
</html>| name | type | description |
|---|