Web
Integrating Web Card SDK in Your Application
This comprehensive guide is designed to assist you in seamlessly integrating Tap Payments into your web applications, accommodating various development preferences and coding styles. You'll find sample code examples written in both React JS and Vanilla JS to suit your specific needs.
Prerequisite
To seamlessly integrate the Web Card SDK into your web application, it's essential to register your domain with Tap. We strongly encourage you to kickstart the onboarding process by creating an account with us here. This will grant you access to a unique set of keys tailored to your business needs, ensuring a smooth and secure payment processing experience.
Step 1: Installation for React JS
You can install the Web Card SDK module for React JS using NPM or YARN, by simply executing either of the following commands displayed in the below tabs:
npm install @tap-payments/card-webyarn add @tap-payments/card-webStep2: Configuration Examples
In this section, you will see how to do the basic integration of the SDK in your project, whether you're working with React JS (ES6) or Vanilla JS.
Make sure to use the test Public Key that you received after creating your account with Tap Payments which you can retrieve using the following steps:
- Login to your account
- Click on goSell
- Go to API Credentials
- Public Key format: pk_test_xxxx
ES6
import React from 'react'
import { TapCard, Currencies, Scope, Locale } from '@tap-payments/card-web'
const App = () => {
return (
<TapCard
scope={Scope.TOKEN}
operator={{
publicKey: 'pk_test_...'
}}
order={{
amount: 1,
currency: Currencies.SAR,
reference: ""
}}
customer={{
name: [
{
lang: Locale.EN,
first: 'Ahmed',
last: 'Sharkawy',
middle: 'Mohamed'
}
],
contact: {
email: '[email protected]',
phone: {
countryCode: '20',
number: '1000000000'
}
}
}}
onReady={() => console.log('onReady')}
onFocus={() => console.log('onFocus')}
onBinIdentification={(data) => console.log('onBinIdentification', data)}
onValidInput={(data) => console.log('onValidInputChange', data)}
onInvalidInput={(data) => console.log('onInvalidInput', data)}
onError={(data) => console.log('onError', data)}
onSuccess={(data) => console.log('onSuccess', data)}
/>
)
}Vanilla JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://tap-sdks.b-cdn.net/card/1.0.2-development/index.js"></script>
<title>card demo</title>
</head>
<body>
<div id="card-web-id"></div>
<script>
const { renderTapCard, Currencies, Scope, Locale } = window.CardSDK
const { unmount } = renderTapCard('card-web-id', {
scope: Scope.TOKEN,
operator: {
publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7'
},
order: {
amount: 1,
currency: Currencies.SAR,
reference: ""
},
customer: {
name: [
{
lang: Locale.EN,
first: 'Ahmed',
last: 'Sharkawy',
middle: 'Mohamed'
}
],
contact: {
email: '[email protected]',
phone: {
countryCode: '20',
number: '1000000000'
}
}
},
onReady: () => console.log('onReady'),
onFocus: () => console.log('onFocus'),
onBinIdentification: (data) => console.log('onBinIdentification', data),
onValidInput: (data) => console.log('onValidInputChange', data),
onInvalidInput: (data) => console.log('onInvalidInput', data),
onError: (data) => console.log('onError', data),
onSuccess: (data) => console.log('onSuccess', data)
})
</script>
</body>
</html>What to Expect
Updated 3 days ago