Accept an Afterpay or Clearpay payment

Learn how to accept Afterpay (also known as Clearpay in the UK), a payment method in the US, CA, UK, AU, and NZ.

Web

Mobile

Caution

The content of this section refers to a Legacy product. You should use the Accept a payment guide for the most recent integration path instead. While Stripe still supports this product, this support might end if the product is deprecated.

Stripe users can use the Payment Intents API—a single integration path for creating payments using any supported method—to accept Afterpay payments from customers in the following countries:

Australia
Canada
New Zealand
United Kingdom
United States

Afterpay is a single use, immediate notification payment method that requires customers to authenticate their payment. Customers are redirected to the Afterpay site, where they agree to the terms of an installment plan. When the customer accepts the terms, funds are guaranteed and transferred to your Stripe account. The customer repays Afterpay directly over time.

Note

Before you start the integration, make sure your account is eligible for Afterpay by navigating to your Payment methods settings.

Set up Stripe
Server-side

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a PaymentIntent on your server and specify the amount to collect and the currency. If you already have an integration using the Payment Intents API, add afterpay_clearpay to the list of payment method types for your PaymentIntent.

You can manage payment methods from the Dashboard. Stripe handles the return of eligible payment methods based on factors such as the transaction’s amount, currency, and payment flow. The example below uses the automatic_payment_methods attribute but you can list afterpay_clearpay with payment method types. In the latest version of the API, specifying the automatic_payment_methods parameter is optional because Stripe enables its functionality by default. Regardless of which option you choose, make sure that you enable Afterpay Clearpay in the Dashboard.

Afterpay requires both shipping and billing details to be present for the payment to succeed. This integration guide suggests passing the shipping details on the server (step 2) and the billing details on the client after the customer selects their payment method (step 3).

Retrieve the client secret

The PaymentIntent includes a client secret that the client side uses to securely complete the payment process. You can use different approaches to pass the client secret to the client side.

Retrieve the client secret from an endpoint on your server, using the browser’s fetch function. This approach is best if your client side is a single-page application, particularly one built with a modern frontend framework like React. Create the server endpoint that serves the client secret:

And then fetch the client secret with JavaScript on the client side:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Additional payment method options

You can specify an optional reference parameter in the payment method options for your PaymentIntent that sets an internal order identifier for the payment. Although this isn’t typically visible to either the business or the consumer, Afterpay’s internal support team can access it during manual support requests. The identifier is limited to 128 characters and may contain only letters, digits, underscores, backslashes, and dashes.

Submit the payment to Stripe
Client-side

In this step, you’ll complete Afterpay payments on the client with Stripe.js.

Set up Stripe.js

When a customer clicks to pay with Afterpay, we recommend using Stripe.js to submit the payment to Stripe. Stripe.js is our foundational JavaScript library for building payment flows. It automatically handles complexities like the redirect described below, and enables you to easily extend your integration to other payment methods in the future. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Create an instance of Stripe.js with the following JavaScript on your checkout page.

script.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe(
  'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Rather than sending the entire PaymentIntent object to the client, use its client secret from step 2. This is different from your API keys that authenticate Stripe API requests.

You should still handle the client secret carefully because it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer.

Use stripe.confirmAfterpayClearpayPayment to handle the redirect away from your page and to complete the payment. Add a return_url to this function to specify where Stripe redirects the user after they complete the payment on the Afterpay website or mobile application.

client.js
// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}

When your customer submits a payment, Stripe redirects them to the return_url and includes the following URL query parameters. The return page can use them to get the status of the PaymentIntent so it can display the payment status to the customer.

When you specify the return_url, you can also append your own query parameters for use on the return page.

Parameter	Description
`payment_intent`	The unique identifier for the `PaymentIntent`.
`payment_intent_client_secret`	The client secret of the `PaymentIntent` object.

When the customer is redirected back to your site, you can use the payment_intent_client_secret to query for the PaymentIntent and display the transaction status to your customer.

OptionalAdd line items to the PaymentIntent

OptionalSeparate authorization and capture

OptionalHandle the Afterpay redirect manually

OptionalHandle post-payment events

OptionalTest Afterpay integration

OptionalDisplay payment method messaging on your website

Failed payments

Afterpay takes into account multiple factors when deciding to accept or decline a transaction (for example, length of time buyer has been using Afterpay, outstanding amount customer has to repay, value of the current order).

You should always present additional payment options such as card in your checkout flow, as Afterpay payments have a higher rate of decline than many payment methods. In these cases, the PaymentMethod is detached and the PaymentIntent object’s status automatically transitions to requires_payment_method.

For an Afterpay PaymentIntent with a status of requires_action, customers need to complete the payment within 3 hours after you redirect them to the Afterpay site (this doesn’t apply to declined payments). If they take no action within 3 hours, the PaymentMethod detaches and the object status for the PaymentIntent automatically transitions to requires_payment_method.

In these cases, inform your customer to try again with a different payment option presented in your checkout flow.

Error codes

These are the common error codes and corresponding recommended actions:

Error Code	Recommended Action
`invalid_amount_too_small`	Enter an amount within Afterpay’s default transactions limits for the country.
`invalid_amount_too_large`	Enter an amount within Afterpay’s default transactions limits for the country.
`payment_intent_invalid_currency`	Enter the appropriate currency. Afterpay only supports domestic transactions.
`missing_required_parameter`	Check the error message for more information about the required parameter.
`nonexistent_country`	Enter a valid two-letter ISO country code for the `country` property in the shipping and billing details.
`payment_intent_redirect_confirmation_without_return_url`	Provide a `return_url` when confirming a PaymentIntent with Afterpay.