Getting started with Apple Pay

Datacap's Wallet client enables a merchant website to accept payment through a third party wallet like Apple Pay, offering customers a quick and familar payment option. Tokenized card data is returned to the merchant in the same format as our WebToken and Hosted WebToken clients.

Where to place the Apple Pay button

The Apple Pay button can be displayed prior to website login to facilitate an 'express' checkout. The Datacap token provided to the POS contains the customer's contact information, so the POS knows how to identify the customer.

Alternatively, the POS can place the Apple Pay button on their checkout form, allowing the cusomter to use Apple Pay instead of entering card details.

See Apple's guidelines for more details on Apple Pay button placement.

Include the Wallet client on your page

Add the secure, hosted JavaScript client in the `<head>` of your page:

Production:
<script src="https://wallet.dcap.com/v1/client/applepay"></script>

Certification:
<script src="https://wallet-cert.dcap.com/v1/client/applepay"></script>

Show the Apple Pay button

Create a DIV with the ID: `<apple-pay-button>`

<div id="apple-pay-button">

Note: The Apple Pay button is generated dynamically from the JavaScript client, including all styling. The Apple Pay button is only displayed in Safari on compatible versions of iOS or macOS.

Note: The Apple Pay button will only be displayed if the merchant's processor supports Apple Pay transactions. Currently supported processors are Worldpay Core (Vantiv) and EVO, with other processors coming soon.

Define required JavaScript

Define a JavaScript callback method that:
1. Handles token events
2. Sends the token to the POS server for payment processing

var tokenCallback = function(tokenResponse)
{
  return new Promise(function(resolve, reject)
  {
    // Token error!
    if (tokenResponse.Error)
    {
      alert("Token error: " + tokenResponse.Error);
      return;
    }

    // Good token! Send it to POS server for payment processing
    fetch("https://your-server-for-receiving-order-info/",
      {
        method: "POST",
        body: JSON.stringify(tokenResponse)
      })
      .then(function(paymentResponse)
      {
        paymentResponse.json().then(function(json)
        {
          // Use Datacap's Pay API HTTP status 
          // to determine how to return promise 
          if (payApiResponse.status != 200)
          {
            reject("Error" + json.Message);
          }
          else
          {
            resolve("Approved" + json.Message);
          }
        });
      });
  });
};

Note: For the best user experience, the callback should return a promise to the Wallet client. A successful return dismisses the Apple Pay sheet with a successful message. Rejecting the promise dismisses the Apple Pay sheet with a "Payment not complete" message.

If the merchant's website is unable to fulfill the promise, the Apple Pay sheet disappears without providing feedback to the customer.

Initialize!

Call `init` with your token callback method, token key, merchant name to display, Apple Pay merchant ID, and amount to display :

DatacapApplePay.init(tokenCallback, "[Token Key]", "[Merchant Name]", "[Apple Pay Merchant ID]", "[Amount]");

The response object received by your callback method looks like this:

On Success

{
  "Brand": "VISA",
  "ExpirationMonth": "12",
  "ExpirationYear": "20",
  "Last4": "1234",
  "Token": "DC4:vEyLV7sH5F-me8BnK1nwwHesAWJQTRNK8",
  "customer": {
    "address": ["100 New Britain Blvd"],
    "city": "Chalfont",
    "email": "integrationsupport@dcap.com",
    "firstName": "Integration",
    "lastName": "Support",
    "phone": "2159978989",
    "state": "PA",
    "zip": "18914"
  }
}

On Failure

{
  Error: "Failed to create token"
}

Use your tokens!

Now that you've got a Datacap token, you can use it for payment processing with Pay API. Do this by asynchronously calling your server with the token, and return the result as a JavaScript promise to the Wallet client. This cleanly dismisses the Apple Pay sheet and lets the customer know the result of their Apple Pay transaction.