@tap-payments/gosellsandbox v2.1.1

Table of Contents

• Brief Description
• goSell Checkout
  • goSell Installation
  • goSell Usage
  • goSell General Configurations
  • goSell Transaction Modes
  • goSell Examples
• goSellElements
  • goSellElements Installation
  • goSellElements Usage
  • goSellElements General Configurations
  • goSellElements Transaction Modes
  • goSellElements Examples

This version

• Upgrades mobx to version 6.
• Fixes some bugs in the previous versions.

NOTE: if you're using lower version please integrate with v1.6.3 instead.

Brief Description

goSell Payment Gateway accepts online payments. You can integrate with it in a different way based on your app's specifications.

The new version of goSell Payment Gateway provides:

goSell Checkout: It's a simple way to integrate goSell with a few client side code.

goSell Checkout includes two different integrations based on your preferences:

• goSell LightBox: open a light box / modal dialog inside your store.

• goSell Payment Page: open goSell payment gateway directly without server side code or making any REST API Requests.

goSell Elements: two-step process, with a client-side and a server-side actions. goSell securely will collect your customer’s payment information and returns a card token, then your server-side code can make an API request from the available REST APIs on https://tap.company/developers to complete the process based on your needs (by create a charge / authorize or saving the customer card).

goSell Checkout

goSell Installation

You can integrate with goSell by:

• JavaScript Library, which allows front end developers to setup the payment gateway on their stores easily by adding a very basic snippet of JavaScript using the following script tag:

<script type="text/javascript" src="https://goSellJSLib.b-cdn.net/v2.0.0/js/gosell.js"></script>

Take care, the configurations structure has been changed in this version

Use the JavaScript Library in server side environment, otherwise the credit card section will not work.

• Install goSell package from NPM for who uses React JS framework. by running the following command in the terminal:

npm i @tap-payments/gosell

import the library inside your code:

import { GoSell } from "@tap-payments/gosell";

goSell Usage

The JavaScript Library allows you to use any HTML element or JavaScript event to trigger Checkout. You will just need basic JavaScript skills to integrate with goSell.

When your page loads, you should define the configurations of your payment gateway by creating a handler object using goSell.config(). You can then call goSell.openLightBox() or goSell.openPaymentPage() on click event, to show the transaction result in your redirect page, call goSell.showResult().

goSell General Configurations

• gateway Object*: It's a required field for the JS library. It includes the general settings of the payment gateway:

• customer Object*: It's a required field for the JS library. Includes the customer details, it's required for charge, authorize & saveCard modes only.

• order Object*: It's a required field for the JS library. Includes the order details, it's required for charge, authorize modes only.

• transaction object: It's a required field for the JS library. Includes the transaction mode and it's configurations.

goSell Transaction Modes

You have to select one of the following modes:

1. charge Object:

Enable charge mode in goSell payment gateway. The charge transactions will be created for a credit / debit cards. The object should includes the following settings:

2. authorize Object:

Enable authorize mode in goSell payment gateway. The object should includes the following settings:

3. save_card: Save credit/debit cards in goSell gateway. There's not configurations for this mode.

4. token: Used to generate card token. There's not configurations for this mode.

goSell Show Result Configurations

• callback Function:

It's optional field in goSell.showResult() which define an action or a callback after showing the transaction result in redirect page. It will return the transaction result in a JSON.

goSell Examples

• Vanilla Javascript Example:

Example with transaction mode 'charge':

<html>
<head>
    <title>goSell Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="shortcut icon" href="https://goSellJSLib.b-cdn.net/v2.0.0/imgs/tap-favicon.ico" />
    <link href="https://goSellJSLib.b-cdn.net/v2.0.0/css/gosell.css" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript" src="https://goSellJSLib.b-cdn.net/v2.0.0/js/gosell.js"></script>

    <div id="root"></div>
    <button id="openLightBox" onclick="goSell.openLightBox()">open goSell LightBox</button>
    <button id="openPage" onclick="goSell.openPaymentPage()">open goSell Page</button>

    <script>

    goSell.config({
      containerID:"root",
      gateway:{
        publicKey:"pk_test_Vlk842B1EA7tDN5QbrfGjYzh",
        language:"en",
        contactInfo:true,
        supportedCurrencies:"all",
        supportedPaymentMethods: "all",
        saveCardOption:false,
        customerCards: true,
        notifications:'standard',
        callback:(response) => {
            console.log('response', response);
        },
        onClose: () => {
            console.log("onClose Event");
        },
        backgroundImg: {
          url: 'imgURL',
          opacity: '0.5'
        },
        labels:{
            cardNumber:"Card Number",
            expirationDate:"MM/YY",
            cvv:"CVV",
            cardHolder:"Name on Card",
            actionButton:"Pay"
        },
        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',
              iconColor: '#fa755a '
            }
        }
      },
      customer:{
        id:"cus_m1QB0320181401l1LD1812485",
        first_name: "First Name",
        middle_name: "Middle Name",
        last_name: "Last Name",
        email: "demo@email.com",
        phone: {
            country_code: "965",
            number: "99999999"
        }
      },
      order:{
        amount: 100,
        currency:"KWD",
        items:[{
          id:1,
          name:'item1',
          description: 'item1 desc',
          quantity:'x1',
          amount_per_unit:'KD00.000',
          discount: {
            type: 'P',
            value: '10%'
          },
          total_amount: 'KD000.000'
        },
        {
          id:2,
          name:'item2',
          description: 'item2 desc',
          quantity:'x2',
          amount_per_unit:'KD00.000',
          discount: {
            type: 'P',
            value: '10%'
          },
          total_amount: 'KD000.000'
        },
        {
          id:3,
          name:'item3',
          description: 'item3 desc',
          quantity:'x1',
          amount_per_unit:'KD00.000',
          discount: {
            type: 'P',
            value: '10%'
          },
          total_amount: 'KD000.000'
        }],
        shipping:null,
        taxes: null
      },
     transaction:{
       mode: 'charge',
       charge:{
          saveCard: false,
          threeDSecure: true,
          description: "Test Description",
          statement_descriptor: "Sample",
          reference:{
            transaction: "txn_0001",
            order: "ord_0001"
          },
          metadata:{},
          receipt:{
            email: false,
            sms: true
          },
          redirect: "http://localhost/redirect.html",
          post: null,
        }
     }
    });

    </script>

</body>
</html>

Redirect page defined in charge configurations redirect.html:

<html>
  <head>
    <title>Show Result Demo</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />

    <link
      rel="shortcut icon"
      href="https://goSellJSLib.b-cdn.net/v2.0.0/imgs/tap-favicon.ico"
    />
    <link
      href="https://goSellJSLib.b-cdn.net/v2.0.0/css/gosell.css"
      rel="stylesheet"
    />
  </head>
  <body>

    <script
      type="text/javascript"
      src="https://goSellJSLib.b-cdn.net/v2.0.0/js/gosell.js"
    ></script>

    <div id="root"></div>
    <script>
       goSell.showResult({
           callback: response => {
           console.log("callback", response);
         }
      });
    </script>
  </body>
</html>

• React JS Example:

import React, { Component }  from "react";
import { GoSell } from "@tap-payments/gosell";

class GoSellDemo extends Component {

  constructor(props){
    super(props);
  }

  callbackFunc(response){
    console.log(response);
  }

  render() {

    return (
      <div className="App">

      <button onClick={() => GoSell.openLightBox()}>open goSell LightBox</button>
      <button onClick={() => GoSell.openPaymentPage()}>open goSell Page</button>

        <GoSell
           gateway={{
             publicKey:"pk_test_Vlk842B1EA7tDN5QbrfGjYzh",
             language:"en",
             contactInfo:true,
             supportedCurrencies:"all",
             supportedPaymentMethods:"all",
             saveCardOption:true,
             customerCards: true,
             notifications:'standard',
             backgroundImg: {
              url: 'imgURL',
              opacity: '0.5'
            },
             callback: this.callbackFunc,
             labels:{
                 cardNumber:"Card Number",
                 expirationDate:"MM/YY",
                 cvv:"CVV",
                 cardHolder:"Name on Card",
                 actionButton:"Pay"
             },
             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',
                   iconColor: '#fa755a '
                 }
             }
           }}
           customer={{
             first_name: "First Name",
             middle_name: "Middle Name",
             last_name: "Last Name",
             email: "demo@email.com",
             phone: {
                 country_code: "965",
                 number: "99999999"
             }
           }}
           order={{
             amount: 100,
             currency:"KWD",
             items:[{
               id:1,
               name:'item1',
               description: 'item1 desc',
               quantity:'x1',
               amount_per_unit:'KD00.000',
               discount: {
                 type: 'P',
                 value: '10%'
               },
               total_amount: 'KD000.000'
             },
             {
               id:2,
               name:'item2',
               description: 'item2 desc',
               quantity:'x2',
               amount_per_unit:'KD00.000',
               discount: {
                 type: 'P',
                 value: '10%'
               },
               total_amount: 'KD000.000'
             },
             {
               id:3,
               name:'item3',
               description: 'item3 desc',
               quantity:'x1',
               amount_per_unit:'KD00.000',
               discount: {
                 type: 'P',
                 value: '10%'
               },
               total_amount: 'KD000.000'
             }],
             shipping:null,
             taxes: null
           }}
           transaction={
             mode: 'charge',
             charge:{
              saveCard: false,
              threeDSecure: true,
              description: "Test Description",
              statement_descriptor: "Sample",
              reference:{
                transaction: "txn_0001",
                order: "ord_0001"
              },
              metadata:{},
              receipt:{
                email: false,
                sms: true
              },
              redirect: "REDIRECT_URL",
              post: null,
            }}
           />
      </div>
    );
  }
}

export default GoSellDemo;

Redirect page defined in charge configurations redirect.js:

import React, { Component } from "react";
import { GoSell } from "@tap-payments/gosell";

class Redirect extends Component {
  componentDidMount() {
    GoSell.showResult({
      callback: (response) => {
        console.log("callback", response);
      },
    });
  }

  render() {
    return (
      <div className="App">
        <GoSell />
      </div>
    );
  }
}

export default Redirect;

OR

import React, { Component }  from "react";
import { GoSell } from "@tap-payments/gosell";

class Redirect extends Component {

 render() {
    return (
      <div className="App">
        <GoSell
          gateway={{
            callback: (response) => {
              console.log("callback", response);
            },
          }}
        />
      </div>
    );
  }
}

export default Redirect;

goSellElements

goSellElements Installation

You can integrate with goSellElements by:

• JavaScript Library, which allows front end developers to setup the payment gateway on their stores easily by adding a very basic snippet of JavaScript using the following script tag:

<script type="text/javascript" src="https://goSellJSLib.b-cdn.net/v2.0.0/js/gosell.js"></script>

Use the goSellElements in server side environment, otherwise the credit card section will not work.

• Install goSell React Component on NPM for who uses React JS. by running the following command in the terminal:

npm i @tap-payments/goSell

import the library inside your code:

import { GoSellElements } from "@tap-payments/goSell";

goSellElements Usage

The JavaScript Library allows you to use any HTML element or JavaScript event to add goSell elements to your page. You will just need basic JavaScript skills to integrate with goSell.

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 with the required configurations.

goSellElements General Configurations

• gateway Object*: It's a required field for the JS library. It includes the general settings of the payment gateway:

2. token boolean*: Used to generate card token.

goSellElements Examples

• Vanilla Javascript Example:

<html>
   <head>
      <title>goSell Elements Demo</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
      <link rel="shortcut icon" href="https://goSellJSLib.b-cdn.net/v2.0.0/imgs/tap-favicon.ico" />
      <link href="https://goSellJSLib.b-cdn.net/v2.0.0/css/gosell.css" rel="stylesheet" />
   </head>
   <body>
      <script type="text/javascript" src="https://goSellJSLib.b-cdn.net/v2.0.0/js/gosell.js"></script>
      <div id="root"></div>
      <p id="msg"></p>
      <button id="submit-elements" onclick="goSell.submit()">Submit</button>
      <script>
         goSell.goSellElements({
           containerID:"root",
           gateway:{
             publicKey:"pk_test_Vlk842B1EA7tDN5QbrfGjYzh",
             language:"en",
             supportedCurrencies: "all",
             supportedPaymentMethods: "all",
             notifications:'msg',
             labels:{
                 cardNumber:"Card Number",
                 expirationDate:"MM/YY",
                 cvv:"CVV",
                 cardHolder:"Name on Card",
                 actionButton:"Pay"
             },
             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',
                   iconColor: '#fa755a '
                 }
             }
           }
         });

      </script>
   </body>
</html>

• React JS Example:

import React, { Component }  from "react";
import { GoSellElements } from "@tap-payments/gosell";

class GoSellElementsDemo extends Component {

  constructor(props){
    super(props);
  }

  callbackFunc(response){
    console.log(response);
  }

  render() {

    return (
      <div className="App">

        <GoSellElements
           gateway={{
             publicKey:"pk_test_Vlk842B1EA7tDN5QbrfGjYzh",
             language:"en",
             supportedCurrencies: "all",
             supportedPaymentMethods: "all",
             notifications:'msg',
             callback: this.callbackFunc,
             labels:{
                 cardNumber:"Card Number",
                 expirationDate:"MM/YY",
                 cvv:"CVV",
                 cardHolder:"Name on Card",
                 actionButton:"Pay"
             },
             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',
                   iconColor: '#fa755a '
                 }
             }
           }}
            />

           <p id="msg"></p>

           <button onClick={() => GoSellElements.submit()}>Submit</button>
      </div>
    );
  }
}

export default GoSellElementsDemo;

Author

• Hala Q.