Skip to main content

Creating a GooglePay component

You can enable this by calling addGooglePay():

window.addEventListener('load', function () {
  payfurl.init('sandbox', '<public key>')
    .addGooglePay('iframeContainer', '<amount>', '<3-letters currency code>', '<GooglePay Provider Id (optional)>', 'options (optional)');
});

options is an optional object that can contain the following properties:

  • gateway: Gateway Identifier
  • googlePayGatewayMerchantId: Gateway Merchant Id
  • googlePayMerchantId: Google Pay Merchant Id. For production you need to get Google Pay Merchant Id here
  • googlePayMerchantName: Google Pay Merchant Name. Name will display in Google Pay form
  • buttonOptions: Optional styling for the Google Pay button, forwarded to Google's createButton(). Any omitted property keeps Google's default. Supported keys:
    • buttonType: "buy" (default), "book", "checkout", "donate", "order", "pay", "plain", "subscribe"
    • buttonColor: "default", "black", "white"
    • buttonRadius: corner radius in pixels (e.g. 8)
    • buttonSizeMode: "static" (default) or "fill"
    • buttonLocale: locale / language code, e.g. "en" or "en-GB"

Customising the button​

To render a rounded Donate button (for example, on a donation form), pass buttonOptions:

window.addEventListener('load', function () {
  payfurl.init('sandbox', '<public key>')
    .addGooglePay('iframeContainer', '10.00', 'AUD', '<GooglePay Provider Id (optional)>', {
      buttonOptions: {
        buttonType: 'donate',
        buttonRadius: 8,
      },
    });
});

buttonSizeMode: "fill" caveat: with "fill", the button stretches to the width (and height) of its container element rather than sizing to its own content, so make sure iframeContainer has the width you want the button to occupy.