Article

Displaying Apple Pay Buttons

Use CSS templates to display Apple Pay buttons on your webpage.

Overview

When a user clicks or taps an Apple Pay button, it must always invoke the Apple Pay payment sheet. You can specify which button type to display and edit its appearance and size to fit your webpage. For a description of the button types and usage information, see Human Interface Guidelines > Apple Pay on the Web.

You specify the type of Apple Pay button to draw by setting the -apple-pay-button-type property to one of these values:

  • plain. For the Apple Pay button.

  • buy. For the Buy with Apple Pay button.

  • set-up. For the Set up Apple Pay button.

  • donate. For the Donate with Apple Pay button.

  • check-out. For the Check out with Apple Pay button.

  • book. For the Book with Apple Pay button.

  • subscribe. For the Subscribe with Apple Pay button.

The Set up Apple Pay button is available on the web starting in iOS 10.1 and macOS 10.12.1. See openPaymentSetup for an example of code to display the Set up Apple Pay button.

The sample code listings below use the CSS properties to draw Apple Pay buttons. The code supports devices running macOS 10.12 and later, and iOS 10 and later, by using the CSS @supports feature to determine if the -webkit-appearance: -apple-pay-button property is available. If the property is not available, the code provides the details for drawing the buttons.

Use Listing 1 to display the plain Apple Pay button.

Listing 1

Template for displaying the Apple Pay button

/* Template for logo only button (height independent). */
/* HTML */
<div class="apple-pay-button apple-pay-button-white"></div>

/* CSS */
@supports (-webkit-appearance: -apple-pay-button) { 
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }
    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 5px;
        padding: 0px;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
    }
    .apple-pay-button-black {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-white {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-white-with-line {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
        border: .5px solid black;
    } 
}

Use Listing 2 to display a Buy with Apple Pay button.

Listing 2

Template for displaying a Buy with Apple Pay button

/* Template for "Buy with" button with height: 32 */
/* HTML */
<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
  <span class="text">Buy with</span>
  <span class="logo"></span>
</div>

/* CSS */
@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button-with-text {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: buy;
    }
    .apple-pay-button-with-text > * {
        display: none;
    }
    .apple-pay-button-black-with-text {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-white-with-text {
        -apple-pay-button-style: white;
    }
    .apple-pay-button-white-with-line-with-text {
        -apple-pay-button-style: white-outline;
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button-with-text {
        --apple-pay-scale: 1; /* (height / 32) */
        display: inline-flex;
        justify-content: center;
        font-size: 12px;
        border-radius: 5px;
        padding: 0px;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
    }
    .apple-pay-button-black-with-text {
        background-color: black;
        color: white;
    }
    .apple-pay-button-white-with-text {
        background-color: white;
        color: black;
    }
    .apple-pay-button-white-with-line-with-text {
        background-color: white;
        color: black;
        border: .5px solid black;
    }
    .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-with-text > .text {
        font-family: -apple-system;
        font-size: calc(1em * var(--apple-pay-scale));
        font-weight: 300;
        align-self: center;
        margin-right: calc(2px * var(--apple-pay-scale));
    }
    .apple-pay-button-with-text > .logo {
        width: calc(35px * var(--scale));
        height: 100%;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 0 50%;
        margin-left: calc(2px * var(--apple-pay-scale));
        border: none;
    }
}
   

Use Listing 3 to display a Donate with Apple Pay, Check out with Apple Pay, Book with Apple Pay, or Subscribe with Apple Pay button. The Donate button is available on the web starting in iOS 10.2. The Check out, Book, and Subscribe buttons are available on the web starting in iOS 12.1 or in macOS 14.1 with Safari 12.0 or later.

For devices with earlier iOS or macOS versions that do not support these button types, use the plain Apple Pay button instead (see Listing 1).

Listing 3

Template for additional Apple Pay button types

/* HTML */
<div class="apple-pay-button apple-pay-button-black">
</div>

/* CSS */
.apple-pay-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: donate; /* also: check-out, book, or subscribe */
}
.apple-pay-button-black {
    -apple-pay-button-style: black;
}
.apple-pay-button-white {
    -apple-pay-button-style: white;
}
.apple-pay-button-white-with-line {
    -apple-pay-button-style: white-outline;
}

See Also

Apple Pay Buttons

Choosing Button Appearance

Choose a button color and size to suit your webpage.

Localizing Apple Pay Buttons

Set the language of an Apple Pay button.