Introduction

In this article, we will learn how to implement a clearent payment gateway with a Credit card token using jquery. You can use this token as a card in your Sale refund and other APIs

Integrators may use the JavaScript SDK to effortlessly incorporate payments into their websites. Iframes are used in Clearent’s JavaScript SDK to implement best practices for PCI security compliance for e-commerce sites.

Let’s begin.

Step 1: Add a div to hold the payment form that Clearent will create.

<div id="payment-form"></div>

Step 2: Add the script tag to the Clearent JavaScript SDK library

<script src="https://gateway-sb.clearent.net/js-sdk/js/clearent-host.js"></script>

Step 3: Call the init method with the baseUrl for sandbox and your sandbox public key

<script type="text/javascript">
    ClearentSDK.init({
        "baseUrl": "https://gateway-sb.clearent.net",
        "pk": "YOUR PUBLIC KEY GOES HERE"
    });
</script>

Step 4 : The cardholder interacts with the form and enters their payment information.

Step 5: When you are ready to make a payment, call the ClearentSDK.getPaymentToken method. For example, this can be done from a submit button the user clicks.

ClearentSDK.getPaymentToken();

When the getPaymentToken() method is called in this manner, the success or error message will be handled by the success and error callbacks

There are two types of callbacks :

1. Using  Promises
2. Using Global Callback Handlers

1. Using  Promises

ClearentSDK.getPaymentToken().then(
    (result) => {
        // this function is called if getting a payment token was successful
        console.log("ClearentTokenSuccess");
        console.log(result);
    },
    (error) => {
        // this function is called if getting a payment token failed
        console.log("ClearentTokenError");
        console.log(error);
    }
);

2. Using Global Callback Handlers

<script type="text/javascript">
    // When you get a successful token response and
    // use this to make a sale/auth on your backend
    function ClearentTokenSuccess(raw, json) {
        console.log("ClearentTokenSuccess");
        console.log(raw);
        console.log(json);

        // now you can send the token to your server
        // to complete the transaction via mobile-gateway

    }

    function ClearentTokenError(raw, json) {
        console.log("ClearentTokenError");
        console.log(raw);
        console.log(json);

    }
</script>

After that, you got the below type of response from Clearent

{
   "code":"200",
   "status":"success",
   "exchange-id":"ID-clearent-mobile-jwt-1-c32bfe39-d454-4e34-8b4f-94d850643e48",
   "payload":{
      "mobile-jwt":{
         "jwt":"eyJhbGciOi23UzIh4iJ9.eyJsYXN0LWZvdXIiOiIxMrkP8iwid
                HlwZSI6Ik1BTlVBTCIsImV4cCI6MTU0NzY0NjU2MSwidG9rZW4iOiIxMTAwMDAw
                MDAwMDEzNTkyIn0.eT8c_5yUzxCxL2MEtmbG444eTFRW7OxzRF7x4uRIo-U",
         "last-four":"1111"
      },
      "payloadType":"mobile-jwt"
   }
}

That’s it