Home
Guides
Start typing to search…

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

  1. Install goSell React Component on NPM by running the following command in the terminal:
npm i @tap-payments/goSell
  1. 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

Handling Redirects

Saved Cards

After Payments

Updated 2 months ago