Card SDK for Web
Card Web SDK allows you to embed our payment form directly into your website or web application; which allows you to collect credit card information and tokenize it.
The purpose of Card Web SDK is to collect the user's card information and generate a token, no transactions would be processed using this SDK. You can then use the generated token in our APIs or you can use our Checkout Web SDK.
Installation
There are two ways to get started with Card Web SDK in your projects. You can either install it manually or use NPM.
1. Install Manually
Include gosell.js library in your website or web app using the following script tag:
<script type="text/javascript" src="https://goSellJSLib.b-cdn.net/v1.6.0/js/gosell.js"></script>
Use the JavaScript Library in a server-side environment, otherwise, the credit card section will not work.
2. Install with NPM
- Install goSell React Component on NPM by running the following command in the terminal:
npm i @tap-payments/goSell
- Import the library inside your project:
import { GoSellElements } from "@tap-payments/goSell";
Usage
When your page loads, you should call the configurations of your payment gateway by creating a handler object using goSell.goSellElements(). You can call goSell.submit() to submit the form and create a card token on click event.
For react component, submit the form by
GoSellElements.submit()with rendering<GoSellElements />component using the required configurations.
General Configurations
gateway [Object]:
It's a required field for the SDK. It includes the general settings of the payment gateway:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
publicKey | string | Your public key starting with "pk_". | ||
language | string | en | Define the language of payment gateway. The supported languages are en & ar. | |
supportedCurrencies | string or array of currencies using ISO code | all | There are 3 different values for this property: 1. all: which will display all goSell supported currencies.2. gcc: the currencies of Gulf Cooperation Council.3. Array of strings: specify a custom list of the following supported currencies by goSell: ["KWD", "BHD", "SAR", "AED", "OMR", "QAR", "EGP", "GBP", "USD", "EUR"] | |
supportedPaymentMethods | string or array of required payment methods | all | There are 2 different values for this property: 1. all: shows all activated payment methods in your account.2. Array of strings: specify a custom list of your activated payment methods in your account. | |
notifications | string | standard | Define your preferences, if you like to use your own component or HTML element to show notifications or use goSell standard notifications bar. | |
callback | function | Define an action or a callback after each transaction. When the payment process is being executed, the library will return the transaction result JSON to the callback function. | ||
labels | object | { cardNumber:"Card Number", expirationDate:"MM/YY", cvv:"CVV", cardHolder:"Name on Card", actionButton:"Pay" } | Define custom titles for input boxes inside credit/debit cards section. | |
style | object | { 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', iconColor: '#fa755a ' } } | Define custom style for input boxes inside credit/debit cards section. |
See also
Updated 9 months ago