Checkout and Payment
People appreciate using Apple Pay to make purchases quickly and easily. You can enhance the purchase experience in your app or website by creating a streamlined checkout process and presenting a customized payment sheet that lets people promptly authorize payment and complete their transaction.
Streamline the Checkout Process
Provide a cohesive checkout experience. It's best when the entire checkout flow feels tightly integrated with your app or website. To strengthen the user's perception of integration, use your branding throughout the checkout experience and avoid opening different pages or windows. For website checkout flows in particular, opening new windows during the process can cause confusion and may even lead people to think they've been handed off to a different website.
Make Apple Pay the default payment option when possible. If Apple Pay is enabled, assume the person wants to use it. Consider presenting the Apple Pay button as the first or only payment option, displaying it larger than other options, or using a line to visually separate it from other choices.
Accelerate single-item purchases with Apple Pay buttons on product detail pages. In addition to offering a shopping cart, consider putting Apple Pay buttons on product detail pages so users can quickly purchase an individual item. Purchases initiated in this way should be for an individual item only, and should exclude any items that already reside in the user's shopping cart. If the user's shopping cart contains an item purchased directly from a product detail page, remove the item from the cart after the purchase is complete.
Accelerate multi-item purchases with express checkout. Consider providing an express checkout feature that immediately displays the payment sheet, allowing users to quickly purchase multiple items using a single shipping method and destination.
Collect necessary information, like color and size options, before people reach the Apple Pay button. When additional information is needed at checkout time—perhaps because the user forgot to choose an option—gracefully point out the problem and help the user correct it. Use highlighting or warning text to identify missing information, and automatically navigate to the problematic field so the user can quickly correct it and complete their purchase.
Collect optional information before checkout begins. There’s no way to input data on the payment sheet, so collect any optional information such as promo codes, redemption codes, gift messages, and delivery instructions ahead of time or even after the purchase is complete.
Gather multiple shipping methods and destinations before showing the payment sheet. The payment sheet lets people select a single shipping methods and destination for an entire order. If your customers can choose different shipping methods and destinations for individual items in an order, collect those details before Apple Pay checkout begins, instead of on the payment sheet.
For in-store pickup, gather details before displaying the payment sheet. There’s no way to let people choose a pickup location, date, or time on the payment sheet, so collect this information before presenting the Apple Pay button.
Prefer information from Apple Pay. Assume that Apple Pay information is complete and up to date. Even if your app or website has existing contact, shipping, and payment information, consider fetching the latest from Apple Pay during checkout to reduce potential corrections.
Don't require account creation prior to purchase. If you want people to register for an account, ask them to do so on the order confirmation page. Prepopulate as many registration fields as possible using information provided by the payment sheet during checkout.
Display an order confirmation or thank-you page. After checkout, use an order confirmation page to thank the user for the purchase, provide details about when the order will ship, and indicate how to check its status. Listing Apple Pay on the confirmation page isn’t necessary, but if you do list it, show it after the last four digits of the account used to process the transaction or as a separate note. For example: "1234 (Apple Pay)" or "Paid with Apple Pay."
Customize the Payment Sheet
Only present and request essential information. People may get confused or have privacy concerns if the payment sheet includes extraneous information. For example, it makes sense to see a contact email address but not a shipping address if the purchase is a gift card that will be delivered electronically. Showing or asking for a shipping address in this scenario may give the false impression that something will be physically delivered.
Let people choose the shipping method in the payment sheet. To the extent space permits, show a clear description, a cost, and, optionally, an estimated delivery date for each available option.
Use line items to explain additional charges, discounts, pending costs, and add-on donations. A line item includes a label and cost. Don’t use line items to show an itemized list of products that make up the purchase. For more guidance on donations, see Donations.
Keep line items short. Make line items specific and easily understandable at a glance. Whenever possible, fit line items on a single line.
Provide a business name after the word PAY on the same line as the total. Use the same business name people will see when they look for the charge on their bank or credit card statement. This provides reassurance that payment is going to the right place. For example: PAY [COMPANY_NAME].
Provide the end merchant name when applicable. If your app or website acts as an intermediary and isn’t the end merchant for a payment, clearly indicate this in the following format: PAY [END_MERCHANT_NAME] (VIA [YOUR_APP_OR_WEBSITE_NAME]).
Clearly disclose when additional costs may be incurred after payment authorization. In some cases, the total cost may be unknown at checkout time. For example, the price of a car ride based on distance or time might change after checkout. Or, a customer might want to add a tip after a product has been delivered. In situations like these, and when local regulations allow, you can provide a clear explanation in the payment sheet and a subtotal marked as "AMOUNT PENDING." If you are preauthorizing a specific amount, be sure the payment sheet accurately reflects this information.
Handle data entry and payment errors gracefully. If an error occurs during checkout, help people resolve it quickly so they can complete their transaction. For related guidance, see Data Validation.
Displaying a Website Icon
Many websites provide an icon that can be displayed with bookmarks, in URL fields, or on a device’s Home screen. On websites that support Apple Pay, this icon is also displayed on the payment sheet of the connected device that’s used to authorize payment. It provides visual reassurance that payment is going to the right place.
If your website supports Apple Pay, provide an icon in the following sizes for use on the payment sheet:
|120px x 120px (60pt x 60pt @2x)||180px x 180px (60pt x 60pt @3x)|