---
schema_version: "1"
id: def30d02310d25bb1d96f222ab619b73b8b1160a57a60d58cc5e5ea206c1f8f3
title: isapplepay Element
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/isml/b2c-isapplepay.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/b2c-isapplepay.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 6f0310b4839c357488b8446d06b036f5d863fbf1a04b18d7cccc3d0f87aa9f8b
products:
  - Composable Storefront
  - Salesforce APIs
---
# isapplepay Element

Use to inject a default black Apple Pay button in the HTML page.

## Syntax

```
<isapplepay
  sku = "${pdict.Product.ID}" | sku //required
  class = "dw-apple-pay-logo-black" | "dw-apple-pay-logo-white dw-apple-pay-border" // required
  id = "apple-pay-button" | "$('add-' + pdict.Product.ID + 'to-cart'}"
/>
```

- sku

  - : _Allowed data type:_ literal or expression.

    `${pdict.Product.ID}` specifies the button adds the Product with the given sku to the basket. Make sure that the Product is of a type that can be added to the basket.

- class

  - : Allowed data type: literal.

    `class` specifies the look of the button, among possible choices. Root DOM element for the button has at least the given CSS classes.

    The following CSS class names are supported for use with Apple Pay on a Salesforce B2C Commerce page when the feature is enabled:

    - `dw-apple-pay-button` added to each Apple Pay button included in the page generated by B2C Commerce. The default look is a black button with the Apple Pay logo and branding provided by Apple.
    - `dw-apple-pay-mini-cart` added to the Apple Pay button injected in the mini cart.
    - `dw-apple-pay-cart` added to the Apple Pay button injected in the cart page.
    - `dw-apple-pay-logo-white` can be used to indicate the alternate look, which is a white button with the Apple Pay logo and branding provided by Apple.
    - dw-apple-pay-border can be used with `dw-apple-pay-logo-white` to add a black border around the white button.

- id

  - : Allowed data type: literal or expression.

    Root DOM element for the button has the given ID attribute.

## Example

```
<isapplepay
  sku = "12345"
  class = "dw-apple-pay-logo-black"
  id = "apple-pay-button"
><isapplepay/>
```
