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 Apple Pay on the Web Human Interface Guidelines.

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.

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 not, 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 button. This button is available on the web starting in iOS 10.2. For devices with an earlier iOS version that doesn't support the Donate with Apple Pay button, use the plain Apple Pay button instead (see Listing 1).

Listing 3

Template for a Donate with Apple Pay button

/* HTML */
<div class="apple-pay-donate-button apple-pay-donate-button-white-with-line">
</div>
/* CSS */
.apple-pay-donate-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: donate;
}
.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 web page.

Localizing Apple Pay Buttons

Set the language of an Apple Pay button.