<Signup />

If you have products or plans that you want anyone (outside your organization) to be able to sign up for, you can set up the Signup component on your website.

Create an API Client with limited scopes

1. Go to Settings > API Clients in Bunny

2. Create a new client and only grant the following scopes:

   • signup:read

   • signup:write

   Important: Do not add any other scopes. This ensures you don’t unintentionally expose broader data in Bunny to the public.

3. Copy the token (the client’s access token), as you’ll need it to construct the URL.

For more detailed instructions on creating and managing API clients, click here.

Usage

Because Signup must use a special token, it should have its own BunnyProvider that is not a child of any other BunnyProvider. The default parameters like defaultFirstName, defaultLastName, etc will have their value inserted by default into the signup fields. If a valid coupon code is passed in for couponCode parameter, it will automatically be applied for the customer.

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

function App() {
  return (
    <BunnyProvider token={tokenWithSignupScope} apiHost={apiHost}>
      <Signup
        priceListCode="business-monthly"
        returnUrl="https://acme.com/dashboard" // The customer will be led to this url after signing up
        couponCode="FREECARROTS2025"
        defaultFormValues={{
          firstName: 'John',
          lastName: 'Doe',
          email: '[e-mail]',
          accountName: 'Example Account',
          billingCountry: 'US',
          billingState: 'New York',
          billingCity: 'New York',
          billingZip: '10001',
          billingStreet: '123 Main St',
          taxNumber: 'US-12345678',
        }}
        requiredBillingDetails={{ // Specify billing details that should be collected during signup
          billingCountry: true,
          billingState: true,
          billingCity: true,
          billingZip: true,
          billingStreet: true,
          taxNumber: true
        }}
        // Require a payment hold before quote is accepted. Once accepted the hold amount is collected.
        paymentRequiredToAcceptQuote=true
        documentTemplateId="1" // A document template to apply to quote
      />
    </BunnyProvider>
  );
}

Using signup with an existing account

To do this, simply replace the signup token with a portal session token (portalSessionCreate). <Signup /> will automatically see that the token references an existing account and load existing account data into the component.

Using signup on your portal page

Instead of embedding the Signup component and creating your own page, you can do this easily with the Bunny portal page. Refer to these docs.

What happens after signup?

After a user arrives at the Bunny signup page and submits the form, two outcomes are possible:

1. User completes the form but does not make a payment

   • A new account of type “prospect” is created in Bunny.

   • No subscription is created, since no payment was made.

   • You can configure follow-up workflows (e.g., automated emails or reminders) to convert these prospects into paying customers.

2. User completes the form and makes a payment

   • A new account of type “Customer” is created in Bunny.

   • Inside this new account, Bunny will create:

     • A new billing contact, containing the user’s name and email.

     • A new tenant for the user’s data.

     • A new payment method to charge future invoices.

     • A new subscription, corresponding to the priceListCode you included in the URL.

The accounts page in Bunny. This is where all new accounts from signups will be shown.