Violet Checkout with Apple Pay
Stripe.js V3 libraries allow you to accept payments from shoppers through 25+ different payment methods with a single, embeddable UI component. This includes Apple and Google Pay for supported devices. Stripe powers this through their Payment Element, which requires both front-end and server-side work in order to accept a payment.
Since Apple Pay stores customer information, such as Shipping and Billing Information, integrating with these payment methods simplifies checkout for shoppers since they no longer need to re-enter this information during checkout. Violet checkout has been enhanced to enable you to use Apple Pay through Stripe Payment Elements to create easier, more secure payment flows for your shoppers. This includes the following flows for Shoppers:
- Selecting contact information through Apple Pay
- Selecting a shipping address through Apple Pay
- Selecting a payment method through Apple Pay
- Selecting shipping methods through Apple Pay
- Confirming the payment through FaceId/TouchId
This document walks you through how you can integrate with these changes. For more information on adding Apple Pay into your system, please refer to the Stripe Guides, available here.
For a detailed, end-to-end example of how Violet Checkout works with Apple Pay, you can download our sample application: Violet Sample App — The Ultra Store.
Note: This document assumes that you have already set up Violet within your software ecosystem and integrated with our APIs. If this is not the case, please follow and read through our Quick Start guide.
Creating an Order
The first step is to create a cart with items in it for your shopper as described here, however, with the following new flag added to the request body:
This flag is required to ensure the rest of the checkout flow is aware that an external wallet will be used to complete the payment.
Rendering the Apple Payment Sheet
Once a cart has been created, the rest of the checkout flow can take place on the Apple Payment Sheet. This includes:
- Applying customer information
- Selecting shipping addresses
- Selecting shipping methods
- Selecting payment information
- Confirming the order.
Apple also allows you to only request parts of the information from the list above if you already have details about the customer. Hence, there are multiple possible ways checkout can be completed through Apple Pay. The two most common ways are:
- Apple Pay Payment — In this scenario, customer information and shipping and billing addresses are requested prior to displaying the Apple Pay term sheet so that only Payment takes place through Apple Pay.
- Apple Pay Checkout — In this scenario, all information is requested and attached to the cart through Apple Pay.
Apple Pay Payment
To support the “Payment-only using Apple Pay” flow, where only the charge is completed through Apple Pay, please follow the integration guide available here: Violet Checkout with Stripe.js v3. Since Stripe Payment Elements have multiple payment methods built into it, Apple Pay being one of them, this solution will work out of the box to complete payments.
Apple Pay Checkout
Retrieving the Payment Intent Client Secret
To render the Apple Payment Sheet, Violet recommends using Stripe elements. This ensures that the payment can successfully be handled by Violet without requiring any extra effort on your side.
In order to render a Stripe Payment Element, Stripe requires both a Stripe Key as well as a Payment Intent Client Secret . Since Violet handles the payment flow for you, during the order creation process, we have enhanced the Order response with the following two fields:
The order you created in the “Creating an Order” step will have both these values populated. The stripe_key only changes at the environment level and is used to load the Stripe libraries. We recommend saving it as an environment variable in your client-side code so that you don’t need to re-render Stripe elements each time.
The payment_intent_client_secret changes per order — this is what is used to tie the order to the payment.
Integrating with the Stripe Payment Request
The Payment Request Button Element gives you a single integration for Apple Pay, Google Pay, and Link — Stripe’s one-click checkout product. Now that you have a Stripe Key and Payment Intent Client Secret, you’re ready to render the Stripe Payment Request button and collect all shopper information through Apple Pay.
Set up Stripe.js
Install the Stripe.js React libraries and the Stripe JS loader from the npm public registry:
Add Stripe.js and Elements to your payment page
To use the Stripe Payment element, wrap your checkout page in a Stripe Elements provider. This is where you will also use the Stripe Key provided in the Order response.
Add the Payment Request to your Checkout Form
In your checkout form, render the Stripe PaymentElement component:
Use the requestPayerName parameter to collect the payer’s billing address for Apple Pay. You can use the billing address to perform address verification and block fraudulent payments. All other payment methods automatically collect the billing address when one is available.
Next, learn how to apply customer information and request shipping methods.
Applying Customer Information and Requesting Shipping Methods
Listen to the shippingaddresschange event to detect when a shipping address is selected by the shopper. Use this address to fetch valid shipping options from Violet.
Note: When applying Shipping Address for a customer to Violet, must be present, even if Apple doesn’t provide it in this step.
Next, learn how to apply the shipping method and update the payment intent as the shopper chooses differently priced shipping methods.
Applying the Shipping Method
Once shipping methods have been shown to the Shopper, you can subscribe to the shippingoptionchange event to select and apply new shipping methods to the cart.
Confirming the Payment
Once you’ve applied shipping methods to all the bags in the order, you can confirm the payment using a paymentMethodId and paymentIntentClientSecret.
Listen to the paymentmethod event to receive a PaymentMethod object and then confirm the card payment.
Submitting the Order to Violet
If a successful result is returned from the call to Stripe, the payment has been authorized. You can now submit the Order to Violet.
Applying Final Customer Information
Until post-payment confirmation, Apple had redacted customer information such as street address. You will now need to re-apply this information to the cart. This can be done during the submit call itself.
You can apply the customer information in the handleVioletSubmit method called above.
The order has now been submitted. You can display a confirmation screen to your Shopper upon success and close out from the Apple Pay Payment Sheet.
Multi-merchant checkout with Apple Pay requires additional work due to the nuances around shipping methods for these orders. The Apple Pay Term Sheet was not built to allow selection for different shipping methods within the same order, however, since Violet supports multi-merchant checkout and allows you to apply different shipping methods for different merchants within the same order, we recommend using the Apple Pay Payment flow instead of the Apple Pay Checkout flow.
If your app still requires the Apple Pay Checkout experience, Violet suggests the following approach:
Note: This approach results in a sub-optimal user experience and increases your monthly payments to Violet. We highly recommend using the Apple Pay Payment flow instead.
If you look closely at the Order object for multi-merchant Orders, you will notice that each Bag contains details, including tax, shipping, and totals; specific to a single merchant.
In order to support the Apple Pay term sheet, you will need to split the order from 1 Order with N bags, to N orders each with 1 bag. Each merchant will then have its own order. Prior to the rendering the Apple Pay screens, you can create these new Orders against Violet with SKU and any other information you already have pre-filled, and then guide your shopper through multiple Apple Pay payment flows. This will complete each order individually, resulting in multiple charges to the shopper on their payment methods, increased payment processing fees for you, and increased payments to Violet depending on your pricing model.