Track with Apple Wallet Button Demo

Display the Button

To display a Track with Apple Wallet Button, use the following code to load the button script into your webpage from the content delivery network:

<script async crossorigin
        src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"
        ></script>

The JavaScript Track with Apple Wallet Button provides an easy way for users to add an Order package to Wallet from the Web. You can specify the button style, type, and localization using attributes. Use CSS to set other properties, such as the size and corner radius.

The button must define an onclick handler to trigger the order package download. The handler should redirect the browser to the unique order package URL.

See Build a distributable order package section for tips on generating the Order package.

Using the official Track with Apple Wallet 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 widget shown below:

<style>
    apple-wallet-button {
        --apple-wallet-button-border-radius: 5px;
        --apple-wallet-button-height: 40px;
        --apple-wallet-button-width: 180px;
        --apple-wallet-button-padding: 0px 0px;
        --apple-wallet-button-box-sizing: content-box;
    }
</style>
<apple-wallet-button
    buttonstyle="black"
    compact="true"
    locale="en-US"
    onclick="window.location.href='https://applepaydemo.apple.com/static/order/123456789.order';"
    />