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.
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 instalment 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 StripeServer-sideClient-side
Server-side
This integration requires endpoints on your server that talk to the Stripe API. Use our official libraries for access to the Stripe API from your server:
Client-side
The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):
Next, install some other necessary dependencies:
- For iOS, go to the ios directory and run pod installto ensure that you also install the required native dependencies.
- For Android, there are no more dependencies to install.
Note
We recommend following the official TypeScript guide to add TypeScript support.
Stripe initialisation
To initialise Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialisation method. Only the API publishable key in publishableKey is required. The following example shows how to initialise Stripe using the StripeProvider component.
import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > {/* Your app code here */} </StripeProvider> ); }
Create a PaymentIntentServer-sideClient-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.
Server-side
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_ to the list of payment method types for your PaymentIntent.
Client-side
Included in the returned PaymentIntent is a client secret, which the client side can use to securely complete the payment process instead of passing the entire PaymentIntent object. On the client, request a PaymentIntent from your server and store its client secret.
const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', payment_method_types: ['afterpay_clearpay'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };
Collect payment method detailsClient-side
Afterpay requires billing details to be present for the payment to succeed. In your app, collect the required billing details from the customer:
- Full name (first and last)
- Email address
- Full billing address
Additionally, while shipping details aren’t required they can help improve authentication rates. To collect shipping details, collect the following from the customer:
- Full name
- Full shipping address
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { email, phone: '+48888000888', addressCity: 'Houston', addressCountry: 'US', addressLine1: '1459 Circle Drive', addressLine2: 'Texas', addressPostalCode: '77063', name: 'Jenny Rosen', }; // Shipping details are optional but recommended to pass in. const shippingDetails: PaymentMethodCreateParams.ShippingDetails = { addressLine1: '1459 Circle Drive', addressCountry: 'US', addressPostalCode: '77063', name: 'Jenny Rosen', }; // ... }; return ( <Screen> <TextInput placeholder="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }
Submit the payment to StripeClient-side
Retrieve the client secret from the PaymentIntent you created and call confirmPayment. 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.
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { // ... const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'AfterpayClearpay', paymentMethodData: { billingDetails, // Shipping details are optional but recommended to pass in. shippingDetails, }, }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}`, ); } }; return <Screen>{/* ... */}</Screen>; }
OptionalHandle deep linking
When a customer exits your app (for example to authenticate in Safari or their banking app), provide a way for them to automatically return to your app. Many payment method types require a return URL. If you don’t provide one, we can’t present payment methods that require a return URL to your users, even if you’ve enabled them.
To provide a return URL:
- Register a custom URL. Universal links aren’t supported.
- Configure your custom URL.
- Set up your root component to forward the URL to the Stripe SDK as shown below.
Note
If you’re using Expo, set your scheme in the app. file.
import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( <View> <AwesomeAppComponent /> </View> ); }
For more information on native URL schemes, refer to the Android and iOS docs.
OptionalAdd line items to the PaymentIntent
You can optionally accept line item data to provide more risk signals to Afterpay. This feature is currently in private beta. To request access, contact us.
OptionalSeparate authorization and capture
Unlike separate authorisation and capture for card payments, Afterpay charges the customer the first instalment of the payment at the time of authorisation. You then have up to 13 days after authorisation to capture the rest of the payment. If you don’t capture the payment in this window, the customer receives a refund of the first instalment, and they aren’t charged for any further instalments. In these cases, Stripe also cancels the PaymentIntent and sends a payment_intent.canceled event.
If you know that you can’t capture the payment, we recommend cancelling the PaymentIntent instead of waiting for the 13-day window to elapse. Proactively cancelling the PaymentIntent immediately refunds the first instalment to your customer, avoiding any confusion about charges on their statement.
Tell Stripe to authorize only 
To indicate that you want separate authorisation and capture, set capture_method to manual when creating the PaymentIntent. This parameter instructs Stripe to only authorise the amount on the customer’s Afterpay account.
Upon authorisation success, Stripe sends a payment_intent.amount_capturable_updated event. Check out our Events guide for how it may help.
Capture the funds 
After the authorisation succeeds, the PaymentIntent status transitions to requires_. To capture the authorised funds, make a PaymentIntent capture request. The total authorised amount is captured by default – you can’t capture more than this, but you can capture less.
Optional Cancel the authorisation
If you need to cancel an authorisation, you can cancel the PaymentIntent.
OptionalHandle post-payment events
Stripe sends a payment_intent.succeeded event when the payment completes. Use the Dashboard, a custom webhook, or a partner solution to receive these events and run actions, like sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow.
Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events also helps you accept more payment methods in the future. Learn about the differences between all supported payment methods.
- Handle events manually in the Dashboard - Use the Dashboard to View your test payments in the Dashboard, send email receipts, handle payouts or retry failed payments. 
- Build a custom webhook - Build a custom webhook handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. 
- Integrate a prebuilt app - Handle common business events, such as automation or marketing and sales, by integrating a partner application. 
OptionalTest Afterpay integration
Test your Afterpay integration with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent will transition from requires_ to succeeded.
To test the case where the user fails to authenticate, use your test API keys and view the redirect page. On the redirect page, click Fail test payment. The PaymentIntent will transition from requires_ to requires_.
For manual capture PaymentIntents in testmode, the uncaptured PaymentIntent will auto-expire 10 minutes after successful authorization.
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_.
For an Afterpay PaymentIntent with a status of requires_, 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_.
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 | 
|---|---|
| payment_ | A generic failure indicating the Afterpay checkout failed. This can also be a decline which does not appear as a decline error code. | 
| payment_ | Afterpay declined the customer’s payment. As a next step, the customer needs to contact Afterpay for more information. | 
| payment_ | The customer never completed the payment on Afterpay’s checkout page and the payment session has expired. Stripe automatically expires PaymentIntents that aren’t successfully authorised 3 hours after initial checkout creation. | 
| payment_ | Afterpay experienced a service related error and is unable to complete the request. Retry at a later time. | 
| amount_ | Enter an amount within Afterpay’s default transactions limits for the country. | 
| amount_ | Enter an amount within Afterpay’s default transactions limits for the country. |