Google Pay for Web

Configure Google Pay into your website to accept payments in browsers.

The following sections explain how to configure Google Pay on your website.

Prerequisites

Make sure you have the following before you configure Google Pay and start accepting payments on your website:

• HTTPS enabled for both development and production environments.

• A valid SSL certificate for your domain.

• Transport Layer Security (TLS) 1.2 or later and a supported cipher suite for your server.

• Supported web browsers for your website.

• Ensure Google Pay is configured and enabled on your production server.

• Comply with the Google Pay and Wallet APIs Acceptable Use Policy.

• Implement manual card entry solution using JavaScript SDK.

We recommend implementing manual card entry in the JavaScript SDK as a fallback.

Supported payment methods

Payment and address information are required to process payments using Google Pay on your website.

Supported card brands

• Visa

• MasterCard

• Amex

• Discover

Merchant capabilities

• Credit cards

  • Visa

  • Mastercard

  • Amex

  • Discover

• Debit cards

  • Visa

  • Mastercard

Unsupported payment methods

• In-App payments

• Recurring payments

• Split shipment

• Voids/Refunds through Google Pay

Configuring Google Pay for Web

To configure Google Pay into your website:

1. Add the request object in your code using the Brand Guidelines by Google as a reference.

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

The request object includes the following fields:

Name	Data type	Required?	Description
total	Object	Optional	Contains the total payment information.
total.label	String	Optional	The name of the merchant shown to the customer.
total.amount	String	Required	The total amount to be charged. For example, 0.01
total.type	String	Required	Indicates the type of total. Use final for the final amount.

1. Add the buttonConfig object to create onClick event into your website.

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

The buttonConfig object includes the following fields:

Name	Data type	Required?	Description
buttonColor	String	Optional	Defines the color of the Google Pay button. Common values are: default black white
buttonType	String	Required	Defines the purpose of the button. Common values are: buy donate order pay subscribe
buttonLocale	String	Required	Specifies the locale for the button text. For example, en for English.
buttonSizeMode	String	Required	Determines how the button scales. For example, fill makes the button expand to fit its container.

1. Add the ClearentSDK.init function to start the Google Pay session.

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

The ClearentSDK.init function includes the following fields:

Name	Data type	Required?	Description
baseUrl	String	Optional	The base URL for the Xplor Pay mobile payment API endpoint. Use the sandbox or production URL as appropriate.
pk	String	Required	The public key used to authenticate requests to the mobile payment API endpoint.
enableGooglePay	Boolean	Optional	Indicates Google Pay integration. Enabled when set to true.
googlePayRequest	Object	Optional	Contains the payment request configuration for Google Pay. It includes request object fields.
googlePayButtonConfig	Object	Optional	Defines the appearance and behavior of the Google Pay button. It includes buttonConfig object fields.

1. Add the googlePayAvailable function to check whether your customer uses Google Pay.

This function helps you decide whether to display the Google Pay button in the customer’s browser.

ClearentSDK.googlePayAvailable()

Processing payments with Google Pay

The JavaScript SDK handles Google Pay token and convert it into the mobile JSON Web Token (JWT).

To process the payment with Google Pay:

1. Add the ClearentTokenSuccess and ClearentTokenError functions to your integration to receive feedback containing the mobile JSON Web Token (JWT) for processing payments.

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

1. Use HTTPS methods to send the mobile payment API requests using the mobile JSON Web Token (JWT) from your server.

Make sure you have the following to process the Google Pay transaction using Xplor Pay mobile payment API on your website:

✅ API key issued by Xplor Pay

✅ Mobile JSON Web Token (JWT)

Don’t expose the API key issued by Xplor Pay in your website code or client-side scripts.