Integration

Steps for Integration

1. Set up a device for testing

• Sandbox account: Requires an iCloud account corresponding to your environment. Testing in the sandbox requires you to be logged in to an iTunes Connect sandbox tester account, which you can create with an Apple Developer account.
• Production account: Requires an iOS device and a supported debit/credit card.

2. Register your domain

• Host the domain association file and register your domain in the Buckaroo Plaza.

3. Client-Side integration

Our ClientSide SDK works as a wrapper for Safari's Apple Pay API Reference. It will take care of a few parts for you, namely:

• Easier API integration
• Setting up the Apple Pay Button
• Callback management
• Creating a Session with Apple Pay

3.1 Get the SDK

Include the following script in your page.

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

3.2 Check Apple Pay support in the browser

First, we need to determine if Apple Pay is supported on the customer’s device. Change the 'YOUR_MERCHANT_GUID' value to your merchant GUID.

You can find this ID if you go to the Buckaroo Plaza: Click on “Your merchant name” and then open the General page. The ID is then visible in the URL: https://plaza.buckaroo.nl/Merchant/[your merchant GUID]

var merchantIdentifier = 'YOUR_MERCHANT_GUID';
BuckarooSdk.ApplePay.checkApplePaySupport(merchantIdentifier)
  .then(function (applePaySupported) {
    if (applePaySupported) {
      init(merchantIdentifier);
    }
  });

3.3 Initialize Apple Pay

This code sample demonstrates the initialization of a new Apple Pay payment. As described in the code comments the available fields are:

function init(merchantIdentifier) {
   var totalForDelivery = {
      label: "Total price",
      amount: "5.99",
      type: "final"
   };
   var subtotal = "4.99";
   var lineItemsForDelivery = [
      { label: "Subtotal", amount: subtotal, type: "final" },
      { label: "Delivery", amount: "1.00", type: "final" }
   ];
   var shippingMethods = [
      { label: "Delivery", amount: "1.00", identifier: "delivery", detail: "Deliver   y to you" },
      { label: "Collection", amount: "0.00", identifier: "collection", detail: "Collect from the store" }
   ];
   var requiredContactFields = ["email", "name", "postalAddress"];
   var captureFunds = function (payment) {
      var result = {}; // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentauthorizationresult

      var captureInfo = {
         customerCardName: payment.billingContact.givenName + " " + payment.billingContact.familyName,
         paymentData: btoa(JSON.stringify(payment.token))
      }

      // TODO: send captureInfo to Buckaroo

      return Promise.resolve(result);
   }
   var shippingMethodSelected = function (shippingMethod) {
      var result = {}; // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingmethodupdate
      return Promise.resolve(result);
   }
   var shippingContactSelected = function (shippingContact) {
      var result = {}; // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingcontactupdate
      return Promise.resolve(result);
   }
   var cancel = function(event) {
      console.log("Payment UI is dismissed.");
   }
   var shippingOption = "shipping"; // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingtype
   var options = new BuckarooSdk.ApplePay.ApplePayOptions(
      'STORE_NAME',    		 // store name
      'NL', 			 // country code
      'EUR',			 // currency code
      'NL',			 // language
      merchantIdentifier, 	 // your merchant guid
      lineItemsForDelivery, 	 // default line items
      totalForDelivery, 	 // default total line
      shippingOption, 		 // default shipping option
      shippingMethods, 		 // available shipping methods
      this.captureFunds, 	 // callback method for capturing funds
      this.shippingMethodSelected, // (OPTIONAL) after shipping method is altered
      this.shippingContactSelected,// (OPTIONAL) after shipping contact is altered
      requiredContactFields,	 // (OPTIONAL) fields for billing contact
      requiredContactFields, 	 // (OPTIONAL) required fields for shipping
      this.cancel		 // (OPTIONAL) after payment UI is dismissed
   );

   showButton(options);
}

3.4 Show button

This sample code creates the payment and shows the Apple Pay button with a white-on-black design and the check-out text.

function showButton(options) {
   var payment = new BuckarooSdk.ApplePay.ApplePayPayment(
      "#button",  // selector for the element to use as the button
      options	 // the ApplePay payment options object
   );

   payment.showPayButton(
      "black",    // black, white or white-outline
      "check-out" // plain, book, buy, check-out, donate, set-up or subscribe
   );
}