Clearent JavaScript SDK

Google Pay Overview

Google Pay allows customers to securely make payments using Google Pay from an internet browser using their Google Wallet. This guide highlights the minimum changes needed to support Google Pay.

Audience

This guide is intended for developers/solutions that plan to, or already are, integrated with the javascript-sdk.

Prerequisites

The following are required before you incorporate Google Pay on your website:

·       Serve an HTTPS webpage with a TLS domain-validated certificate.

·       Use one of the following supported web browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, or UCWeb UC Browser.

·       Add a payment method to your Google account by referring here.

·       Adhere to our Google Pay API Acceptable Use Policy by referring here.

·       Implement Clearent’s manual card entry solution using the JavaScript SDK.

Supported and Unsupported Payment Methods

Collect payment and address information from customers who use Google Pay. The supported cards and merchant capabilities are as follows:

·       Supported Cards – Visa, MasterCard, American Express, and Discover

·       Merchant Capabilities – Credit Cards, Debit Cards (with either the Visa or Mastercard logo)

Note

Google’s documentation says to apply for production access so you can obtain a Merchant ID but Clearent already has one and will handle this for you.

Getting Started

You need to create a request object and a buttonConfig object based on Google's specs and then call our init function. Google provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience. Refer to the following link for Google styling guidelines:

https://developers.google.com/pay/api/web/guides/brand-guidelines

For Best UX practices:

https://developers.google.com/pay/api/web/guides/ux-best-practices

See the Google tutorial for more details about the request:

https://developers.google.com/pay/api/web/guides/tutorial

Check if Google Pay is available in the user’s browser by using the following function.  This enables you to determine when to show the Google Pay button.

          
ClearentSDK.googlePayAvailable()
        
        

Configuring the onClick event

1.     Here's an example of starting a Google Pay Session using the init function.

const request = {
	"total": {
		"label": "Sasha's Mustard Shop",
		"amount": "0.01",
		"type": "final"
	}
};

const buttonConfig = {
	"buttonColor": "default",
	"buttonType": "buy",
	"buttonLocale": "en",
	"buttonSizeMode": "fill"
};

ClearentSDK.init({
	"baseUrl": "https://gateway-sb.clearent.net",
	"pk": "Your public key",
	"enableGooglePay": true,
	"googlePayRequest": request,
	"googlePayButtonConfig": buttonConfig
});

2.     The SDK handles the Google Pay token and converts it to the JWT you currently handle. Otherwise, you will get an error. If you have not already integrated the JavaScript SDK, follow the steps here and then follow the steps in this document. Else, there should be no extra work at this point.

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

3.     Send the Clearent token to your server using the secure transmission you use elsewhere (HTTPS and the authentication solution).

4.     From your server, construct the payment (see Mobile Gateway documentation for more details). Share with Clearent the secret API key from your server, not from your website.

5.     When you get a successful token response, return the response to the JavaScript to be handled appropriately.

Appendix A – Related Links

Refer to the following table for links to helpful resources: