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="https://checkout.buckaroo.nl/api/buckaroosdk/script"></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="https://checkout.buckaroo.nl/api/buckaroosdk/script/en"></script>
        

        The default language is Dutch.

        Note:

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

        Examples

        Payconiq script example

        $(document).ready(
            function() { 
                BuckarooSdk.Payconiq.initiate("#payconiqQr", "94EDDFBCFF774714AEDE0F9346XXXX"); 
            });
        

        Bancontact script example

        $(document).ready(
            function() { 
                BuckarooSdk.BancontactMobile.initiate("#bancontactMobileButton", "94EDDFBCFF774714AEDE0F9346XXXX"); 
            });
        

        iDeal script example

        $(document).ready(
            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 https://plaza.buckaroo.nl/Configuration/PayPal, 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 dev.buckaroo.nl/PaymentMethods/Description/paypal#pay. Function is invoked with PayPal data object, see https://developer.paypal.com/sdk/js/reference/#link-dataattributes.

        • (optional) onShippingChangeHandler function(data, actions) : Promise - Callback function used to adjust the shipping amount based on the selected address. See https://developer.paypal.com/sdk/js/reference/#link-onshippingchange

        • (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,
            };
        
            BuckarooSdk.PayPal.initiate(PayPalOptions); 
        });
        
        let createPaymentHandler = function(data) {
            // Call to create PayPal Order including PayPal Order ID (dev.buckaroo.nl/PaymentMethods/Description/paypal#pay)
        }
        
        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?