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 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();
}
Updated about 8 hours ago