Integration

To be able to render the Google Pay™ button on your website you need to follow the steps below.

  1. Inject the Buckaroo SDK

Buckaroo's ClientSide SDK works as a wrapper for Google's API. Inject the following script in your page:

<script src="https://checkout.buckaroo.nl/api/buckaroosdk/script" />
  1. Initialize the Google Pay Button

To initialize the Google Pay button you have to create a new GooglePayPayment object by passing the Options described below:

Field

Required

Description

Environment

Yes

Available values are 'PRODUCTION' or 'TEST'. If not provided will default to value 'TEST'.For more information see Google Pay Documentation.

AllowedCardNetworks

No

For now available brands are 'VISA' and 'Mastercard'. If not provided it will default to all available card brands.

AllowedCardAuthMethods

No

See Google Pay Documentation. If not provided it will default to all available values.

ButtonColor

No

See Google Pay Documentation. If not provided it will default to all available values.

ButtonType

No

See Google Pay Documentation. If not provided it will default to all available values.

ButtonRadius

No

See Google Pay Documentation. If not provided it will default to all available values.

ButtonLocale

No

See Google Pay Documentation. If not provided it will default to all available values.

ButtonContainerId

Yes

The ID of the HTML element you want append the button to. If not provided will default to the container id 'google-pay-button-container'.

TotalPriceStatus

Yes

The status of the total price used: ESTIMATED - Total price might adjust based on the details of the response, such as sales tax collected that's based on a billing address. FINAL - Total price doesn't change from the amount presented to the shopper. For more information see Google Pay Documentation.

TotalPrice

Yes

Total monetary value of the transaction with an optional decimal precision of two decimal places. For more information see Google Pay Documentation.

CurrencyCode

Yes

The ISO 4217 alphabetic currency code. For more information see Google Pay Documentation.

CountryCode

Yes

The ISO 3166-1 alpha-2 country code where the transaction is processed. Required for EEA countries. For more information see Google Pay Documentation.

MerchantName

Yes

Merchant name encoded as UTF-8. Merchant name is rendered in the payment sheet. For more information see Google Pay Documentation.

MerchantId

Yes

A Google merchant identifier issued after registrationwith the Google Pay & Wallet Console. The merchantID can have 12-18 characters. For more information see Google Pay Documentation.

MerchantOrigin

No

The fully qualified domain of the merchant who made the request.Ignore this if you are using the Direct Integration.

GatewayMerchantId

Yes

The Merchant unique ID provided by Buckaroo after the Onboarding.For more information see Google Pay Documentation.

OnGooglePayLoadError()

Yes

Callback function that is triggered when the Google PaymentsClients fails initializing or the Google Pay button cannot be added properly.

ProcessPayment()

Yes

Callback function that handles the processing of the Payment. Once the token is retrieved you can send it for further processing towards our Checkout as explained in the next point below.

ShippingAddressRequired

No

Set to true to request a full shipping address. For more information see Google Pay Documentation.

ShippingAddressParameters

No

If shippingAddressRequired is set to true, specify shipping address restrictions.For more information see Google Pay Documentation.

ShippingOptionRequired

No

Set to true when the SHIPPING_OPTION callback intent is used. This field is required if you implement support

for Authorize Payments or Dynamic Price Updates.For more information see Google Pay Documentation.

ShippingOptionParameters

No

Set default options. For more information see Google Pay Documentation.

Once you have created the GooglePayPayment object then you need to call the initiate() function. Below is a demo of initializing the Google Pay Button:

function initGooglePayButton() {
    const googlePayPayment = new BuckarooSdk.GooglePay.GooglePayPayment({
        environment: 'TEST',
        buttonRadius: 7,
        buttonSizeMode: 'fill',
        buttonContainerId: 'google-pay-button-container',
        totalPriceStatus: 'FINAL',
        totalPrice: '0.1',
        currencyCode: 'EUR',
        countryCode: 'NL',
        merchantName: 'Example Merchant',
        merchantId: '01234567890123456789',
        gatewayMerchantId: 'exampleGatewayMerchantId',
        onGooglePayLoadError: (error) => {
            console.error('Error loading GooglePay script:', error);
        },
        processPayment: (paymentData) => {
                // Process Payment Callback logic
        },
    });
    
    googlePayPayment.initiate();
}