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 methods

• Invoice - show and pay an invoice

• Signup - Sign up for a new subscription

• Subscriptions - view, upgrade, downgrade and cancel subscriptions

• Quote - show and accept a quote

• Quotes - show a list of quotes

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

• PaymentForm - 🛑 Do not use 🛑 It is used within Bunny and is not intended for external use.

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 BillingDetails components.

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

function App() {
  return (
    <BunnyProvider token={token} apiHost={apiHost}>
      <Invoice id="12345" />
      <BillingDetails />
    </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 BillingDetails component.

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

function App() {
  return (
    <div>
      <BunnyProvider token={token} apiHost={apiHost}>
        <Invoice id="12345" />
      </BunnyProvider>
      {/* Other components */}
      <BunnyProvider token={token} apiHost={apiHost}>
        <BillingDetails />
      </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