Components overview

The easiest way to integrate Bunny in your application is via Bunny Components. These are discrete React components that perform different functions.

• BillingDetails - update account details, billing address and payment method

• Invoice - show and pay an invoice

• PaymentMethod - update account payment method

• Signup - Sign up for a new (paid) subscription

• Subscriptions (view only) - show a list of subscriptions

  • Subscription management (ie upgrading/changing subscriptions) is not yet supported.

• Quote - show and accept a quote

• Quotes - show a list of quotes

• Transactions - show a list of invoices, payments and refunds

Whitelist your subdomain

(e.g., localhost for development, https://[company-name].bunny.com for production).

It is important that you whitelist you're subdomains, otherwise you will get CORS errors when using the components.

Token

For most components, we recommend using a portal session token to scope the token to a single account. But if you want to view data for all accounts, use an API token.

Please read this to learn how to generate a token for the components, and to learn whether you need an API token or a portal session token.

Usage

In order to use any of the components, you must wrap them in the BunnyProvider component. The BunnyProvider component provides all the state management and context for the components and keeps state up to date between all the components.

To keep data consistent across multiple components, you should use a single BunnyProvider as a parent.

The below example shows how to use the BunnyProvider component with the Invoice and PaymentMethod components.

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

function App() {
  return (
    <BunnyProvider token={token} apiHost={apiHost}>
      <Invoice id="12345" entityId="1" />
      <PaymentMethod entityId="1" />
    </BunnyProvider>
  );
}

In this example, each component has their own BunnyProvider. This is not recommended as it will create a mismatch in the state between each of the components. ie if a payment method is saved in the Invoice component, it will not automatically be available in the PaymentMethod component.

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

function App() {
  return (
    <div>
      <BunnyProvider token={token} apiHost={apiHost}>
        <Invoice id="12345" entityId="1" />
      </BunnyProvider>
      {/* Other components */}
      <BunnyProvider token={token} apiHost={apiHost}>
        <PaymentMethod entityId="1" />
      </BunnyProvider>
    </div>
  );
}

Parameters

• token: Token that allows access to the Bunny API. Learn which kind of token you need here.
• apiHost: The API host the components will make requests to. e.g. https://acme.bunny.com

• entityId: This is the id of the Bunny legal entity that you want to make requests to. An entity is different from an account. Entity docs