Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
About Stripe payments
Upgrade your integration
Payments analytics
Online payments
OverviewFind your use caseManaged Payments
Use Payment Links
Build a checkout page
Build an advanced integration
Build an in-app integration
Payment methods
Add payment methods
    Overview
    Payment method integration options
    Manage default payment methods in the Dashboard
    Payment method types
    Cards
    Bank debits
    Bank redirects
    Bank transfers
    Credit transfers (Sources)
    Buy now, pay later
      Affirm
      Afterpay / Clearpay
        Accept a payment
        Site messaging
      Alma
      Billie
      Capchase Pay
      Klarna
      Kriya
      Mondu
      Payment on Invoice
      Scalapay
      SeQura
      Sunbit
      Zip
    Real-time payments
    Vouchers
    Wallets
    Enable local payment methods by country
    Custom payment methods
Manage payment methods
Faster checkout with Link
Payment interfaces
Payment Links
Checkout
Web Elements
In-app Elements
Payment scenarios
Custom payment flows
Flexible acquiring
Orchestration
In-person payments
Terminal
Other Stripe products
Financial Connections
Crypto
Climate
HomePaymentsAdd payment methodsBuy now, pay laterAfterpay / Clearpay

Display Afterpay or Clearpay messagingDeprecated

Inform customers that you accept payments with Afterpay (also known as Clearpay in the UK).

Caution

The content in this topic refers to a Legacy feature. We recommend that you use the Payment Method Messaging Element to dynamically show your customers relevant buy now, pay later payment options for a given purchase. While there isn’t a set deprecation date for the afterpayClearpayMessage Element, Stripe has halted new feature development. For US merchants, this legacy feature doesn’t comply with Cash App Afterpay branding. Learn more about Cash App Afterpay.

Let your customers know you accept payments with Afterpay by including the Afterpay messaging Element on your site. We suggest adding the messaging Element to your product, cart, and payment pages. The afterpayClearpayMessage Element takes care of:

  • Calculating and displaying the installments amount
  • Displaying the Afterpay information modal
  • Localizing text and currencies
The Making of Prince of Persia: Journals 1985-1993
Jordan Mechner
$30

Include the Element

Use Stripe Elements to include the afterpayClearpayMessage Element on your site.

If you haven’t already, include the Stripe.js script on your page by adding it to the head of your HTML file:

<script src="https://js.stripe.com/v3/"></script>

Create a placeholder element on your page where you want to mount the messaging Element:

<div id="afterpay-clearpay-message"></div>

On your product, cart, and payment pages, include the following code to create an instance of Stripe.js and mount the messaging Element:

// Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const elements = stripe.elements(); const options = { amount: 1000, // $10.00 USD currency: 'USD' }; const afterpayClearpayMessageElement = elements.create('afterpayClearpayMessage', options); afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');

Customize the message

There are many options available to customize the appearance and contents of the messaging Element. See the API reference for the full list of options.

Badge logo

Set logoType to 'badge' and use the badgeTheme option to choose between the following styles:

black-on-mint
black-on-white
mint-on-black
white-on-black

Lockup logo

Set logoType to 'lockup' and use the lockupTheme option to choose between the following styles:

black
white
mint

Note

Clearpay branding is displayed automatically based on the locale option. See Locale and currency for details.

Style with CSS

In addition to the configuration options, use CSS to style the messaging to better fit the look and feel of your site. You can customize the font-family, font-size, and color of the messaging:

CSS
.AfterpayMessage { font-family: monospace; font-size: 14px; color: blue; }

You can also control the size of the logo by setting its width and height:

CSS
.AfterpayMessage-logoSvg { width: 80px; height: auto; }

Handle ineligible items

You can’t use Afterpay for certain prohibited business categories. If you sell items in these categories, you can still display the messaging Element to clearly indicate Afterpay isn’t available.

Use the isEligible or isCartEligible options to indicate that the current product or cart isn’t eligible:

isEligible: false
isCartEligible: false

Afterpay also has default transactions limits for each country. When the provided amount exceeds these limits, the Element automatically displays ineligible price range messaging. You can customize this message by hiding the lower or upper limit with showLowerLimit and showUpperLimit.

(default)
showLowerLimit: false
showUpperLimit: false

Locale and currency

Afterpay and clearpay support the following locales and currencies:

Supported locales: en-US, en-CA, en-AU, en-NZ, en-GB

Supported currencies: USD, CAD, AUD, NZD, GBP

Afterpay’s messaging always the appropriate number of installments a user can pay based on their locale and country. For more information, see payment collection.

Set the locale of your message by passing the locale option into the options parameter of the elements group used to create the afterpayClearpayMessage Element. You can then define your currency by passing it to the element.create options directly.

JavaScript
const elements = stripe.elements({ locale: 'en-GB' }); const options = { amount: 1000, // £10.00 currency: 'GBP' }; const afterpayClearpayMessageElement = elements.create('afterpayClearpayMessage', options); afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc