For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuides
HomeGuides
  • About Afterpay
    • What Is Afterpay?
    • How Does Afterpay Work?
  • Afterpay Button
      • Overview
      • Sandbox Environment
      • Add The Button
      • Process the Credit Card
      • Order Management
      • Launch
      • Changing the Appearance
    • Afterpay Messaging
  • Express Checkout
    • Express Checkout Overview
    • Adding the Afterpay Express Checkout Button
    • Process The Credit Card
    • Complete the Express Checkout Process
    • Integrated Shipping
    • Checkout Widget
  • Cash App Pay
    • Using the Cash App Pay Button
    • Getting Started
    • Advanced Rendering Control
    • Mobile Redirection
    • Customer On-File Payments
LogoLogo
On this page
  • stoplight-id: 9guazr628s99t
  • Changing the Appearance
  • Other variants:
  • Examples
Afterpay ButtonGetting Started

Changing the Appearance

Was this page helpful?
Previous

Afterpay Messaging

Next
Built with

stoplight-id: 9guazr628s99t

Changing the Appearance

Select from a number of different variants:

AttributeValuePreview
textBuy-now
textPay-now

Other variants:

Text/Themeblack-on-mintmint-on-blackwhite-on-blackwhite-mint-on-black
pay-now
place-order
checkout
buy-now
shop-now

Examples

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

1<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

View Example
1<afterpay-button merchantpublickey="..." ></afterpay-button>
Note

The information on this page also applies to Cash App Afterpay (US) and Clearpay (UK).