Using Apple Pay for Web

Apple Pay for Web allows you to make secure payments using the Safari browser.

The following articles help you with the Apple Pay payment method.

Prerequisites

Follow the prerequisites below before you incorporate Apple Pay on your website:

• Use the macOS version 10.12.1 or later for MacBook.

• Use the iOS version 10.1 or later for iPhone.

• Use the Safari browser on your Apple device.

• Ensure your server supports Apple Pay.

• Serve your application over HTTPS in both development and in production environments.

• Use an SSL-certified domain.

• Use a server with Transport Layer Security (TLS) protocol version 1.2 or later and a supported cipher suite.

• Refer to the Apple Server Configurations for setting up your production environment.

• Implement the manual card entry of the JavaScript SDK solution.

Supported Payment Methods

You must have the payment and address information of your customers who use Apply Pay.

Supported Cards

• Visa

• MasterCard

• American Express

• Discover

Merchant Capabilities

• Credit cards (Visa or Mastercard)

• Debit cards (Visa or Mastercard)

Unsupported Payment Methods

• In-App Payments

• Recurring Payments

• Split Shipment

• Voids/Refunds through Apple Pay

Getting Started

Note: Clearent manages the Merchant Validation process for you by creating an Apple Merchant ID and CSR. For more information, see Apple Developer Documentation.

Follow the below steps to register and verify your domain with Apple:

1. Provide your domain(s) that will be used for Apple Pay.

2. Host the verification file provided by Clearent to you on the following URL, replacing [DOMAIN_NAME] with your domain name.

URL: https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association

Note: This URL must be publicly accessible to allow Apple to verify the file.

1. Send a notification to Clearent after you host the file with appropriate URL, to request to register and verify your domain with Apple.

2. You will receive confirmation after successful domain verification with Apple from Clearent.

Setting Up Apple Pay

Adding the Apple Pay Button

1

Create a container using the script below on your website to add the Apple Pay button with default style.

<button id="apple-pay-button" class=""></button>

Note: Apple provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience. For more information on Apple Styling Guidelines, see Apple Pay.

You can use the following example to request button type for your website.

{
    "total": {
        "label": "AAA",
        "type": "final",
        "amount": "1.99"
    }
}

2

Add the function below to your website to check whether your customer uses Apple Pay.

This function helps you decide whether to display the Apple Pay button in the customer’s browser.

ClearentSDK.applePayAvailable()

Configuring the onClick Event

Follow the below steps to configure the onClick event for your payment process:

1

Configure the onClick event using the payment sheet object below to start the Apple Pay session.

if(ClearentSDK.applePayAvailable()) {
  let applyPaymentSheet = YOUR_PAYMENT_SHEET
  jq2("#apple-pay-button").on("click", () => {
      const session = ClearentSDK.buildApplePaySession(applyPaymentSheet);
// optional dynamic handling events can be added here (see below for details)
      session.begin()
  });
}

2

Clearent’s JavaScript SDK handles the Apple Pay token and converts it into the JWT that you process.

function ClearentTokenSuccess(raw, json) {
    console.log("ClearentTokenSuccess");
    console.log(raw);
    console.log(json);
    console.log("-----------------------------------------------");
    console.log("now you can send the token to your server");
    console.log("to complete the transaction via mobile-gateway");
    console.log("-----------------------------------------------")
}
function ClearentTokenError(raw, json) {
    console.log("ClearentTokenError");
    console.log(raw);
    console.log(json);
}

Note: Before moving to the next step, ensure you have integrated with Clearent’s JavaScript SDK to avoid an error. For more information, see Clearent’s JavaScript SDK.

3

Send the token provided by Clearent to your server using the secure transmission.

4

Provide the secret API key to Clearent from your server.

Note: Do not provide the secret API key from your website.

5

Return a successful token response you receive to the JavaScript SDK to handle it appropriately

Offline Testing for Apple Pay

Apple requires an offline test implementation of Apple Pay for apps, websites, and point-of-sale systems.

You can test your Apple Pay transaction using the Sandbox testing reference.

Calculating Final Transaction Cost

You can calculate final transaction cost using customer’s payment method, billing address, shipping address, and shipping method:

• If you want to calculate the final transaction cost using payment method, add the onpaymentmethodselected optional handler in your payment sheet.
• If you want to calculate the final transaction cost using shipping method, add the onshippingmethodselected optional handler in your payment sheet.
• If you want to calculate the final transaction cost using billing address and shipping address, add the onshippingcontactselected optional handler in your payment sheet.

Note: You can add the optional oncancel handler, which triggers when the customer clicks the Cancel button, to remove the payment page.

Refer the following example to implement the optional handlers in your payment sheet:

Example:

jq2("#apple-pay-button").on("click", () => {
    const session = ClearentSDK.buildApplePaySession(request);
  session.onshippingmethodselected = function (event) {
    selectedShippingMethod = event.shippingMethod
    const newTotalAmount = calculateTotal….
    const newLineItems = [update line items…]
    session.completeShippingMethodSelection(
      {
        newTotal: {
          label: request.total.label,
          amount: newTotalAmount,
          type: final }, // newTotal is required
        newLineItems,
      }
    )
  }
   session.oncancel = function(event) {
       …add logic for when session is cancelled by user
}
…. Other optional handlers can be added here
    session.begin()
});