Apple pay button styles

Apple pay button styles

The system provides several Apple Pay button types and styles you can use in your app or website. In contrast to the Apple Pay buttons, you use the Apple Pay mark to communicate 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.

Button Types

Apple provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience.

Use the Apple-provided APIs to create Apple Pay buttons. When you use the system-provided APIs, 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
• A system-provided alternative text label that lets VoiceOver describe the button

Payment button type	Example usage
	An area in an app or website where people can make a purchase, such as a product detail page or shopping cart page.
	An app or website that lets people pay bills or invoices, such as those for a utility — like cable or electricity — or a service — like plumbing or car repair.
	An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text Check out.
	An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text Continue with.
	An app or website that helps people book flights, trips, or other experiences.
	An app or website for an approved nonprofit that lets people make donations.
	An app or website that lets people purchase a subscription, such as a gym membership or a meal-kit delivery service.
	An app or website that uses the term reload to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that uses the term add money to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that uses the term top up to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that lets people place orders for items like meals or flowers.
	An app or website that lets people rent items like cars or scooters.
	An app or website that uses the term support to help people give money to projects, causes, organizations, and other entities.
	An app or website that uses the term contribute to help people give money to projects, causes, organizations, and other entities.
	An app or website that lets people tip for goods or services.
	An app or website that has stylistic reasons to use a button that can have a smaller minimum width or that doesn’t specify a call to action. If you choose a payment button type that isn’t supported on the version of the operating system your app or website is running in, the system may replace it with this button.

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

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.

Button Styles

Beginning in iOS 14 and macOS 11, you can use the automatic style to let the current system appearance determine the appearance of the Apple Pay buttons in your app (for developer guidance, see PKPaymentButtonStyle.automatic). If you want to control the button appearance yourself, you can use one of the following options. For web developer guidance, see ApplePayButtonStyle.

Black

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

Источник

Apple pay button styles

Offer Apple Pay on all devices that support it. If the device doesn’t support Apple Pay, don’t present Apple Pay as a payment option.

If you use Apple Pay APIs to find out whether the user has an active card in Wallet, you must make Apple Pay the primary — but not necessarily sole — payment option everywhere you use the APIs. For example, you might pre-select Apple Pay as the payment option when you display it alongside other options. For developer guidance, see PKPaymentAuthorizationController (iOS, watchOS) and canMakePaymentsWithActiveCard (web).

If you also offer other payment methods, offer Apple Pay at the same time. Feature Apple Pay at least as prominently as the other options on every page or screen that offers or accepts payment methods.

If you use an Apple Pay button to trigger the Apple Pay payment process, you must use the Apple-provided API to display it. Unlike a button graphic, the buttons produced by the API always have the correct appearance and are localized automatically. On devices running older systems that support Apple Pay on the web but don’t include the API, use the recommended CSS to display the buttons on your website, as described in Displaying Apple Pay Buttons.

If you use a custom button to trigger the Apple Pay payment process, make sure your custom button does not display “Apple Pay” or the Apple Pay logo. In this scenario, you must let people know that you accept Apple Pay by displaying the Apple Pay mark or referencing Apple Pay in text on the same page that displays your payment button.

Use Apple Pay buttons only to trigger the Apple Pay payment process and, when appropriate, the Apple Pay set up process. When users choose an Apple Pay button to make a purchase, but their device doesn’t have Apple Pay set up, they’re given the opportunity to set up Apple Pay. Don’t use Apple Pay buttons in any other ways.

Don’t disable or hide an Apple Pay button. If an Apple Pay button can’t be used yet, such as when a product size or color hasn’t been selected, gracefully point out the problem after the user taps or clicks the button.

Use the Apple Pay mark only to communicate that Apple Pay is accepted. The mark doesn’t facilitate payment. Never use it as a payment button or position it as a button. When using the Apple Pay mark to indicate Apple Pay as the selected payment method, you can create a separate custom button conforming to your app’s design to initiate the Apple Pay payment.

Inform search engines that Apple Pay is accepted on your website. If your website uses semantic markup to provide product details to search engines, list Apple Pay as a payment option.

For app developer guidance, see Apple Pay. For website developer guidance, including how to determine whether Apple Pay on the web is available, see Apple Pay on the Web.

Источник

Apple Pay Buttons in CSS

You don’t have to design your own buttons for Apple Pay. In fact, Apple literally tells you that you can’t. So, what are you to do on the web? Thankfully, Apple has provided a way. It’s kinda weird and involves a bunch of proprietary CSS properties and values, but whattyagonnado.

They have documentation for all of this but I’ll port it here so you can see actual demos.

Here’s the exact code they offer:

Works fine in Safari, but Chrome and Firefox are properly confused.

Not terribly surprising, as it uses backgrounds like -webkit-named-image(apple-pay-logo-white); in the @supports not (-webkit-appearance: -apple-pay-button) scenario, which I can’t imagine anyone but Apple implementing.

Plus… they are suggesting an empty

We can flop them over to a without too much trouble. Just had to add border: 0; for Firefox.

I’d like to make them more like…

But then we get:

But we can text-indent: -9999px; that away then make sure we set the color properly so we have acceptable semantic buttons.

But more likely… I’d suspect to see:

As in, why show that area at all if you’re in a browser that doesn’t support that payment method.

Their other demos have similar problems. For example, the “Buy With” button gives you:

Which 1) is not a button and 2) doesn’t have complete text in it to say what’s going on.

Just a heads up. I wouldn’t say don’t use it, but I would say take a minute to clean up the HTML and get the styling right so it’s cross-browser compatible.

Источник

Apple Pay on the Web
Interactive Demo

Try an Apple Pay test transaction using the button below.
Transactions made on this site do not charge your card.

Overview

Use this page to learn how to enable Apple Pay on the web using Apple Pay JS or the Payment Request API. This demo preconfigures the Apple Pay button below with default values. Explore further by modifying values in the code blocks throughout the page to customize payment sheet experiences. This demo displays a transcript of server responses after each transaction for context. Click or tap the the «Show Transcript» tab to view the transaction transcript.

As well as letting you try out the Apple Pay JavaScript APIs, this demo can also serve as a tutorial for your own implementation. It assumes you have already set up your environment to process Apple Pay transactions, and are familiar with Apple Pay best practices. Before starting your integration, we recommend reviewing Getting Started with Apple Pay and the Apple Pay on the Web Human Interface Guidelines. For more information about supporting Apple Pay on your website, see Apple Pay on the Web.

This demo generates source code that you can copy into your own project. Click or tap the the «Show Source» tab to view the source code. The demo updates the source code as you change values in the code blocks through the page. Once you are happy with the configuration, click or tap the «Copy» button inside the «Show Source» tab to copy the source code to your clipboard.

Requirements

This demo uses Apple Pay JS version 3, and to run this demo you must be using:

• iOS devices running iOS 11 or later
• Safari 11 on macOS 10.13 or later

Display an Apple Pay button

To display an Apple Pay Button, use the following code to load the button script into your webpage from the content delivery network:

The JavaScript Apple Pay button provides a variety of Apple Pay button types that you can use on your website to initiate a transaction. You can specify the Apple Pay button style, type, and localization using attributes. Use CSS to set other properties, such as the size and corner radius. Using the official Apple Pay button element ensures your site will display the latest style, render correctly across devices, and follow Apple Guidelines. For design guidance, see Human Interface Guidelines > Apple Pay > Buttons and Marks.

Try it: Display Settings

Use the following tools to try the different display settings on the button shown below:

Button Corner Radius

Corner Radius: 3px

Button Padding Y

Button Padding Y: 0px

Button Padding X

Button Padding X: 0px

Button Box Sizing

Create a Payment Request

When your customer clicks or taps the Apple Pay button, you must first construct an ApplePaySession object which includes the ApplePayPaymentRequest dictionary detailing the transaction details the payment sheet will display.

The ApplePayPaymentRequest requires details including: the total payment for the transaction, the currency, and the supported payment networks. You can optionally pass lineItems to show additional charges and discounts, and shippingMethods to allow the customer to choose from different shipping options. If you require address or contact details from your customer, request them by passing values in the requiredShippingContactFields or requiredBillingContactFields .

Try it: ApplePayPaymentRequest

Modify the values in the ApplePayPaymentRequest shown below and click or tap the Apple Pay button to view the payment sheet. Choose Basic Request to see a payment sheet with only the required fields. Choose Detailed Request to show code including optional fields, such as lineItems.

Complete Merchant Validation

Before being able to display the payment sheet to the customer, you must generate a valid payment session by interacting with Apple Pay Servers. For security reasons, your server must do this, not your browser client code, unlike everything else in this demo. To start the merchant validation process, call the begin method on the session object you created above.

Once you do, the browser will invoke your onvalidatemerchant handler, which must fetch a merchant session from your server.

Refer to the instructions in Requesting an Apple Pay Payment Session document to implement your server endpoint responsible for fetching the merchant session object from Apple Pay servers. If successful, Apple Pay servers will return a merchant session object, which your server must then pass back as the response to the browser.

Once you have the merchant session response object in the browser, you must complete your onvalidatemerchant handler by passing that object to the completeMerchantValidation method on the session object. The browser will then display the payment sheet.

The following code shows an example of how to validate merchant:

Respond to Payment Sheet Interactions

After merchant validation is complete, Apple Pay provides the information about your customer’s payment sheet selections so that you can calculate the final transaction cost. The final details of a transaction may depend on user payment method, billing address, shipping address, or shipping method. To handle these adjustments, implement the optional handlers onpaymentmethodselected , onshippingmethodselected , and onshippingcontactselected . When the browser calls one of these handlers, you have 30 seconds to process it and call the corresponding callback function, otherwise the transaction times out. All callbacks accept an object with newTotal (required) and newLineItems (optional) keys. In addition, you may specify newShippingMethods to update shipping methods, and errors to indicate problems with the user’s selected shipping address when calling completeShippingContactSelection . You may also call the callbacks with an empty object or null value if the payment sheet needs no changes.

Event Handlers	Callback Function	Update Structure	Update Properties
onpaymentmethodselected	completePaymentMethodSelection	ApplePayPaymentMethodUpdate	newTotal (required) newLineItems (optional)
onshippingmethodselected	completeShippingMethodSelection	ApplePayShippingMethodUpdate	newTotal (required) newLineItems (optional)
onshippingcontactselected	completeShippingContactSelection	ApplePayShippingContactUpdate	newTotal (required) newLineItems (optional) newShippingMethods (optional) errors (optional)

Demo Note: The test transaction always passes in a default success response when it calls completePaymentMethodSelection . The test transaction passes in newLineItems and newTotal when it calls completeShippingMethodSelection . See responses in the transcript.

Request a Shipping Address

If you pass requiredShippingContactFields in the payment request with a postalAddress value, Apple Pay provides redacted address information before the user authenticates the transaction. After the user authenticates, Apple Pay provides the full contact information.

The redacted payment information includes only the data needed to complete required transaction tasks, such as calculating taxes or shipping costs, and may differ based on the user’s geographic region.

The following code shows an example of a redacted payment information:

Try it: completeShippingContactSelection

Choose ‘Success’ with or without updating line items and total below. Choose ‘Failure’ to see completeShippingContactSelection response with custom errors. You may edit the ApplePayShippingContactUpdate response object below to experiment with different responses. Click or tap the Apple Pay button below to see how the payment sheet displays updates or address errors.

Источник