Skip to main content

Google Pay Button

Introduction​

The Google Pay button is a web element that integrates Google Pay into your application if supported. The Google Pay button provides customization options, allowing you to modify the button's appearance, ensuring a professional and cohesive user experience during the payment process.

Step 1: Prepare the page​

Add the following script element to your page's html to include the Payment Elements SDK in your site:

<head>
  <script src="https://sandbox-cdn.pci.getfwd.com/sdk/forward.js"></script>

Your webpage also needs an element where it can be mounted. This is typically achieved by defining a <div> and assigning it a unique identifier. 

<div id="payment-button" />

Step 2: Check if Google Pay is supported​

Before creating the Google Pay button, you should check if Google Pay is supported on the current device and browser. You can do this by calling the isGooglePaySupported method from the window.Forward object.

// <script>
if (await window.Forward.isGooglePaySupported()) {
  // Google Pay is supported, proceed with creating the Google Pay button
} else {
  // Google Pay is not supported, handle accordingly
}

Step 3: Create a Google Pay button​

The Forward class can be accessed through the window object. To instantiate a Google Pay button, you can call the createGooglePayButton static class helper with the following:

  • apiKey: Your public key.
  • clientSecret: The client_secret of the payment intent.
  • googlePayMerchantId: The merchant ID provided by Google after registering for Google Pay.
// <script>
if (await window.Forward.isGooglePaySupported()) {
  const googlePayButton = await window.Forward.createGooglePayButton({
    apiKey: 'pk_123948342832',
    clientSecret: 'pi_123948342832_secret_123948342832',
    merchantId: '12345678901234567890',
  });

Step 4: Mount the Google Pay button​

After creating an instance of the Google Pay button, you can add it to the page by using the mount method.

Provide the element selector where you want the form to be placed as well as the following callbacks as arguments to the mount method:

  • onSuccess: This callback is invoked when the user successfully enters their payment details via Google Pay. The callback is provided with a token representing a PaymentMethod id, which can be utilized to process payments on your backend, and googlePayPayment info.
  • onError: This callback is invoked when an error occurs during payment info processing. The callback is provided with an error object containing information about the error.
  • onCancel: (optional) This callback is invoked when the user prematurely closes the Google Pay pop-up window.
info

Your onSuccess callback MUST return a Promise that sends the token to your server to process the payment. If the payment is successful, the Promise should be resolved. If the payment fails, the Promise should be rejected with an error message.

The mount method returns a function that you can use to remove the Google Pay button from the page.

// <script>
const unmountGooglePayButton = googlePayButton.mount('#payment-button', {
  onSuccess: async ({ token, googlePayPayment }) => {
    console.log(token);
    console.log(googlePayPayment);
    // Send token to your server to process payment
    // Resolve promise or throw error
  },
  onError: (error) => {
    console.log(error);
  },
  onCancel: () => {
    console.log('User closed Google Pay pop-up window');
  },
});

// Remove the Google Pay button from the page
unmountGooglePayButton();

Google Pay Payment Data Request​

You can customize the Google Pay payment data request by specifying googlePayPaymentDataRequest on mount.

googlePayPaymentDataRequest is an object that may contain any subset of the properties of a Google Pay PaymentDataRequest object.

// <script>
googlePayButton.mount('#payment-button', {
  onSuccess: async ({ token }) => { ... },
  onError: (error) => { ... },
  googlePayPaymentDataRequest: {
    transactionInfo: {
      countryCode: "US",
      currencyCode: "USD",
      totalPriceStatus: "FINAL",
      totalPrice: "100.00",
    },
  }
});

You may also subsequently update the Google Pay payment data request by calling the setGooglePayPaymentDataRequest method (prior to the user clicking the Google Pay button):

// <script>
googlePayButton.setGooglePayPaymentDataRequest({
  transactionInfo: {
    countryCode: "US",
    currencyCode: "USD",
    totalPriceStatus: "FINAL",
    totalPrice: "100.00",
  }
});

Appearance​

You may customize the Google Pay button appearance by specifying googlePayButtonOptions on mount.

See the Google Pay ButtonOptions documentation for more information.

export type GooglePayButtonOptions {
  buttonType?: 'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe';
  buttonColor?: 'default' | 'black' | 'white';
  buttonSizeMode?: 'static' | 'fill';
  buttonRootNode?: HTMLDocument | ShadowRoot;
  buttonLocale?: string;
}

Example of adjusting Google Pay button styling​

googlePayButton.mount('#payment-button', {
  onSuccess: async ({ token }) => { ... },
  onError: (error) => { ... },
  googlePayButtonOptions: {
    buttonColor: "white",
    buttonType: "checkout",
  },
});

Google Pay Payment​

The onSuccess callback is provided with both a token and a googlePayPayment object.

See the Google Pay PaymentData documentation for more information.