<Checkout />

Embed the Checkout component to let an existing Bunny account subscribe to a price list in one step, using a portal session token.

<Checkout /> lets an existing account subscribe to a price list. To sign up someone who has no account yet, use Signup.

It needs a portal session token for the account.

import { BunnyProvider, Checkout } from "@bunnyapp/components";

function App() {
  return (
    <BunnyProvider token={portalSessionToken} apiHost={apiHost}>
      <Checkout
        priceListCode="business-monthly"
        defaultCouponCode="FREECARROTS2025"
        form={{
          defaultValues: { firstName: "John", lastName: "Doe" },
        }}
        callbacks={{ onPaymentSuccess: () => console.log("Subscribed!") }}
        appearance={{ variables: { colorPrimary: "#14532d" } }}
      />
    </BunnyProvider>
  );
}

PropsLink to Props section

• priceListCode: The code of the price list to subscribe to.
• enableTrial: If the price list allows a trial, start the subscription as a trial.
• defaultCouponCode: A coupon code to apply when the checkout opens.
• documentTemplateId: A document template to render the quote with. When set, the quote PDF is shown under the summary.
• form: Configures the form.
  • defaultValues: Values for the form fields (email, firstName, lastName, accountName, billingCountry, billingState, billingCity, billingZip, billingStreet, taxNumber). They are merged over the account’s own details.
  • requiredBillingDetails: The optional fields to show and require (firstName, lastName, accountName, billingStreet, billingCity, billingState, billingZip, taxNumber). Email is always shown.
  • disabledFields: Fields the customer cannot edit. Give each one a default value, because a required disabled field without a value blocks the checkout.
• callbacks.onPaymentSuccess: Called when the subscription has been checked out, whether it was paid or free or a trial.

Like every component, it also accepts appearance (Styling) and style for positioning.

What happens on successLink to What happens on success section

The component shows a confirmation that includes the plan (or the start of the trial), the amount paid, the payment method and the next billing date, and says an invoice has been emailed. In Bunny, the account is subscribed to the price list and the invoice is created.