Skip to main content
Accepting payments is a two-step process:
  1. checkout - Gets checkout information (either a Stripe Checkout URL or purchase confirmation data)
  2. attach - Enables the product and charges a saved payment method

​
Checkout

Call checkout when a customer wants to purchase a product. If no payment method is on file, a Stripe Checkout URL is returned. Otherwise, preview data (prices, proration info) is returned for the customer to confirm. 
import { useCustomer, CheckoutDialog } from "autumn-js/react";

const { checkout } = useCustomer();

<Button onClick={() => checkout({ productId: "pro", dialog: CheckoutDialog })} />

​
Attach

If checkout returned preview data (no URL), call attach after the customer confirms to charge their saved payment method and enable the product. 
import { useCustomer } from "autumn-js/react";

const { attach } = useCustomer();

<Button onClick={() => attach({ productId: "pro" })} />

​
3DS and Payment Failures

When calling attach, the payment may require additional action. Autumn will return:
CodeDescription
3ds_requiredPayment requires 3D Secure authentication
payment_failedPayment was declined (e.g., insufficient funds)
Both cases include an invoice URL. Direct the customer to this URL to complete authentication or update their payment method. Once resolved, the payment processes and the subscription activates.

​
Past Due Subscriptions

If a recurring payment fails (e.g., card expired), the subscription status becomes past_due. To resolve this:
  1. Direct the customer to the billing portal to update their payment method
  2. Once updated, Stripe will automatically retry the failed invoice
import { useCustomer } from "autumn-js/react";

const { openBillingPortal } = useCustomer();

<Button onClick={() => openBillingPortal({ returnUrl: window.location.href })} />
If you’d like to block feature access when a subscription is past_due, please contact us. We can enable a configuration flag to do this for you.