Buttons and Marks

Several button styles are available for use by apps and websites that accept Apple Pay. The Apple Pay mark is a graphic that communicates the availability of Apple Pay as a payment option.

Don't create your own Apple Pay button design or attempt to mimic the system-provided button designs.

For related design guidance, see Offering Apple Pay and Checkout and Payment. For developer guidance, see PKPaymentButtonType (iOS), PKPaymentButtonStyle (iOS), WKInterfacePaymentButton (watchOS), and Apple Pay on the Web (web).

Button Types

The system offers API to create a variety of Apple Pay button types. When you use the Apple-provided API to create Apple Pay buttons, you get:

  • A button that is guaranteed to use an Apple-approved caption, font, color, and style
  • Assurance that the button’s contents maintain ideal proportions as you change its size
  • Automatic translation of the button’s caption into the language that’s set for the device
  • Support for configuring the button’s corner radius to match the style of your UI

Apple Pay or Buy with Apple Pay Button

Use one of these buttons wherever people initiate payment in your app or on your website, like a product detail page or shopping cart page.

Apple Pay button

Buy with Apple Pay button

If Apple Pay has been set up, this button should display a payment sheet, where people can complete the checkout process. If Apple Pay hasn't been set up, this button should initiate the process of adding a card—or, you can display a Set up Apple Pay button in this scenario for added clarity.

Set up Apple Pay Button

When a device supports Apple Pay, but it hasn’t been set up yet, you can use this button to show that Apple Pay is accepted and to give people an explicit opportunity to set it up.

Set Up Apple Pay button

You can display the Set up Apple Pay button on pages such as a Settings page, a user profile screen, or an interstitial page. Tapping the button in any of these locations should initiate the process of adding a card.

Donate with Apple Pay Button

Approved nonprofits can use this button to facilitate donations in apps and websites.

Donate with Apple Pay button

Book with Apple Pay Button

Use this button if it fits better with the terminology of your checkout experience. For example, an airline might use this button to let people book a flight.

Book with Apple Pay button

Check out with Apple Pay Button

Use this button if it fits better with the terminology of your checkout experience. For example, an app offering a shopping cart might use this button to let people purchase the items in the cart. Use this button if other payment buttons start with the text Check out for a more consistent user experience.

Check out with Apple Pay button

Subscribe with Apple Pay Button

Use this button if it fits better with the terminology of your checkout experience. For example, a newspaper app might use this button to let people initiate a monthly subscription.

Subscribe with Apple Pay button

Pay with Apple Pay Button

Banks and credit card issuers can use this button in their iOS apps to let people quickly bring up their card in the Wallet app when making a purchase in a physical store. Other apps should use other Apple Pay button styles.

Pay with Apple Pay button

Button Styles

You have several options for displaying Apple Pay buttons.

Black

Use on white or light-colored backgrounds that provide sufficient contrast. Don’t use on black or dark backgrounds.

A black Apple Pay button over a light gray background.

Green check in a circle to indicate correct usage.

A black Apple Pay button over a dark green background.

Red X in a circle to indicate incorrect usage.

White with Outline Rule

Use on white or light-colored backgrounds that don’t provide sufficient contrast. Don’t place on dark or saturated backgrounds.

A white, outlined Apple Pay button over a light gray background.

Green check in a circle to indicate correct usage.

A white, outlined Apple Pay button over a dark green background.

Red X in a circle to indicate incorrect usage.

White

Use on dark or colored backgrounds that provide sufficient contrast.

A white Apple Pay button over a dark green background.

Green check in a circle to indicate correct usage.

A white Apple Pay button over a light gray background.

Red X in a circle to indicate incorrect usage.

Button Size and Position

Display the Apple Pay button prominently. Make Apple Pay buttons the same size or larger than other payment buttons. Also, people shouldn't have to scroll to see the Apple Pay button.

An Apple Pay button positioned correctly above a custom Add to Cart button. Both buttons are the same size.

Green check in a circle to indicate correct usage.

An Apple Pay button shown correctly in a larger size than a custom Add to Cart button.

Green check in a circle to indicate correct usage.

An Apple Pay button, shown incorrectly at a smaller size than a custom Add to Cart button.

Red X in a circle to indicate incorrect usage.

Position the Apple Pay button correctly in relation to an Add to Cart button. In a side-by-side layout, place the Apple Pay button to the right of an Add to Cart button.

An Apple Pay button shown correctly positioned to the right of a custom Add to Cart button.

Green check in a circle to indicate correct usage.

An Apple Pay button shown incorrectly positioned to the left of a custom Add to Cart button.

Red X in a circle to indicate incorrect usage.

In a stacked layout, place the Apple Pay button above an Add to Cart button.

An Apple Pay button shown correctly positioned above a custom Add to Cart button.

Green check in a circle to indicate correct usage.

An Apple Pay button shown incorrectly positioned below a custom Add to Cart button.

Red X in a circle to indicate incorrect usage.

Adjust the corner radius to match the appearance of other buttons. By default, an Apple Pay button has rounded corners. You can change the corner radius to produce a button with square corners or a pill-shaped button. For developer guidance, see cornerRadius.

Two Apple Pay buttons, both using ninety degree corners.

Minimum corner radius

Two Apple Pay buttons, both using the default corner radius.

Default corner radius

Two Apple Pay buttons, both using the maximum corner radius, which results in a lozenge-like appearance.

Maximum corner radius

Maintain the minimum button size and margins around the button. Be mindful that the button title may vary in length depending on the locale.

Image of an Apple Pay button, labeled to indicate minimum margins of one-tenth the button's height, a 100 point minimum width, and 30 point minimum height.

Image of a Donate with Apple Pay button, labeled to indicate minimum margins of one-tenth the button's height, 140 point minimum width, and 30 point minimum height.

Use the following values for guidance.

Button Minimum width Minimum height Minimum margins
Apple Pay 100pt (100px @1x, 200px @2x) 30pt (30px @1x, 60px @2x) 1/10 of the button's height
Book with Apple Pay
Buy with Apple Pay
Check out with Apple Pay
Donate with Apple Pay
Pay with Apple Pay
Set up Apple Pay
Subscribe with Apple Pay
140pt (140px @1x, 280px @2x) 30pt (30px @1x, 60px @2x) 1/10 of the button's height

Apple Pay Mark

Use the Apple Pay mark graphic to show that Apple Pay is an available payment option when showing other payment options in a similar manner. The Apple Pay mark is not a button; if you need an Apple Pay button, choose one of the buttons described in Button Types. For design guidance related to showing Apple Pay as a payment option, see Offering Apple Pay.

A row of four credit card logos, all of which are the same size and shape. The leftmost logo is the Apple Pay mark.

Use only the artwork provided by Apple, with no alterations other than height. You can specify a height for the Apple Pay mark, but make sure that the height you use is equal to or larger than other payment brand marks in your payment flow. Don't adjust the width, corner radius, or aspect ratio of the artwork; don’t add a trademark symbol or any other content; don’t remove the border; don't add visual effects to the mark, such as shadows, glows, or reflections; and don’t flip, rotate, or animate the Apple Pay mark.

Maintain a minimum clear space around the mark of 1/10 of its height. Don’t let the Apple Pay mark share its surrounding border with another graphic or button.

Download the Apple Pay mark graphic and full usage guidelines here.