<!--
{
  "availability" : [

  ],
  "documentType" : "symbol",
  "framework" : "ApplePayontheWeb",
  "identifier" : "/documentation/ApplePayontheWeb/ApplePayButton",
  "metadataVersion" : "0.1.0",
  "role" : "Class",
  "symbol" : {
    "kind" : "Class",
    "modules" : [
      "Apple Pay on the Web"
    ],
    "preciseIdentifier" : "cl/ApplePayButton"
  },
  "title" : "ApplePayButton"
}
-->

# ApplePayButton

An object that displays a button either to trigger payments through Apple Pay or to prompt the user to set up a card.

```
interface ApplePayButton
```

## Overview

Choose the type and style of the button and the browser shows the button with the correct content and appearance. For design guidance, see [Human Interface Guidelines > Apple Pay > Buttons and Marks](https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/buttons-and-marks/).

## Topics

### Configuring appearance

[`type`](/documentation/ApplePayontheWeb/ApplePayButton/type)

The kind of Apple Pay button, such as a button for purchasing a subscription.

[`buttonstyle`](/documentation/ApplePayontheWeb/ApplePayButton/buttonstyle)

The appearance of the Apple Pay button, such as a black button with white lettering.

[`locale`](/documentation/ApplePayontheWeb/ApplePayButton/locale)

The language and region used for the displayed Apple Pay button.

[`ApplePayButtonType`](/documentation/ApplePayontheWeb/ApplePayButtonType)

A type that indicates the button types that you can display to initiate Apple Pay transactions.

[`ApplePayButtonStyle`](/documentation/ApplePayontheWeb/ApplePayButtonStyle)

A type that indicates the available appearances for an Apple Pay Button.

[`ApplePayButtonLocale`](/documentation/ApplePayontheWeb/ApplePayButtonLocale)

A type that indicates the languages and regions that you can specify for the Apple Pay button.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)