Google Pay ™

Google Pay ™ provides an easy and secure process for customers to pay merchants. ConnexPay’s WalletJS SDK provides a simple process for enabling Google Pay functionality and already follows Google’s Brand Guidelines. ConnexPay supports both Android and Web merchants via direct integration or via our convenient SDK implementation. Click here to visit Google’s documentation on Google Pay for web or here for Android.

You must follow Google’s Brand Guidelines which can be found here for Web and here for Android. Also, you must adhere to the Google Pay APIs Acceptable Use Policy and accept the terms defined in the Google Pay API Terms of Service.

The following diagram gives a high-level overview of the Google Pay payment flow when implemented through ConnexPay’s Wallet JS SDK

When a consumer chooses to pay with Google Pay, the Google Pay API initiates a request to Google servers. This request includes the name of the processor along with other parameters. Google uses the processor’s public key to encrypt the response and sends a payment token back to the client. The client includes this payment token in the Sales API request to ConnexPay, indicating the form of payment as Google Pay. ConnexPay processes the payment with that payment token.

📘

ConnexPay has the ability to accept Visa, Mastercard, Discover, and American Express. However, each merchant account may be configured differently based on what was discussed and setup during the implementation process. All sales will be settled in USD. ConnexPay does not require a billing address in the Sales request, however, it is highly recommended.

When environment: ‘TEST’, the client can process test transactions and does not need to be registered with Google Pay.

Merchant Registration

Before going live with Google Pay in production each Merchant must register with Google in order to be assigned an official Google MerchantId. This MerchantId, along with the ConnexPay specific Gateway and GatewayMerchantId configurations will be entered in the ConnexPay SDK in order to successfully connect to GooglePay.

Once testing is complete, clients must register for production access (detailed below). Once registration is complete, the environment can be flipped to ‘PRODUCTION'

Request Production Access

After you've fulfilled the exit criteria for each item in the Integration checklist, found here for Web or here for Android, click Manage integrations in console to begin the process to obtain production access.

Step 1 - Navigate to https://pay.google.com/business/console/

Step 2 - Complete your business profile by providing the required business specific information for your account.

Step 3 - Complete Integration by providing your website’s payment URL and screenshots of the payment flow. Your API Integration type should be configured as Gateway. Once all required elements are complete, you may go ahead and ‘Submit for approval’ to submit your integration to Google.

Step 4 - Google will review the information provided and, if there are no issues, your profile will be approved and ready for Production use. At this point you can include the Google Merchant Id (found in the top right corner of the Business Console) in Step 6. Define Google Pay Configuration of the WalletSDK setup.

ConnexPay WalletJS SDK for Google Pay

ConnexPay’s WalletJS is built to ease the integration of alternative Wallet payment methods into your desired payment flow by rendering supported payment buttons for major payment providers. The steps below will help you get started with the SDK.

1. Add ConnexPay’s Wallet JS to your payment page

WalletJS is a JavaScript library for rendering a variety of wallet payment facilities. The source is available directly from our servers (recommended) or can be downloaded and served locally. Just add the following script tag to your page to get started:

<script async src=”https://js.connexpay.com/1.0.0/cpaywallet.min.js”></script>

2. Markup

In your HTML form markup, add the field to capture the amount of the payment and the CXPAY-WALLET element. In the following example, we are asking the Google Pay button to be used and the button is expecting the "withAmount" flag.

📘

NOTE: to use the wallet Google Pay functionality WITHOUT using the total Amount field which submits a Google Pay TotalPriceStatus of 'NOT_CURRENTLY_KNOWN', specify the id as "withOutAmount" and don't include an amount input.

<div>
    <h5>With Amount</h5>
    <label for="amount">
        Amount:
        <input
            type="text"
            id="amount"
            placeholder="Enter $ Amount"
        />
    </label>
    <div style="margin-top: 0.5rem">
        <cxpay-wallet
            type="google"
            id="withAmount"
        ></cxpay-wallet>
    </div>
</div>

3. Implement the Callback Function

Create a callback function that will ultimately receive the needed token that is to be sent to the Connexpay Sales API

// the app callback function - expect to receive back a base64 encoded token
const logToken = (token) => {
    console.log(token);
    // use the returned token in your call to the Connexpay Sales API
};

4. Instantiate the CXPayWallet Object

const cpayWalletWithTotalPrice = CXPayWallet();

Did this page help you?