Google Pay ™

Google Pay ™ provides a 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 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:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <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 utltimately receive the needed token that is to be sent to the Connexpay Sales API

1 2 3 4 5 // 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

1 const cpayWalletWithTotalPrice = CXPayWallet();

5. Define a configuration options object

Define a configuration options object to identify settings for the form inputs, in our case totalPriceElementId = "amount" and cxpayWalletId = "withAmount"

1 2 3 4 const cpayWalletWithTotalPriceOptions = { totalPriceElementId: 'amount', // id of element that captures transaction amount cxpayWalletId: 'withAmount', };

6. Define Google Pay Configuration

Instantiate the ConnexPay Google Pay config, supplying the needed values as noted in the config

1 2 3 4 5 6 7 8 9 const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig( '<your ConnexPay merchant id>', // your ConnexPay provided Merchant Id goes here '<your Google merchant id>', // your Google provided Merchant Id from Step 4 of Google Merchant Registration '<your merchant name>', // your Merchant Name goes here '<optional: merchant origin>', // only needed for hosted payment page scenarios, otherwise null 'TEST', // Google Pay environment - switch to PRODUCTION when in production logToken, // name of callback function defined in step 2, that fires locally on complete of google pay process cpayWalletWithTotalPriceOptions // config object defined in step 4 above );

7. Initialize the Connexpay Wallet

1 cpayWalletWithTotalPrice.Init(googlePayConfigWithTotalAmount);

If successful and the payer is using a supported browser or device, a GPay button will be rendered allowing the payer to select from any of the available payment facilities in their Google wallet.

Upon selection of a payment card GooglePay will encrypt the card details and return apaymentData object back to you via a callback function that you will provide in step 3 below.

8. Pass payment token to ConnexPay Sales API

The token captured in the callback from step 3 above is a Base64 encoded representation of the paymentData response from Google. This token can be included in the ConnexPay Create Sales request in lieu of the standard CardNumber, Cvv2 and ExpirationDate data via the new wallet parameters. The wallet object includes fields to specify the type of wallet payment and the Base64 encoded token. This token is treated just like a standard customer Credit card and processed through the ConnexPay payment gateway, providing a real-time Approve/Decline response.

Reference: https://developers.connexpay.com/#create-sale

POST https://sandboxsalesapi.connexpay.com/api/v1/sales
Create Sale : Sample Request

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { "DeviceGuid": "{{Device}}", "Amount": 150.00, "OrderNumber": "{{timestamp}}-TEST", "SequenceNumber": "SEQ-{{timestamp}}", "ConnexPayTransaction": { "ExpectedPayments": 10 }, "Card": { "wallet": { "type": "google", "token": "eyJzaWduYXR1cmUiOiJNRVFDSUFaV0p5L2hNTEFNdklzWTcyakZ4b2VwamNZUXNHVnJwRlNSVy9xOHFLUndBaUJFaTNnZzBIVXQ4VXM1UE9zSzZ4QzF0bWY4R0dHdGZoWGZpcTQwazVYa0VRXHUwMDNkXHUwMDNkIiwiaW50ZXJtZWRpYXRlU2lnbmluZ0tleSI6eyJzaWduZWRLZXkiOiJ7XCJrZXlWYWx1ZVwiOlwiTUZrd0V3WUhLb1pJemowQ0FRWUlLb1pJemowREFRY0RRZ0FFQlo0Y1l5TW1pMG0vdzdSRGdyNXplSk5OSWdjY05UMFN6WFM5Znk1R0J5WGFXaXJPWmRlVjhUNnBSSEYxQWZid0lLOGVyZDJhdFoyQjdIZXA3YzVzUHdcXHUwMDNkXFx1MDAzZFwiLFwia2V5RXhwaXJhdGlvblwiOlwiMTYwMzM4ODEwMTQyMVwifSIsInNpZ25hdHVyZXMiOlsiTUVZQ0lRRGQ1ZXFNNU5UU09aYUJwbHpGVmVQaHVQcEh5Q3hwQUFuVUw1R3hHV3M1UGdJaEFNOXI2eW1FZnpwSFV1d2lSdzVEUE8xekZZQld3NGxXd29GV1ZFcEpxSVFRIl19LCJwcm90b2NvbFZlcnNpb24iOiJFQ3YyIiwic2lnbmVkTWVzc2FnZSI6IntcImVuY3J5cHRlZE1lc3NhZ2VcIjpcIkhUK2N4SVdHNVR2NS9hUGZkdmNaR2xQeEJoYWRjemVwRGNHYjUzeDRqSlpnSGlkU3ZsVlUrWnFDeDA1NStoRVIxeithQXB2cU5MRVo4T2hZeG9vNUIzT2U3ZjJzZzdneFpEM3RzUGhsZ0pHK1RwWHQ3UjdqU1lNMDArOTJObDFySjBjSXRuU0RDcHBPRWgxSkFReFFzZmp3UGNTb0Z4emlWVFBraVAxTWlRZGtNZE1jTDJWVGljdjRCMXJpN0ROTDNLZVFIVVNnZ01hYnVaZExZbVM2Sko1blZNYkw0ZXRxaHduZ3ZTMTd0Qit5SzJ1bTF2VU0vNS9aaU0xQkNBSThza2ZrQkdvN2g4OHl5bHUwTFY0OEh3NUhyeExtRFlBVmdLWTRLQjdnNkN3bVV5bWNkS1NKaHU0R2d5NVNFVHhCT3Q1UEgwMTNOeHArN2tEZlF5ZExMalJLdmdrNFF4MTBndEJBd2kwdVdhdmV0Tmw3dWdWV0hzTGlkQmF4bFVUWE1DVlYxWmV6WnJzMXdUMjhKTnhCVlZpWkNSOHdpZm1sS002YTE2Y0VpYXc5NXBoVko1ZXUyRW9kb2E0aERWQkFmRGd5VUlBd1dXN3pqNVJDNko1L0ZKQVIvVnFBMWhtTUNSK0lJLzlkSkFcXHUwMDNkXFx1MDAzZFwiLFwiZXBoZW1lcmFsUHVibGljS2V5XCI6XCJCRUxSVnFEZWJPT0c5RmJQUVdrN05LSm9vVElRUGRCQU12elcvWlMrWEwrcStseUU3K0xMNWRJcDJUSHp0eGg5Z2lyZ2RkS1MreVltekRWZjhPN1g0Y3NcXHUwMDNkXCIsXCJ0YWdcIjpcImNXeGtRdzVXMFdQOUUzeDNxa3ZyRXhNTEFHYWtha0ZlenVUb2pKUzVLYW9cXHUwMDNkXCJ9In0=" } } }

 

The following is a complete code example that also demonstrates how two wallet buttons would be rendered to the screen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CXP Wallet Demo</title> </head> <body> <div style="width: 100%"> <div style=" margin-left: auto; margin-right: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; " > <div style=" border: 1px solid #f0f0f0; min-width: 10rem; max-width: 20rem; padding: 2rem; font-family: Arial, Helvetica, sans-serif; font-weight: 600; " > <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> </div> <div id="tokenDiv" style=" min-width: 40rem; max-width: 60rem; border: solid 1px #f0f0f0; background-color: #e0e0eb; border-radius: 0.75rem; padding: 0.5rem; margin-top: 0.5rem; display: none; " > <p id="token" style=" word-break: break-word; font-family: monospace; text-align: left; " ></p> </div> </div> </div> <script src="./cpaywallet.min.js"></script> <script> // the app callback function - expect to receive back a base64 encoded token const logToken = (token) => { console.log(token); document.getElementById('token').innerHTML = token; document.getElementById('tokenDiv').style.display = 'block'; }; // instantiate global CXPayWallet const with Total price specified const cpayWalletWithTotalPrice = CXPayWallet(); const cpayWalletWithTotalPriceOptions = { totalPriceElementId: 'amount', // id of element that captures transaction amount cxpayWalletId: 'withAmount', }; // instantiate CXP Google Pay Config const const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig( '121212121212112', // ConnexPay merchant Id 'ABC2EF6GHIJ2KLMN' // Google merchant Id 'Test Merchant', // merchant Name null, // merchant origin (only needed for hosted payment page scenarios, otherwise null) 'TEST', // Google Pay environment logToken, // callback function that fires locally on complete of google pay process cpayWalletWithTotalPriceOptions ); // initialize the CXP Wallet with the Google Pay config cpayWalletWithTotalPrice.Init(googlePayConfigWithTotalAmount); </scipt> </body> </html>