Apple Pay Integration Options with PayPal

Apple Pay® is a popular, fast and secure way for customers to check out in stores, within apps and on websites.

We are excited to let you know that developers can now integrate Apple Pay with PayPal JS SDK and Orders API v2 and is now available on the web using the Safari® web browser on iPhone®, iPad® and Mac® devices.

No one integration fits all solutions, so we are offering multiple ways developers can integrate Apple Pay on their merchants’ website depending on their use case.

Apple Pay with PayPal offers both simplified integrations for less complex use cases and more complex integrations for use cases requiring custom solutions. In this post, we highlight those use cases and their benefits.

Case 0: eCommerce Partner Offers Apple Pay

Benefits: No work other than perhaps checking a flag.

If your merchant (or you) is using a 3rd party cart / shopping experience, check with them to see if they already offer Apple Pay integration. In many cases, it will be automatically enabled. Others may require a configuration setting or a plug-in. Please check with the supplier for details.

Case 1: Simple In-line Integration

Benefits: Simple, limited customizations, out-of-the-box.

For an “out-of-the-box” solution with a simple Apple Pay payment experience where there are not many customizations required (such as options for discount codes, billing/shipping address and recurring payment agreements), an inline integration using our Standard Payment Buttons with a drop-in UI may be all you need to get the job done.

If you are already using our standard payment button integration, all you need to do is change one line of code and then you will be able to offer Apple Pay along with your other payment methods.

You can use this code to integrate with the PayPal JavaScript SDK:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD&buyer-country=US&merchant-id=SUB_MERCHANT_ID&components=applepay"></script>

Case 2: Customizable SDK

Benefits: Customizable to suit your site’s needs, build the best customer experience and maximize the conversion performance on your website, combination of drop-in and custom code.

Apple Pay provides many options for customization such as displaying line-item labels, shipping method amounts, customer contact information, coupon codes, order tracking, recurring payment agreement details and error messages on the payment sheet. They also provide specific callbacks for each of those customization options which allow the merchant to update the information displayed to the buyer on the payment sheet. This makes sure that the buyer will see the latest payment information before approving the payment.

To take advantage of the extensive customizations that Apple Pay has to offer, PayPal gives you the flexibility to use both integrations together.

Using this technique, websites can integrate directly to the Apple Pay JS API to access the full capabilities of Apple Pay and then simply connect to the PayPal JS SDK to process the payment.

Information about the Apple Pay APIs, including how to generate Apple Pay buttons can be found here. Information about Apple Pay design guidelines can be found here.

Once integrated, the Apple Pay APIs will return some secure payment data which can be passed to the PayPal JS SDK to complete payment.

You can use this script to integrate with the PayPal JS SDK to process the Apple Pay Payment:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD&buyer-country=US&merchant-id=SUB_MERCHANT_ID&components=applepay"></script>

Ensure that applepay is added to the component list and follow the additional steps as described in the Developer Documentation to render the Apple Pay button.

Note: Using the integrations in this manner will automatically prevent the Apple Pay button from appearing twice under some circumstances.

This is a comparatively easier integration than using the API method and decouples the payment experience customization from the payment transaction. Merchants will use the Apple Pay API to access the full capabilities provided by Apple Pay. The PayPal JS SDK will provide utility APIs to enable the direct Apple Pay Web JS SDK integration for merchants. The PayPal orders API will be used by the merchants to process the payment transaction.

Apple Pay is compatible with PayPal’s Expanded Checkout and developers can use PayPal JS SDK and Orders API v2 to set up the integration.

See the integration guide for more details.

-

Apple Pay, iPad, iPhone, Mac, and Safari are registered trademarks of Apple Inc.