` titled `gpay-container`. This div is the placeholder where the Google Pay button appears; you can place it anywhere on your page. ```html

``` The `

` is your designated spot for the button. The `pay.js` script tag asynchronously loads the Google Pay library. The `onload="onGooglePayLoaded()"` attribute ensures your `onGooglePayLoaded()` function (which checks whether Google Pay is ready) runs as soon as the library finishes loading. ## Customizing the Google Pay button The Google Pay button should fit your website's design and user experience; consult Google's documentation for how to achieve this. After the Google Pay API is loaded and ready, your site can display the button. It is dynamically generated by the Google Pay library and placed inside the `gpay-container` div. ```javascript const GPAY_BUTTON_CONTAINER_ID = 'gpay-container'; function renderGooglePayButton() { const button = getGooglePaymentsClient().createButton({ buttonColor: 'default', buttonType: 'buy', buttonRadius: 4, buttonLocale: 'en', onClick: onGooglePaymentButtonClicked, allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods, }); document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button); } ``` The `createButton()` library method takes a `ButtonOptions` configuration argument that defines how the button looks and behaves: - `GPAY_BUTTON_CONTAINER_ID`: constant holding the ID (`gpay-container`) of the HTML element where the button should appear. - `renderGooglePayButton()`: function responsible for creating and adding the button. - `getGooglePaymentsClient().createButton({...})`: uses the Google Pay client to generate the button. The `ButtonOptions` object allows customization: - `buttonColor`: choose the appearance (`default`, `black`, `white`). - `buttonType`: defines the text on the button (for example "Buy/Checkout with Google Pay"). - `buttonRadius`: adjusts the roundness of the button's corners. - `buttonLocale`: sets the language for the button's text. - `onClick: onGooglePaymentButtonClicked`: calls your `onGooglePaymentButtonClicked` function (which initiates the payment process) whenever a customer clicks the button. - `allowedPaymentMethods`: ensures the button only appears if there are payment methods available that match what you've configured in `baseGooglePayRequest`. - `document.getElementById(...).appendChild(button)`: inserts the button Google Pay created directly into the div on your webpage, making it visible to the user. ## Handling the Google Pay loaded event The `onGooglePayLoaded()` function is called when the Google Pay API script has finished loading. It is the handshake with the Google Pay service, ensuring everything is in order before you present the payment option to your customers. ```javascript function onGooglePayLoaded() { const req = deepCopy(baseGooglePayRequest); getGooglePaymentsClient() .isReadyToPay(req) .then(function (res) { if (res.result) { renderGooglePayButton(); } else { console.log('Google Pay is not ready for this user.'); } }) .catch(console.error); } ``` ## Configuring Google Pay The `baseGooglePayRequest` object defines the fundamental configuration for all Google Pay requests. ```javascript const baseGooglePayRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [ { type: 'CARD', parameters: { allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'], }, tokenizationSpecification: { type: "PAYMENT_GATEWAY", parameters: { "gateway": "inoviopay", "gatewayMerchantId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" } }, }, ], merchantInfo, }; Object.freeze(baseGooglePayRequest); let paymentsClient = null; function getGooglePaymentsClient() { if (paymentsClient === null) { paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST', // Environment configuration merchantInfo, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged, }, }); } return paymentsClient; } ``` Key properties that shape the Google Pay experience: - `apiVersion` and `apiVersionMinor`: tell Google Pay which version of the Google Pay API you are using. - `allowedPaymentMethods`: array declaring what types of payments you accept. - `parameters` (within the `CARD` type): - `allowedAuthMethods`: defines the authentication methods your integration supports: - `PAN_ONLY`: used for cards saved directly to a user's Google account. Google Pay returns the actual card number. To use 3D Secure with `PAN_ONLY`, submit your third party 3-D Secure details with the authorization; the gateway will not prevent a transaction from being sent to the processor without 3DS on the transaction request. - `CRYPTOGRAM_3DS`: used for cards tokenized via the Google Wallet app. Instead of the real card number, a device-specific token is used. A 3-D Secure cryptogram is generated on the user's device, providing stronger security and often shifting liability for fraud to the card issuer. Inovio recommends using this `allowedAuthMethods` value only. - `allowedCardNetworks`: lists all the major card networks your Merchant Account is set up to accept (American Express, Discover, Mastercard, Visa, and/or more). See Google's official Google Pay documentation for details. - `tokenizationSpecification`: configuration for how payment credentials are secured and sent to your payment processor. - `type: "PAYMENT_GATEWAY"`: indicates that the payment gateway handles tokenization on your behalf. - `parameters`: gateway-specific details essential for secure processing, provided to you when you request your configuration data from the gateway: - `gateway`: the name of your payment gateway (for example `inoviopay`). - `gatewayMerchantId`: your unique ID provided by the gateway. - `Object.freeze(baseGooglePayRequest)`: prevents accidental changes to your base Google Pay configuration after it is set. - `paymentsClient` starts as `null`; `getGooglePaymentsClient()` uses lazy initialization, creating the `PaymentsClient` instance only when needed. - `environment`: `'TEST'` is for development and debugging; change to `'PRODUCTION'` when you're ready to go live. - `paymentDataCallbacks`: functions to handle events during the Google Pay flow: - `onPaymentAuthorized`: called after the user has successfully authorized a payment. This is where you send the payment data to the payment service provider for processing. - `onPaymentDataChanged`: fires if the user changes their payment data (such as selecting a different shipping address or payment method) within the Google Pay sheet, letting you dynamically update the order total or shipping options. ## Handling the Google Pay button click When a user clicks your Google Pay button, `onGooglePaymentButtonClicked()` gathers the specifics of the current transaction and launches the Google Pay payment window. ```javascript // @namespace googlePayHandler // @description A self-contained handler for a professional and secure Google Pay // integration. This script manages fetching configuration from a secure backend, // setting up the Google Pay client, and handling the entire payment lifecycle. const googlePayHandler = { // Default settings can be overridden by the customer during initialization. config: { gpayButtonContainerId: 'gpay-container', currencyCode: 'USD', countryCode: 'US', environment: 'TEST', // Should be 'PRODUCTION' for live transactions }, // --- Internal State --- paymentsClient: null, merchantConfig: null, // CRITICAL: Fetches the merchant configuration from the CUSTOMER'S backend. // This is a vital security measure. API credentials should NEVER be exposed in // client-side code. // Your customer must implement a server endpoint that securely communicates with // your API. // @returns {Promise} A promise that resolves with the merchant // configuration or null on failure. async fetchMerchantConfigFromServer() { // --- CUSTOMER ACTION REQUIRED --- // This URL must point to an endpoint on YOUR CUSTOMER'S server. // Their server is responsible for making the secure, server-to-server call to the // Inovio API. const customerBackendUrl = 'https://api.customer-website.com/get-payment-config'; try { const response = await fetch(customerBackendUrl); if (!response.ok) { throw new Error(`Network response was not ok: ${response.statusText}`); } const configData = await response.json(); console.log("Successfully fetched merchant configuration."); return configData; } catch (error) { console.error("Fatal Error: Could not retrieve merchant configuration from the server.", error); // Optional: Display a user-friendly error message in the UI. // e.g., document.getElementById(this.config.gpayButtonContainerId).innerText = // "Payment system unavailable."; return null; } }, // Initializes the Google Pay client if it doesn't already exist. // @returns {google.payments.api.PaymentsClient} getGooglePaymentsClient() { if (this.paymentsClient === null) { if (!this.merchantConfig) { throw new Error("Cannot initialize Google Payments client without merchant configuration."); } this.paymentsClient = new google.payments.api.PaymentsClient({ environment: this.config.environment, merchantInfo: { merchantId: this.merchantConfig.HOST_CONFIG.merchantId, // Customer will set their own display name merchantName: this.merchantConfig.HOST_CONFIG.merchantName || 'Sample Merchant', }, paymentDataCallbacks: { onPaymentAuthorized: this.onPaymentAuthorized, onPaymentDataChanged: this.onPaymentDataChanged, }, }); } return this.paymentsClient; }, // Main entry point. Initializes the Google Pay flow. // @param {Object} [userConfig={}] - Customer-specific configuration to override the // defaults. async initialize(userConfig = {}) { // 1. Merges customer's configuration with defaults. this.config = { ...this.config, ...userConfig }; // 2. Securely fetches the configuration from the customer's backend. this.merchantConfig = await this.fetchMerchantConfigFromServer(); if (!this.merchantConfig) { console.error("Google Pay initialization failed: Merchant configuration is missing or could not be fetched."); return; } const isReadyToPayRequest = this.createBaseRequest(); this.getGooglePaymentsClient() .isReadyToPay(isReadyToPayRequest) .then((isReadyToPayRequest) => { if (isReadyToPayRequest.result) { this.renderGooglePayButton(); } else { console.log('Google Pay is not ready for this user.'); } }) .catch(console.error); }, // Creates and appends the Google Pay button to the configured container. renderGooglePayButton() { const container = document.getElementById(this.config.gpayButtonContainerId); if (!container) { console.error(`Google Pay button container with ID "${this.config.gpayButtonContainerId}" was not found in the DOM.`); return; } // Clears any previous content (e.g. error messages) container.innerHTML = ''; const button = this.getGooglePaymentsClient().createButton({ onClick: this.onGooglePaymentButtonClicked.bind(this), allowedPaymentMethods: this.createBaseRequest().allowedPaymentMethods, }); container.appendChild(button); }, // Creates the base payment request object required by the Google Pay API. // @returns {Object} The Google Pay base request object. createBaseRequest() { return { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [{ type: 'CARD', parameters: { allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'], }, tokenizationSpecification: { type: 'PAYMENT_GATEWAY', parameters: { gateway: this.merchantConfig.HOST_CONFIG.gatewayId, gatewayMerchantId: this.merchantConfig.MERCH_IDENTIFIER, // These values should come from your secure config fetch }, }, }], }; }, // Handles the click event from the Google Pay button. onGooglePaymentButtonClicked() { const paymentDataRequest = { ...this.createBaseRequest(), transactionInfo: { countryCode: this.config.countryCode, currencyCode: this.config.currencyCode, totalPriceStatus: 'FINAL', totalPrice: '10.00', }, merchantInfo: { merchantId: this.merchantConfig.MERCH_IDENTIFIER, merchantName: this.merchantConfig.MERCHANT_NAME || 'Sample Merchant' }, // The callbackIntents must match the callbacks provided in // getGooglePaymentsClient(). We provided onPaymentAuthorized and // onPaymentDataChanged. To handle dynamic shipping, you would add // 'SHIPPING_ADDRESS' and 'SHIPPING_OPTION' and then build out the // logic in the onPaymentDataChanged callback. callbackIntents: ['PAYMENT_AUTHORIZATION'], }; console.log('Requesting payment data...', paymentDataRequest); this.getGooglePaymentsClient() .loadPaymentData(paymentDataRequest) .catch(err => console.error("loadPaymentData error:", err)); // Catches user cancellation or other errors. }, // Callback for when payment is successfully authorized by the user. // @param {Object} paymentData - The authorized payment data from Google, including // the token. // @returns {Promise

Inovio: your global payment gateway.

01Shopping cart plugin

02Server-side SDK

03Gateway API

International processing

3D Secure and fraud prevention

Recurring billing

Chargeback mitigation

Multi-layer security

Robust reporting

Payments

Payment security

3D Secure

Anti-fraud tools

Keep card data off your systems

Shopping carts

International processing

CRM integration

Recurring billing

Reporting

Global eCommerce gateway

Shopping cart plugins

Recurring billing

Risk mitigation and fraud prevention

Keep card data off your systems

Product catalog

Hosted checkout and hosted payment form

Virtual POS