PortWallet is now PortPos

 Back to top

Google Payâ„¢ Documentation

Introduction

Google Payâ„¢ is a digital card wallet provided by Google. It enables your customer to checkout faster and more simply.

This guide covers the PortPos web redirection flow for Google Pay. Android-specific implementation resources are not applicable to this integration method.

Prerequisites

To start accepting Google Pay on your checkout page, you must sign up with Google and obtain your Google Pay Merchant ID.

  1. 1. To get started, please visit Google Pay's Web Integration Overview.
  2. 2. You need to complete Google Pay's Web Integration Checklist.
  3. 3. You should follow Google Pay's Web Brand Guidelines.
  4. 4. You need to request Production Access.

  5. For PortPos enablement, please contact [email protected] with your Google Pay Merchant ID and merchant details.

Integration Models

PortPos supports two Google Pay integration models.

1. Direct Google Pay Integration

Direct Integration = Merchant handles Google Pay button rendering, token collection, and token submission to PortPos.

In the direct integration model, merchants implement the Google Pay button on their own checkout page, receive the Google Pay payment token from Google, and submit the token to the PortPos Google Pay payment endpoint for payment processing.

This option is suitable for merchants who require a fully customized checkout experience.

2. Hosted Checkout Integration

Hosted Checkout = PortPos handles Google Pay button rendering, Google Pay SDK integration, and payment processing on the PortPos payment page.

In the hosted checkout integration model, merchants generate a PortPos invoice and redirect customers to the PortPos hosted payment page.

If Google Pay is enabled for the merchant account, PortPos automatically displays the Google Pay button on the hosted payment page and manages the Google Pay payment flow.

Merchants are not required to implement the Google Pay JavaScript SDK or manage Google Pay payment tokens in this integration model.

Google Pay Configuration

For integrating with Google Pay, refer to the Google Pay Web Tutorial.

The following PaymentDataRequest parameters must be submitted to Google Pay. Refer to Google Pay API Request Objects.

Payment Object Parameter Description
allowedAuthMethods Supported values: ["PAN_ONLY", "CRYPTOGRAM_3DS"]
allowedCardNetworks Card brands that you have agreed with PortPos to process. Currently supported: ["MASTERCARD", "VISA"]
paymentDataRequest.merchantInfo.merchantId Merchant ID received from Google Pay after approval
paymentDataRequest.merchantInfo.merchantName Your merchant name as shown to the customer
paymentDataRequest.transactionInfo.currencyCode Payment currency supported by PortPos
paymentDataRequest.transactionInfo.totalPrice Final payment amount
tokenizationSpecification.parameters.gateway The exact Google Pay gateway string provided by PortPos for your integration
tokenizationSpecification.parameters.gatewayMerchantId Your unique PortPos Google Pay merchant identifier provided by PortPos. Do not use the invoice ID for this field.
billingAddressRequired Optional. Set to true only if a billing address is required to process the transaction.
billingAddressParameters Optional. Defines the billing address fields returned when billingAddressRequired is true.

Billing address should only be requested if it is required to process the transaction. Additional data requests can increase friction in the checkout flow.

parameters: {
    allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
    allowedCardNetworks: ['VISA', 'MASTERCARD'],
    billingAddressRequired: true,
    billingAddressParameters: {
        format: 'FULL',
        phoneNumberRequired: true
    }
}

After the payment sheet is completed, Google Pay returns the PaymentData response object .

Merchants can use the returned payment data in either the Direct Google Pay Integration flow or the Hosted Checkout Integration flow supported by PortPos.

Direct Google Pay Integration

In the direct integration model, the merchant implements the Google Pay button on their own checkout page, receives the Google Pay payment token from Google, and submits the token to the PortPos Google Pay payment endpoint for payment processing.

Direct Integration Flow

  1. 1. Merchant renders the Google Pay button on their checkout page.
  2. 2. Customer selects Google Pay and authorizes the payment.
  3. 3. Google Pay returns a payment token to the merchant application.
  4. 4. Merchant submits the Google Pay token to the PortPos Google Pay payment endpoint.
  5. 5. PortPos processes the payment, performs required downstream authentication and authorization checks, and completes the transaction.
  6. 6. Customer is redirected back to the merchant return URL after payment processing.

The following example demonstrates a basic Google Pay direct integration flow using the PortPos Google Pay payment endpoint.

Use the Google Pay TEST environment during development and switch to PRODUCTION after Google Pay production approval. 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PortPos Google Pay Direct Integration</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 40px;
        }

        .container {
            max-width: 700px;
            margin: auto;
            background: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin-bottom: 30px;
        }

        #google-pay-button {
            margin-top: 20px;
        }
    </style>

</head>

<body>

    <div class="container">

        <h1>Google Pay Direct Integration Demo</h1>

        <div id="google-pay-button"></div>

    </div>

    <script async
        src="https://pay.google.com/gp/p/js/pay.js"
        onload="initializeGooglePay()">
    </script>

    <script>

        let paymentsClient;

        const baseCardPaymentMethod = {
            type: 'CARD',
            parameters: {
                allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                allowedCardNetworks: ['VISA', 'MASTERCARD'],
                billingAddressRequired: true,
                billingAddressParameters: {
                    format: 'FULL',
                    phoneNumberRequired: true
                }
            }
        };

        const cardPaymentMethod = {
            ...baseCardPaymentMethod,
            tokenizationSpecification: {
                type: 'PAYMENT_GATEWAY',
                parameters: {
                    gateway: 'YOUR_PORTPOS_GATEWAY_CODE',
                    gatewayMerchantId: 'YOUR_PORTPOS_GOOGLEPAY_MERCHANT_ID'
                }
            }
        };

        const paymentDataRequest = {
            apiVersion: 2,
            apiVersionMinor: 0,

            allowedPaymentMethods: [cardPaymentMethod],

            merchantInfo: {
                merchantId: 'YOUR_GOOGLE_PAY_MERCHANT_ID',
                merchantName: 'YOUR_MERCHANT_NAME'
            },

            transactionInfo: {
                totalPriceStatus: 'FINAL',
                totalPrice: '100.00',
                currencyCode: 'BDT',
                countryCode: 'BD'
            }
        };

        function initializeGooglePay() {

            paymentsClient = new google.payments.api.PaymentsClient({
                environment: 'TEST'
            });

            paymentsClient.isReadyToPay({
                apiVersion: 2,
                apiVersionMinor: 0,
                allowedPaymentMethods: [baseCardPaymentMethod]
            })
            .then(function(response) {

                if (response.result) {
                    createGooglePayButton();
                }

            })
            .catch(function(error) {
                console.error('isReadyToPay error:', error);
            });
        }

        function createGooglePayButton() {

            const button = paymentsClient.createButton({
                onClick: onGooglePayButtonClicked,
                buttonType: 'pay',
                buttonColor: 'default',
                buttonLocale: 'en'
            });

            document
                .getElementById('google-pay-button')
                .appendChild(button);
        }

        function onGooglePayButtonClicked() {

            paymentsClient.loadPaymentData(paymentDataRequest)
                .then(function(paymentData) {

                    processPayment(paymentData);

                })
                .catch(function(error) {

                    console.error('loadPaymentData error:', error);

                });
        }

        function processPayment(paymentData) {

            const googlePayToken =
                paymentData.paymentMethodData.tokenizationData.token;

            /*
             * In production environments,
             * merchants should send the Google Pay token
             * to their backend server first.
             *
             * The backend server should then securely submit
             * the payment request to the PortPos payment endpoint.
             */

            const form = document.createElement('form');

            form.method = 'POST';

            form.action =
                'https://payment.portpos.com/v2/payments/googlepay';

            const input = document.createElement('input');

            input.type = 'hidden';

            input.name = 'paymentData';

            input.value = googlePayToken;

            form.appendChild(input);

            document.body.appendChild(form);

            form.submit();
        }

    </script>

</body>

</html>
Important: In production environments, merchants should submit the Google Pay token to their backend server first. The backend server should securely communicate with the PortPos payment endpoint.

Required Placeholder Values

Placeholder Description
YOUR_GOOGLE_PAY_MERCHANT_ID Your Google Pay Merchant ID issued by Google.
YOUR_MERCHANT_NAME Your merchant name displayed in the Google Pay payment sheet.
YOUR_PORTPOS_GATEWAY_CODE The Google Pay gateway identifier provided by PortPos.
YOUR_PORTPOS_GOOGLEPAY_MERCHANT_ID Your PortPos Google Pay gateway merchant identifier provided by PortPos.

Token Submission

Merchants must capture the Google Pay payment token from: 

paymentData.paymentMethodData.tokenizationData.token

The token must then be submitted to the PortPos Google Pay payment endpoint for payment processing.

PortPos processes the payment, performs the required authentication and authorization checks, and redirects the customer back to the merchant return URL after processing is completed.

Hosted Checkout Integration

In the hosted checkout integration model, merchants generate a PortPos invoice and redirect customers to the PortPos hosted payment page.

After Google Pay is enabled for the merchant account, PortPos automatically displays the Google Pay button on the hosted payment page for eligible customers.

PortPos manages:

  • Google Pay button rendering
  • Google Pay SDK integration
  • Payment token collection
  • Authentication and authorization processing
  • Customer redirection after payment completion

Merchants are not required to implement Google Pay frontend code or manage Google Pay payment tokens in this integration model.

Hosted Checkout Flow

  1. 1. Merchant generates a PortPos invoice.
  2. 2. Merchant redirects the customer to the PortPos hosted payment page.
  3. 3. Customer selects Google Pay on the PortPos payment page.
  4. 4. PortPos processes the Google Pay transaction.
  5. 5. Customer is redirected back to the merchant return URL.

To enable Google Pay for hosted checkout integration, please contact [email protected] with the following information:

  1. 1. Google Pay Merchant ID
  2. 2. Merchant name and website URL
  3. 3. PortPos merchant details
  4. 4. Confirmation that Google Pay should be enabled for hosted checkout

Response

After payment processing is completed, the customer is redirected back to the merchant return URL with the transaction result.

Merchants should validate the transaction using the PortPos IPN validation API before confirming the order status.

https://MERCHANT_RETURN_URL?status=ACCEPTED&invoice=86925848ED074D85&amount=100&transaction_amount=100¤cy=BDT&approval_code=585358&reference=77190&source_type=googlepay

IPN Validate Response: Source type will be googlepay under source > brand > type.

{
    "result": "success",
    "data": {
        "invoice_id": "86925848ED074D85",
        "reference": "77190",
        "order": {
            "amount": "100.00",
            "currency": "BDT",
            "type": "purchase",
            "has_emi": 0,
            "discount_availed": 0,
            "redirect_url": "https://myaccount.portpos.com/thankyou",
            "created_at": "Tue, 25 Nov 2025 16:27:26 +0600",
            "status": "ACCEPTED",
            "is_recurring_payment": 0
        },
        "product": {
            "name": "Order #77190, Dev test",
            "description": "Logitech K120 USB Keyboard With Bangla"
        },
        "billing": {
            "customer": {
                "name": "Dev test",
                "email": "[email protected]",
                "phone": "8801711122211",
                "address": {
                    "street": "dev test",
                    "city": "Dhaka",
                    "state": "Dhaka",
                    "zipcode": "1000",
                    "country": "Bangladesh"
                }
            },
            "payer": {
                "name": null,
                "account": "401288xxxxxx1881",
                "ip_address": "103.70.231.87",
                "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36"
            },
            "gateway": {
                "category": "card",
                "network": "visa",
                "status": "APPROVED",
                "approval_code": "585358",
                "reason": "3ds: AUTHENTICATION_SUCCESSFUL, response: APPROVED recommendation: NO_ACTION"
            },
            "source": {
                "category": "card",
                "number": "401288xxxxxx1881",
                "brand": {
                    "name": "VISA",
                    "type": "googlepay",
                    "category": null
                },
                "issuer": {
                    "name": "Brac bank ltd.",
                    "phone": null,
                    "website": null,
                    "country": {
                        "name": "Bangladesh",
                        "iso2": "BD",
                        "iso3": "BGD"
                    }
                }
            }
        },
        "shipping": {
            "customer": {
                "name": "Dev test",
                "email": "[email protected]",
                "phone": "8801711122211",
                "address": {
                    "street": "dev test",
                    "city": "Dhaka",
                    "state": "Dhaka",
                    "zipcode": "1000",
                    "country": "Bangladesh"
                }
            }
        },
        "transactions": [
            {
                "amount": "100.00",
                "currency": "BDT",
                "status": "ACCEPTED",
                "type": "purchase",
                "time": "Tue, 25 Nov 2025 16:27:36 +0600"
            },
            {
                "amount": "-3.20",
                "currency": "BDT",
                "status": "ACCEPTED",
                "type": "fee",
                "time": "Tue, 25 Nov 2025 16:27:36 +0600"
            }
        ]
    }
}

3D Secure (3DS) Authentication

PortPos applies 3D Secure (3DS) authentication during Google Pay payment processing to enhance transaction security and reduce fraud risk.

  1. 1. CRYPTOGRAM_3DS transactions are device-authenticated by Google Pay and typically do not require additional step-up authentication.
  2. 2. PAN_ONLY transactions may require additional 3DS authentication depending on issuer requirements, regulatory rules, or transaction risk assessment.
  3. 3. PortPos handles all authentication and authorization flows automatically within the payment process.
  4. 4. No additional 3DS implementation or configuration is required from the merchant side.