Google Pay Registration

Google Pay is a fast, easy, and secure way to pay that’s used by over 150 million users worldwide. Google Pay replaces the need for your customers to take a physical card or type in personal information during the sales process.

Google Pay functionality is built into our existing platform and requires little-to-no development work, with two easy integration options:

These options include everything you need to directly implement the Google Pay solution into a checkout flow for a fully customizable customer experience.

Note: Cardholders must set up their Google Pay mobile wallet to use Google Pay. See Google’s recommended steps to set up a Google Pay mobile wallet.

Compatible browsers and devices

Google Pay is compatible with the latest versions of the following browsers:

Google Chrome
Mozilla Firefox
Apple Safari
Microsoft Edge
Opera
UCWeb UC Browser

The Google Pay mobile wallet also has the following minimum Android device requirements:

Android 7.0 (Nougat) or higher.
Near Field Communication (NFC) support.
Host Card Emulation (HCE) support.

Note: Cardholders must add a credit or debit card payment method to their Google Pay mobile wallet before being able to use Google Pay. See Google’s recommended steps to add a debit or credit card to a Google Pay mobile wallet.

Google Pay Registration

To accept Google Pay you must complete the registration process.

You can enable your Merchants to accept Google Pay by simply going into the Portal and visiting the Settings page.

To complete Google Pay registration, follow the steps below:

Click here to see all Google Pay Registration steps.

Step 1: Navigate to Settings from the main Dashboard, under the Admin category. Then, click Payment Methods.

Step 2: On the Payment Methods page, click the GOOGLE PAY - REGISTER ALL button under the Google Pay section.

Step 3: In the “Are you sure you want to register all merchants of this division with Google Pay” lightbox, click YES and OK to complete the registration.

Setup PayFrames for Google Pay

Enabling Google Pay will automatically display within the PayFrame with very little integration work. After the initial Google enablement process is completed, add the JavaScript snippet below to your site package:

HTML

<script src="https://pay.google.com/gp/p/js/pay.js"></script>

This will display the Google Pay button in your Payframe, allowing cardholders to select Google Pay as a payment option.

PayFrames can be created in the Portal or by using the API.

For additional guidance, set up your PayFrame inside the sandbox view so you can preview how to embed the button inside the frame.

To test, use this code snippet to create a test PayFrame:

Click here to see the test PayFrame JavaScript code for HTML.

Example PayFrame Script Code Example

HTML

<script type="text/javascript" src="https://test-api.{domain}.com/payFrameScript"></script> 
<script> 
 PayFrame.config.apiKey = "5e4ff3fc24164731f64541d0e429ec56"; 
 PayFrame.config.merchant = "t1_mer_607d0c408cded2c12874f12"; 
 PayFrame.config.hideBillingAddress = false; 
 PayFrame.config.amount = 100; 
 PayFrame.config.color = "c351e8"; 
 PayFrame.config.mode = "txn"; 
</script>

Setup PayFields for Google Pay

For clients using PayFields, there is a simple and easy solution to add the Google Pay payment option to your existing checkout flow.

PayFields can be created by using the API.

PayFields will allow your customers to select to input their card information or utilize Google Pay at the point of sale.

Click here for PayFields Google Pay setup steps.

Step 1: Register for Google Pay using the Google Pay Registration steps above.

Step 2: Create a new PayField.

Step 3: Add the Google Pay JavaScript:

JS

  <script src="https://pay.google.com/gp/p/js/pay.js"></script>

Step 4: Add the following <div> where the Google Pay button will be shown.

HTML

<div id="googlePayButton"></div>

Step 5: Add the following required PayFields JavaScript (and any additional customizations):

HTML

<script>
const initPayFields = () => {
        if (PayFields) {
            PayFields.config.apiKey = '<APIKEY here>';
            PayFields.config.merchant = '<merchant ID here >';
            PayFields.config.amount = 1;
            PayFields.config.txnType = 'auth';
</script>

Step 6: (Optional) Add the following PayFields JavaScript to the code above to enable sandbox testing:

CODE

PayFields.config.googlePay.environment = 'TEST';

Step 7: (Optional) Add custom stylization to the Google Pay button look & feel (example):

HTML

<script>
const googlePayButton = document.getElementById('container');
const button = googlePayClient.createButton({
  buttonColor: 'default',
  buttonType: 'plain',
  onClick: () => {},
  allowedPaymentMethods: []
container.appendChild(button);
</script>

Google Pay - Example PayField with Google Pay.

CODE

<!-- Google Pay Div -->
<div id="googlePayButton"></div>
<hr>
<div id="name"></div>
<div id="address"></div>
<div id="ccnumber"></div>
<div id="ccexp"></div>
<div id="cvv"></div>

<!-- jQuery for some additional PayField functionality -->
<script
  src="https://code.jquery.com/jquery-3.6.3.min.js"
  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
  crossorigin="anonymous">
</script>

<!-- Include the Google Pay Script -->
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<!-- Be mindful of the domain, sandbox and prod will have different naming conventions-->
<script type="text/javascript" src="https://test-api.payrix.com/payFieldsScript"></script>

<script>
  const initPayFields = () => {
    if (PayFields) {
      PayFields.config.apiKey = '<APIKEY here>';
      PayFields.config.merchant = '<merchant ID here >';
  
      // Must be set
      PayFields.config.amount = 1;
      // Must be set
      PayFields.config.txnType = 'auth';
  
      // ============================================
      // Critical Step
      // Sets the environment to a sandbox environment
      PayFields.config.googlePay.environment = 'TEST';
      // End Critical Step
      // ============================================
  
      PayFields.fields = [
        {
          type: 'number',
          element: '#ccnumber'
        },
        {
          type: 'cvv',
          element: '#cvv'
        },
        {
          type: 'expiration',
          element: '#ccexp'
        },
        {
          type: 'name',
          element: '#name',
          values: { name: 'John Wayne' }
        },
        {
          type: 'address',
          element: '#address',
          values: {
            email: 'one@two.com',
            city: 'New York'
          }
        }
      ];
      PayFields.customizations = {
        placeholders: {
          '#expiration': '00/00',
          '#payment_cvv': '000',
          '#payment_number': '0000 0000 0000 0000'
        }
      };
      PayFields.onValidationFailure = () => {
        //...          
      };
      PayFields.onFailure = (response) => {
        //...
      };
      PayFields.onSuccess = (response) => {
        console.log(response);
      };
    } else {
      throw Error('There no PayFields property in the window object.');
    }
  }

  // Call function and execute all logic
  initPayFields()
</script>

Additional Resources

Google Pay - Frequently Asked Questions

What is Google Pay™?

Google Pay is Google’s digital payment service located in the Google Pay app on your mobile device. It allows users to make contactless point of sale payments or web purchases after adding your debit/credit card.

What devices can I use with Google Pay?

A compatible Android™ device with KitKat 4.4 or higher. The Google Pay app is preloaded on select devices. You can download the app in the Google Play™ store.

Does Google Pay work online and in-store?

Yes. Google Pay will work as a contactless payment solution in-store using a Google Pay-enabled device, as well as in an eCommerce environment utilizing the Google Device verification and authentication feature.

Is Google Pay secure?

Google Pay is secure. When you make payments, Google Pay never uses your actual card number but rather uses a virtual account number so your card details and private information are safe. Google Pay keeps your payment information encrypted on secure servers, so your full details are never stored on your phone or shared with merchants when you buy something because they see your virtual account number instead. When you set up Google Pay, you will have to set a screen lock if you don’t already have one. We recommend making sure Google Device Manager is on, which you can use if your phone is lost or stolen.

How is my card information secured within Google Pay?

You have to unlock your phone by either entering your PIN code or your fingerprint to use Google Pay. Once you’ve added your card Google Pay, a unique encrypted number is created, assigned, encrypted and stored on your phone. The data is protected on multiple layers that include encryption technology and Transport Layer Security. When you use Google Pay, your unique encrypted card number is used instead of your actual debit card number, so your debit card number is then never seen by a merchant as it is when swiping your card.

Do you charge any fees to use Google Pay?

There is no additional charge to offer or use Google Pa, but it does require an active data plan to work and your data plan may apply additional message and data charges.

Will it work on my iPhone or Safari browser?

Google Pay is compatible with Safari browsers but is not compatible with your iPhone.

Where can I learn more about Google Pay?

https://pay.google.com/about

Google Pay - Card Not Present and Card Present Compatibility Information

Card Not Present (CNP)

Google Pay is available in an Ecommerce environment as an additional payment option in the checkout flow. Google Pay is easily integrated into the current payment solutions to provide a fast and easy way to use the product. You can take advantage of Google Pay in the PayFrame and PayField solution using the steps below. by adding the Java Script to your current solution.

Card Present (CP)

Google Pay is an innovative way to remove friction from the retail checkout process, creating a fast, secure way for your customers to make payments in-store. It improves security by utilizing biometric cardholder authentication and removing the need to input card data.

Terminal Compatibility

Google Pay is available in all Terminals with NFC support and will be processed as a contactless payment.

Google Pay - Setup Example Videos

PayFrame

PayFields

Google Pay - PayFrame Example Screenshot