Integration

When setting up Apple Pay you will need to complete the device setup and domain registration steps below.

1. Set up a device

You have 2 options for testing Apple Pay:

• Sandbox account. When testing, you will need to be logged in to an iCloud account that corresponds to your environment. Testing in 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. You won’t need a developer account for this option. You’ll need an iOS device and a debit/credit card which is supported by Apple Pay. You can safely create test transactions with a real card. As long as you are creating test transactions your debit/credit card will not be charged.

2. Register your domain

• You will need to register every domain name that will be used to perform Apple Pay payments with. Before registering your domain names you will need to download the domain association file and host it on your site at /.well-known/apple-developer-merchantid-domain-association.

• When you have successfully placed this file for each domain name, you can log in to the Buckaroo Plaza and visit the Apple Pay page in the Configuration menu. On this page, you will be able to register your domains with Apple by simply entering your domains in the Sandbox and Production account tabs. We will take care of the rest.

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 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
   );
}