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 will default to value 'TEST'. For more information see this Google Pay Documentationpage. |
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 Documentationhere. 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 registration with 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 tokenis 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();
}
Updated 5 days ago