Display Afterpay or Clearpay messagingObsolète

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

Include the Element

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

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

// 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:

Lockup logo

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

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:

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

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

.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:

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.

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.

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');