Click to Pay

Offer your webshop customers a faster and easier credit card payment experience with Click to Pay. With just one click, your customers can check out without having to enter their card details every time. This helps boost conversion rates and reduces cart abandonment. As a Buckaroo merchant, you can integrate this Visa solution directly into your checkout for free. Click to Pay currently supports payments with Visa and Mastercard.

Key benefits

• Higher transaction success rates: customers don’t need to enter their 16-digit card number or security code manually
• Reduced fraud risk compared to regular credit card payments

Implementation & activation

Click to Pay can be integrated via the Buckaroo plugins, SDKs or APIs. Payouts are handled in the same way as your regular credit card transactions.

• SDK: The main method of integration.
• Activation: Requires an active Click to Pay subscription and registered Token API credentials (Client ID and Secret) from Buckaroo.
• Payouts: Payouts work similarly to other Visa and Mastercard payment methods acquired by Buckaroo.

To get started, simply include the following script tag on your checkout page:

<script src="https://checkout.buckaroo.nl/api/buckaroosdk/script" />

Integration

The Click to Pay process is made up of the following key steps. Configure the CaptureContextOptions with:

• Your Merchant Identifier (GUID)
• Whitelisted domains
• Currency
• Country
• Locale
• Order information
• A callback for handling the payment once the user approves
• Create a CaptureContext instance using the configured options.
• Send the data (e.g. transientToken and identifier) to Buckaroo via server-to-server call to complete the payment. The Click to Pay button and experience is rendered via the SDK, which handles authentication and secure token generation.

Explanation of available fields:

Required steps and prerequisites

To integrate Click to Pay successfully, there are a few required steps and configurations to complete:

Register an application in Buckaroo Plaza.

• Log in to Buckaroo Plaza
• Go to Settings > Token Registration
• Click _Register New Application _(top-right)
• In the modal:
  • Enter a name for your application
  • Select the scope: clicktopay - save
  • Click Save

You will receive a Client ID and Client Secret which you will use in your frontend code to initialize the Click to Pay session.

Step-by-step tutorial and code example

Here's a sample integration in plain JavaScript:

const buttonWrapperId = "#clicktopay-button-wrapper";
const paymentScreenId = "#clicktopay-payment-screen";

if ($(buttonWrapperId).length) {
  var orderInformation = {
       currency: "EUR",  // order currency (ISO 4217)
       totalAmount: "0.01"  // total payment amount
  };

  const clickToPayOptions = new BuckarooSdk.ClickToPay.CaptureContextOptions(
    "your-merchant-identifier", // GUID
    ["https://your-domain.com"], // Your domains
    "NL", // Country code
    "en_US", // Language + country
    orderInformation,
    processCallback // Callback function to handle payment data  );

  const captureContext = new BuckarooSdk.ClickToPay.CaptureContext(
    buttonWrapperId,
    paymentScreenId,
    clickToPayOptions
  );

  var clientId = "your-client-id";
  var clientSecret = "your-client-secret";

  captureContext.generateAndLoadCaptureContext(clientId, clientSecret);
}

function processCallback(clickToPayData) {
     // const transientToken = clickToPayData.transientToken;
     // const identifier = clickToPayData.identifier;

      return Promise.resolve();  //Replace with your server-side call by sending these data to Buckaroo
}