> This page is for Afterpay Button Documentation.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

## stoplight-id: 9guazr628s99t

# Changing the Appearance

Select from a number of different variants:

---

| Attribute | Value   | Preview                                                                 |
| :-------- | :------ | :---------------------------------------------------------------------- |
| text      | Buy-now | ![](/_fern-img/2c9ca2fe5417dc18202672f84df4655c4770af7f9a4642687b4eaaf981a43cd4.webp) |
| text      | Pay-now | ![](/_fern-img/6ce1e80ad040c7fb4cee668f2182c45c9487d13cfb42856f3a19e3c1db72b61d.webp) |

### Other variants:

| Text/Theme  | black-on-mint                                                                  | mint-on-black                                                              | white-on-black                                                                    | white-mint-on-black                                                              |
| :---------- | :----------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- |
| pay-now     | ![](/_fern-files/afterpay.docs.buildwithfern.com/258aa86deeb2cee81b14ec63328cc6e2dbdec1ea92468f8ea5fb1aa58be34bfd/afterpay-button-dev-docs/assets/images/black-on-mint_paynow.svg)      | ![](/_fern-files/afterpay.docs.buildwithfern.com/e9bc0952940e9feb0960cd4cfdcbf3ab675cba3c022f9f92655f3b8e40fa6969/afterpay-button-dev-docs/assets/images/mint-on-black_paynow.svg)  |                                                                                   |                                                                                  |
| place-order | ![](/_fern-files/afterpay.docs.buildwithfern.com/2363b7d8d745bf10f9c2007057ce1824b5e1bca42206dea35b1d658ff0829af4/afterpay-button-dev-docs/assets/images/black-on-mint_place_order.svg) |                                                                            | ![](/_fern-files/afterpay.docs.buildwithfern.com/0fa9f4b72cd81e47cb7da78abad71b75377ed8a0611df877adef209db7c9faf7/afterpay-button-dev-docs/assets/images/white-on-black_placeorder.svg)    |                                                                                  |
| checkout    | ![](/_fern-files/afterpay.docs.buildwithfern.com/6e21407992d227bc487ee0d29fe810eca8a92cc25861d06ec48d87de1caafd35/afterpay-button-dev-docs/assets/images/black-on-mint_checkout.svg)    |                                                                            | ![](/_fern-files/afterpay.docs.buildwithfern.com/984b666d598828f492db7032a4e44a4953603aa12f74ff5106bb8fa6f8ffeb08/afterpay-button-dev-docs/assets/images/white-mint-on-black_checkout.svg) |                                                                                  |
| buy-now     | ![](/_fern-files/afterpay.docs.buildwithfern.com/b15a009bca19516862c57de11bdf767e2923028127750bd4f48e7e555558b651/afterpay-button-dev-docs/assets/images/black-on-mint_buynow.svg)      |                                                                            | ![](/_fern-files/afterpay.docs.buildwithfern.com/391fb139b1e1c05199959305ffe94b809684c12c8650cd56abd1c7e85f4a7baa/afterpay-button-dev-docs/assets/images/white-on-black_buynow.svg)        |                                                                                  |
| shop-now    | ![](/_fern-files/afterpay.docs.buildwithfern.com/7700eff4210f49959e422594bbf87e0ee4aa07cfdea60f4fe2d9c8b6f1c3a9d2/afterpay-button-dev-docs/assets/images/black-on-mint_shopnow.svg)     | ![](/_fern-files/afterpay.docs.buildwithfern.com/ae5d57847fefcb98e480926a85f5d9a9224bf2c939cd36b8d78447f4552fe59c/afterpay-button-dev-docs/assets/images/mint-on-black_shopnow.svg) |                                                                                   | ![](/_fern-files/afterpay.docs.buildwithfern.com/b668ea2f2231bc5b664e882169bb5cbc7a73b31cc0126cbee727752208c2cd52/afterpay-button-dev-docs/assets/images/white-mint-on-black_shopnow.svg) |

### Examples

```html
<afterpay-button text="buy-now" theme="white-on-black" merchantpublickey="..." ></afterpay-button>
```

\


```html
<afterpay-button text="pay-now" theme="white-mint-on-black" merchantpublickey="..." ></afterpay-button>
```

---

> **Default values**
>
> When the `text` and/or `theme` attribute is not provided, the button displays the "Buy now with Afterpay" option
>
> <details>
>   <summary>
>     View Example
>   </summary>
>
>   ```html
>   <afterpay-button merchantpublickey="..." ></afterpay-button>
>   ```
>
>   ![](/_fern-files/afterpay.docs.buildwithfern.com/b15a009bca19516862c57de11bdf767e2923028127750bd4f48e7e555558b651/afterpay-button-dev-docs/assets/images/black-on-mint_buynow.svg)
> </details>

> **Note**
>
> The information on this page also applies to Clearpay (UK).