Google Pay Integration

Google Pay Integration Guide

Welcome to our Google Pay integration guide! This document will walk you through adding Google Pay as a payment option in your application, making checkout faster and more convenient for your customers.

What You'll Need

Before we begin, please ensure you have:

  • Your API credentials from our payment platform
  • An SSL certificate enabled on your domain (this is required for Google Pay to work in production)

Getting Started with Google Pay

Step 1: Register with Google Pay

To accept Google Pay payments, you'll need to set up your merchant account with Google:

  1. Create your merchant account: Visit the Google Pay & Wallet Console and complete your registration
  2. Review the Google Pay documentation: We recommend familiarising yourself with these key resources:

Frontend Integration

Step 1: Add the Google Pay Script

First, include the Google Pay JavaScript library in your Next.js application:

Step 2: Build Your Checkout Component

Create a checkout page that displays the Google Pay button and handles the payment flow:

Step 3: Configure Your Environment Variables

Create a .env.local file in your project root and add these configuration values:

Understanding Your Configuration:

  • GOOGLE_PAY_ENV: Controls whether you're in test mode ("TEST") or processing real payments ("PRODUCTION")
  • CYBERSOURCE_GATEWAY_MERCHANT_ID: This unique identifier connects Google Pay to our payment processing system - we'll provide this when you sign up
  • GOOGLE_PAY_MERCHANT_ID: Your merchant ID from Google (optional during testing, required for production)
  • GOOGLE_PAY_MERCHANT_NAME: The name your customers will see when they're making a payment

What Happens Next?

When you run this code, here's what your customers will experience:

  1. They see your checkout page with the amount and a Google Pay button
  2. They click the Google Pay button and their payment sheet opens
  3. They select a payment method from their saved cards or add a new one
  4. They authorise the payment using their device authentication (fingerprint, PIN, etc.)
  5. Your onPaymentAuthorized function receives the encrypted payment data ready to be processed by your backend

The payment data includes everything you need to complete the transaction:

  • Encrypted payment credentials
  • Billing address (if requested)
  • Customer email (if requested)
  • Transaction details

Testing Your Integration

While in TEST mode, you can use Google's test cards to simulate different payment scenarios. Visit the Google Pay test card suite for a complete list of test cards and expected behaviours.

Processing Payments with Our API

Once you receive the payment token from Google Pay, you'll need to process it through our OneStep Payment endpoint. Here's how to handle the payment data:

Step 1: Encode the Payment Token

When Google Pay returns the payment data in your onPaymentAuthorized callback, you'll need to encode the entire payment data object as base64:

Step 2: Submit to OneStep Payment Endpoint

Update your onPaymentAuthorized function to process the payment:

Important Notes

  • Amount Format: Our API expects amounts in 3 decimal precision (multiply by 1000). For example, $10.00 becomes "10000"
  • Base64 Encoding: The entire Google Pay paymentData object must be base64 encoded and sent in GooglePayDataToken
  • Transaction ID: Generate a unique MerchantTxnID for each transaction for tracking purposes
  • Optional Fields: Billing address and customer email are included automatically if provided by Google Pay

Expected Response

Our OneStep Payment API will return a response like this:

A ResponseCode of "1000" indicates a successful payment.

Ready for Production?

Once you've tested your integration and are ready to accept real payments:

  1. Switch to production mode by setting NEXT_PUBLIC_GOOGLE_PAY_ENV=PRODUCTION
  2. Update your merchant ID with your production Google Pay merchant ID
  3. Complete your Google Pay merchant verification in the Google Pay & Wallet Console
  4. Implement the backend payment processing using the payment data from the onPaymentAuthorized callback

Going to Production

When you're ready to accept real Google Pay payments, you'll need to complete Google's production approval process. This ensures your integration meets Google's standards and provides a great customer experience.

Production Approval Process

Important: This process is required for all PRODUCTION environments and typically takes 1-5 business days for Google to review.

Step 1: Access Your Business Console

Visit Google Pay & Wallet Console and log in with your business account.

Step 2: Complete Your Business Profile

Navigate to Business Profile and ensure all required information is filled out completely, including:

  • Business name and address
  • Contact information
  • Business registration details
  • Banking information for settlements

Step 3: Add Your Website for Production

  1. Go to Google Pay API section
  2. Scroll to Integrate with your website section

  3. Click Add website
     

  4. Enter your website URL where Google Pay will be integrated 
     

  5. For Google Pay API Integration type, choose Gateway 
     

 

Step 4: Provide Integration Screenshots

Upload screenshots of your complete buy flow showing:

  • Your checkout page with the Google Pay button
  • The Google Pay payment sheet in action
  • Order confirmation/success page
  • Any other relevant steps in your payment process

Step 5: Submit for Review

Click Submit for approval and wait for Google Pay team's response. You'll receive updates via email about your application status.

Expected Timeline: 1-5 business days for Google's review and approval.

Production Checklist

Before submitting for production approval, ensure:

  •  Your website uses HTTPS (SSL certificate required)
  • Google Pay button follows brand guidelines
  • Integration has been thoroughly tested in TEST mode
  • Business profile is complete and accurate
  • Payment flow works smoothly from start to finish
  • Error handling is implemented for declined transactions
  • Customer support processes are in place

After Approval

Once Google approves your production integration:

  1. Update your environment variables:
  1. Use your production merchant ID provided by Google
  2. Monitor your integration for the first few transactions to ensure everything works correctly

Need Help?

If you run into any issues during integration:

  • Check the browser console for error messages
  • Ensure your SSL certificate is properly configured
  • Verify all environment variables are set correctly
  • Review Google's troubleshooting guide

For questions specific to our payment platform, please contact our support team.

 

Powered by