15.11.2014 Views

Apple-Pay-Human-Interface-Guidelines

Apple-Pay-Human-Interface-Guidelines

Apple-Pay-Human-Interface-Guidelines

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.


<br />

apple"<br />

!<br />

<strong>Apple</strong> <strong>Pay</strong> <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong><br />

Version 1.0<br />

September 9, 2014<br />

Copyright © 2014 <strong>Apple</strong> Inc. All rights reserved.


Overview<br />

<strong>Apple</strong> <strong>Pay</strong> is an easy, secure, and private way to make payments on iPhone 6. When purchasing<br />

physical goods and services in apps, users can use <strong>Apple</strong> <strong>Pay</strong> to securely provide their billing,<br />

shipping, and contact information, as well as their payment information.<br />

!<br />

The Checkout Flow with <strong>Apple</strong> <strong>Pay</strong><br />

Using <strong>Apple</strong> <strong>Pay</strong> in your app, users can quickly check out without having to create an account<br />

or type billing and shipping information. As soon as users authorize and submit their payment<br />

using Touch ID or their passcode, <strong>Apple</strong> <strong>Pay</strong> provides the required contact information (such as<br />

name, phone number, and email), along with the billing, shipping, and payment details you<br />

need to fulfill the order.<br />

!<br />

No Shopping Cart<br />

If your app does not have a shopping cart, you can use <strong>Apple</strong> <strong>Pay</strong> to accept single-item<br />

purchases. To help users make a single-item purchase, invoke <strong>Apple</strong> <strong>Pay</strong> as the first step in the<br />

purchasing process. <strong>Apple</strong> <strong>Pay</strong> responds by providing the billing and shipping addresses (if<br />

needed), along with the payment information.<br />

!<br />

One Shipping Address<br />

If your app has a shopping cart and all of the merchandise in that cart must be shipped by the<br />

same method to the same address, invoke <strong>Apple</strong> <strong>Pay</strong> at the beginning of the checkout process.<br />

After the user authorizes the purchase, <strong>Apple</strong> <strong>Pay</strong> responds by providing the billing and<br />

shipping addresses (if needed), along with the payment information.<br />

!<br />

Multiple Shipping Addresses and Methods<br />

If your app has a shopping cart and offers the ability to ship individual items by different<br />

shipping methods or to different addresses, or offers an in-store pick up option, invoke <strong>Apple</strong><br />

<strong>Pay</strong> after the shipping addresses or billing methods have been specified. Although there is no<br />

way to specify multiple addresses or multiple shipping methods, you can still use <strong>Apple</strong> <strong>Pay</strong> to<br />

get the billing address and payment information.<br />

!<br />

Be sure to collect redemption codes for discounts prior to starting the <strong>Apple</strong> <strong>Pay</strong> process.<br />

!<br />

The <strong>Apple</strong> <strong>Pay</strong> Button<br />

When <strong>Apple</strong> <strong>Pay</strong> is enabled on a user’s device, display the “Buy with <strong>Apple</strong> <strong>Pay</strong>” button<br />

prominently, so that the user can use their active credit or debit card in <strong>Apple</strong> <strong>Pay</strong> to make<br />

payments. For guidelines on how to use <strong>Apple</strong> <strong>Pay</strong> button assets and payment marks in the<br />

customer purchase flow, see https://developer.apple.com/apple-pay/.<br />

!<br />

!<br />

If a user’s device does not support <strong>Apple</strong> <strong>Pay</strong>, do not display the <strong>Apple</strong> <strong>Pay</strong> payment button.<br />

!<br />

<strong>Apple</strong> <strong>Pay</strong> Sheet Customization<br />

Before the user submits an order and the associated payment, the <strong>Apple</strong> <strong>Pay</strong> sheet displays<br />

information that you request, such as credit and debit card information, billing address,<br />

shipping name and address, and a contact email address (Figure 1). Be sure to request only<br />

what is needed to process the payment and complete the transaction.<br />

Copyright © 2014 <strong>Apple</strong> Inc. All rights reserved.


Figure 1: <strong>Apple</strong> <strong>Pay</strong> Sheet<br />

For example, if the merchandise will be delivered or fulfilled electronically, it makes sense to<br />

request a contact email address, but not a shipping address.<br />

!<br />

Any number of shipping methods can be passed to <strong>Apple</strong> <strong>Pay</strong> so that users can adjust the<br />

speed of delivery from within the <strong>Apple</strong> <strong>Pay</strong> sheet. To specify a shipping method, use a label, a<br />

cost, and an optional second line for providing an estimated date of delivery.<br />

!<br />

You can add line items to the purchase total to explain additional charges. A line item consists<br />

of a label and an associated cost, such as “Gift Wrap $5.00” or “Tax $4.53”. You can also add an<br />

item with a negative value, such as “Friday Discount -$2.00”. Use line items for charges that are<br />

added to the merchandise being purchased; don’t use them to display an itemized list of<br />

products.<br />

!<br />

Create line item labels that are specific and easily understood by your customers. As much as<br />

possible, create labels that can display on a single line.<br />

!<br />

You can also provide a business name that appears after the word “PAY” on the same line as the<br />

total.<br />

!<br />

Note that the <strong>Apple</strong> <strong>Pay</strong> sheet always displays text in all capital letters.<br />

!<br />

Copyright © 2014 <strong>Apple</strong> Inc. All rights reserved.


The Post Transaction Process<br />

After the transaction, <strong>Apple</strong> <strong>Pay</strong> displays an animation indicating that the transaction has<br />

completed.<br />

!<br />

Display your order confirmation or thank you page after the <strong>Apple</strong> <strong>Pay</strong> sheet dismisses. To<br />

provide a clear user experience, your order confirmation page should display the details about<br />

the expected shipping date and how users can check the status of their order. If appropriate,<br />

you can also suggest that users create an account—or give existing customers a way to sign<br />

into their account—so that they can easily track the status of their order<br />

!<br />

To learn more about best practices for user interface and user experience design,<br />

see iOS <strong>Human</strong> <strong>Interface</strong> <strong>Guidelines</strong>.<br />

!<br />

Copyright © 2014 <strong>Apple</strong> Inc. All rights reserved.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!