Your merchants can accept payments through Google Pay™ using the Clover iframe integrations on their ecommerce websites.

Prerequisites

• Follow the Google Pay Web Brand Guidelines for all Google Pay assets and button designs.
• Agree to the Google Pay API Terms of Service to use Google Pay integrations.

Add a button for Google Pay transactions

1. On the Clover iframe, use the paymentRequestButton element to add a button for Google Pay transactions.
   Note: When creating a new paymentRequestButton, the payment amount (in cents) is required.
2. Use specific size properties for the Google Pay payment button:

• Default width: 90px (min-width: 90px;)
• Default height: 40px (min-height: 40px;)
• Values formax-width and max-height are set by the width and height of the <div> container you use for mounting the paymentRequestButton (<div id="payment-request-button"></div>).

// Sample payment amount
const paymentReqData = {
  total: {
    label: 'Demo total',
    amount: 1099,
  },
  // Default buttonType is 'long' for button with card brand & last 4 digits
  options: {
    button: {
      buttonType: 'short' // For button without additional text
    }
  }
};

// Create paymentRequestButton & mount to <div> container
const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
  paymentReqData
 });

paymentRequestButton.mount('#payment-request-button');

// Handle validation errors after tokenization
paymentRequestButton.addEventListener('paymentMethod', function(tokenData) {
  console.log(tokenData);
});

When you click GPay, a new window displays for the Google Pay flow. The size of the button is rendered based on the width and height of the payment-request-button element.