Integration

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

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" />

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 it will default to 'TEST'. For more information see Google Pay Documentation page.
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 here. 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 to append the button to. If not provided it 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 (e.g., sales tax). 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 registration with the Google Pay & Wallet Console. The merchant ID 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 onboarding. For more information see Google Pay Documentation.
OnGooglePayLoadError()	Yes	Callback function that is triggered when the Google PaymentsClient fails to initialize 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();
}