---
title: Adding a Track with Apple Wallet button
framework: applepayontheweb
role: article
role_heading: Article
path: applepayontheweb/adding-a-track-with-apple-wallet-button
---

# Adding a Track with Apple Wallet button

Configure and style an Apple Wallet Button to match your website.

## Overview

Overview In iOS 17.0 and later and macOS 14.0 and later, Apple Wallet order tracking is available on the web and provides a variety of button types that you can use on your website. You can specify the Track with Apple Wallet button style, compactness, and localization using attributes that you supply to the JavaScript function that displays the button. Add the Apple Pay JavaScript API to the page header To display an Track with Apple Wallet button, add the following script tag to your webpage’s head tag to load the Apple Pay JavaScript API: <head>     <script async crossorigin        src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js">     </script> </head> The script tag contains the URL that loads the apple-pay-sdk.js, from the Apple Pay JS CDN. The script tag includes two additional attributes: Additionally, ensure that your website allows a Content Security Policy for Apple Pay JS to function properly. Add a standard Apple Wallet button To display the button, add an apple-wallet-button tag to your webpage and set the buttonstyle, compact, locale, and onclick parameters. For example, this call into the Apple Pay JavaScript library provides details necessary for rendering the button localized to the US, and uses the default compactness and style: <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="addOrder();"  /> See Build a distributable order package in Apple Pay Order Tracking Demo for tips on generating the Order Package. To protect user privacy, ensure the package URL the merchant system generates uses the same authenticated user session and implements the following policies, with regard to package URLs: It’s not possible to guess the next order package URL automatically. It’s not possible to scrape order packages anonymously. It’s not possible for a user to download an order package that belongs to a different user, even if they find out the order package’s URL. Customize an Apple Wallet Button There are several options for customizing the button’s attributes:  |  |   |  |   |  |   |  |   |  |  To customize the button’s styling, use the following:  |  |   |  |   |  |   |  |   |  |   |  |  Determine sizing requirements For sizing requirements for the Track with Apple Wallet button, along with other design guidelines, see Apple Pay in the Human Interface Guidelines.