Client SDK

      Client SDK

        Article summary

        This SDK can be used with Payconiq, Paypal, Bancontact and iDeal.

        After you initiated a server side Pay request you can initiate the payment on the client side. You will need to initiate the Client SDK with two (three with iDeal) parameters:

        1. Container selector (string): Use the query selector format for selecting a DOM element.

        2. Transaction key (string): Insert the transaction key from the server side Pay response. You can find the value in the “Key” field of the JSON response.

        3. (For iDeal) Processing (boolean): Is your iDeal subscription processing? Insert true, or false.

        When initiated the Client SDK will render a minimal “widget” inside the container element of your choice. The script will render a QR code and listen for status updates. In case the consumer is using a mobile device the script will redirect the consumer directly to the corresponding app (Payconiq, Bancontact, etc.) to complete the payment.

        After the payment is completed, cancelled or failed the consumer will be redirected (by the SDK) to the ReturnUrl.

        Include the ClientSDK like this in the bottom of the BODY element of your page. Like this:

        <script src=""></script>

        The Bancontact widget is available in multiple languages (English, French, and Dutch). To show the correct language, the source in the script tag should be called with the language code ("en" for English, "fr" for French, and "nl" for Dutch), like this:

        <script src=""></script>

        The default language is Dutch.


        The only dependency of the Buckaroo Client SDK is jQuery 1.9+


        Payconiq script example

            function() { 
                BuckarooSdk.Payconiq.initiate("#payconiqQr", "94EDDFBCFF774714AEDE0F9346XXXX"); 

        Bancontact script example

            function() { 
                BuckarooSdk.BancontactMobile.initiate("#bancontactMobileButton", "94EDDFBCFF774714AEDE0F9346XXXX"); 

        iDeal script example

            function() { 
                BuckarooSdk.IdealQr.initiate("#idealQrButton", "94EDDFBCFF774714AEDE0F9346XXXX", false); 

        PayPal Express Checkout

        It is possible to run the PayPal Express Checkout on your own product page or shopping basket. This is only possible if you are onboarded via the Plaza via, and on one-off transactions.

        To do this, run below script on your page with the PayPalOptions parameter.

        The PayPalOptions object:

        • ContainerSelector string - Renders the buttons in the defined container selector.

        • buckarooWebsiteKey string - Your Buckaroo Websitekey.

        • PayPalMerchantId string - Your PayPal merchant ID

        • Currency string - Transaction currency

        • Amount number- Transaction amount

        • createPaymentHandler function(data) : Promise - Callback function should return a Promise which should create a PayPal transaction, with service parameter "PayPalOrderId". See Function is invoked with PayPal data object, see

        • (optional) onShippingChangeHandler function(data, actions) : Promise - Callback function used to adjust the shipping amount based on the selected address. See

        • (optional) OnSuccessCallback function - Callback function used to override the default behavior of redirecting the user to the ReturnURL.

        • (optional) OnErrorCallback function(reason) - Callback function used to override the default behavior of redirecting the user to the ReturnURLReject.

        • (optional) OnCancelCallback function - Callback function used to override the default behavior of redirecting the user to the ReturnURLCancel.

        • (optional) onInitCallback function - Callback function which is invoked after the PayPal button has been rendered

        • (optional) onClickCallback function - Callback function which is invoked after the PayPal button has been clicked

        $(document).ready(function() { 
            let PayPalOptions = {
              containerSelector: "#paypal-container",
              buckarooWebsiteKey: "{{your_websitekey}}",
              paypalMerchantId: "{{your_PayPalMerchantId}}",
              currency: "EUR",
              amount: 0.01,
              createPaymentHandler: createPaymentHandler,
              onShippingChangeHandler: onShippingChangeHandler,
              onSuccessCallback: onSuccessCallback,
              onErrorCallback: onErrorCallback,
              onCancelCallback: onCancelCallback,
              onInitCallback: onInitCallback,
              onClickCallback: onClickCallback,
        let createPaymentHandler = function(data) {
            // Call to create PayPal Order including PayPal Order ID (
        let onShippingChangeHandler = function(data, actions) {
            // EXAMPLE - Reject non-US addresses
            if (data.shipping_address.country_code !== 'US') {
              return actions.reject();
            // Patch the shipping amount
            const shippingAmount = data.shipping_address.state === 'CA' ? '0.00' : '5.00';
            return actions.order.patch([
                op: 'replace',
                path: '/purchase_units/@reference_id==\'default\'/amount',
                value: {
                  currency_code: 'USD',
                  value: (parseFloat(baseOrderAmount) + parseFloat(shippingAmount)).toFixed(2),
                  breakdown: {
                    item_total: {
                      currency_code: 'USD',
                      value: baseOrderAmount
                    shipping: {
                      currency_code: 'USD',
                      value: shippingAmount
        let onSuccessCallback = function() {
            // custom success behavior
        let onErrorCallback = function(reason) {
            // custom error behavior
        let onCancelCallback = function() {
            // custom cancel behavior
        let onInitCallback = function() {
            // additional behavior after initiation
        let onClickCallback = function() {
            // additional behavior after click

        Was this article helpful?