Clearent JavaScript SDK

JavaScript SDK Overview

The JavaScript SDK is designed to allow integrators to seamlessly integrate payments into their website. Clearent's JavaScript SDK uses iframes to incorporate the best practices for PCI security compliance for e-commerce sites: PCI Security Standard Council - Best Practices for Securing E-commerce

The worst part about payment iframes is that they are not responsive and the host page cannot style the contents.

The best part about Clearent JavaScript SDK payment iframe is that it is responsive and the host page can style the contents.

How it works

The Clearent JavaScript SDK allows integrators to add a payment form to their website by simply copying and pasting a few lines of code into their existing website.

1. Add a div to hold the payment form that Clearent will create. (See our examples.)
<div id="payment-form"></div>
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>
3. Using Global Callback Handlers: Add callback handlers to your page to receive the success or error messages from the Clearent JavaScript SDK. If you prefer not to use global callback handlers, you can also return the success and error messages from a promise (promise example below)

<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>
            

4. Call the init method with the baseUrl for sandbox and your sandbox public key. (Additional configuration.) (production keys/url supplied by Clearent Implementations team)

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

5. The cardholder interacts with the form and enters their payment information.
6. 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 (callback function example above).
Using Promises: Alternatively you may wish to uses promises for the response from the ClearentSDK.getPaymentToken() method. Below is an example of the getPaymentToken() called 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);
    }
);
           

7. Clearent JavaScript SDK makes a secure call to the Clearent JWT service and returns a secure, encrypted JWT to the success callback function (ClearentTokenSuccess). (note the jwt field below; that will be used on your backend call to complete the payment)

{
   "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"
   }
}
            

8. On your backend you will make a call to the clearent-mobile-gateway (mobilejwt is the jwt field from the response above)

   You can find more details in our Mobile Payment Transactions documentation.

POST /rest/v2/mobile/transactions/sale
Accept:application/json
Content-Type:application/json
api-key:YOUR_API_KEY_GOES_HERE
mobilejwt:eyJhbGciOi23UzIh4iJ9.eyJsYXN0LWZvdXIiOiIxMrkP8iwid
 HlwZSI6Ik1BTlVBTCIsImV4cCI6MTU0NzY0NjU2MSwidG9rZW4iOiIxMTAw
 MDAwMDAwMDEzNTkyIn0.eT8c_5yUzxCxL2MEtmbG444eTFRW7OxzRF7x4uRIo-U

Body

{
    "type": "SALE",
    "amount": "15.55",
    "software-type": "AwesomePOSSoftware",
    "software-type-version":"1"
}
            

9. If the transaction was successful, you will receive a success response (or an error response if the transaction failed)

{
    "code": "200",
    "status": "success",
    "exchange-id": "ID-clearent-mobile-gateway-1-2a6b56d3-c660-4810-95ea-9fb9a21c6634",
    "payload": {
        "transaction": {
            "amount": "15.55",
            "id": "2586119",
            "type": "SALE",
            "result": "APPROVED",
            "card": "XXXXXXXXXXXX1111",
            "csc": "999",
            "authorization-code": "TAS022",
            "batch-string-id": "938",
            "display-message": "Transaction approved",
            "result-code": "000",
            "exp-date": "1220",
            "software-type": "AwesomePOSSoftware",
            "card-type": "VISA",
            "last-four": "1111"
        },
        "payloadType": "transaction"
    }
}
            

Get Started Today