See how it’s done

To demonstrate integrating your SaaS application with Bunny, we provide a sample SaaS application written in Node.js and React. This page covers installation and configuration.

The Sample SaaS app is a small to-do app that shows these integration points:

  • Creating an account, contact, tenant and trial subscription in Bunny when someone signs up for your app, with subscriptionCreate.
  • Opening the Bunny customer portal for the signed-in customer with a portal session token.
  • Showing the customer’s invoices and payments with the Transactions Bunny component.
  • Receiving and verifying webhooks from Bunny.

The code for the Sample SaaS app can be found on GitHub. Its README is the reference for the latest setup steps.

Setting it upLink to Setting it up section

Configure BunnyLink to Configure Bunny section

  1. Create a product with a plan and a price list that allows a trial. Note the price list’s code, for example notes_monthly. Every signup in the app creates a trial subscription on this price list.
  2. Go to Settings > Developers > API clients and create an API client with the standard:read, standard:write and portal:write scopes. Click Generate access token and copy the token.
  3. Go to Settings > Company > Security and add localhost to Whitelisted origin domains, so the app can load Bunny components.

Receive webhooks (optional)Link to Receive webhooks (optional) section

To see Bunny’s webhooks arrive in the app, Bunny must be able to reach it. Expose the app’s server with ngrok or similar:

ngrok http 3051

Then go to Settings > Developers > Platforms, open your platform, turn on Provisioning enabled, set the webhook URL to https://<your ngrok forwarding URL>/api/hook, and choose a Webhook signing key. The app records each webhook it receives in its events sidebar.

Install and run the appLink to Install and run the app section

The app needs Node.js 14 or later.

  1. Clone the repository:

    git clone git@github.com:bunnyapp/sample-saas.git

  2. Install the server and client dependencies:

    npm install && npm run client-install

  3. Copy .env.sample to .env in the repository root and set:
    • BUNNY_BASE_URL: https://<subdomain>.bunny.com
    • BUNNY_ACCESS_TOKEN: the access token you generated
    • BUNNY_PRICE_LIST_CODE: your price list’s code
    • BUNNY_WEBHOOK_SECRET: the platform’s webhook signing key, if you set up webhooks
    • CORS_ORIGIN: http://localhost:3000
  4. Create a .env file in the client folder and set:
    • REACT_APP_API_URL: http://localhost:3051
    • REACT_APP_BUNNY_SUBDOMAIN: your Bunny subdomain
    • REACT_APP_BUNNY_API_HOST: https://<subdomain>.bunny.com

  5. Start the server and the client together:

    npm run dev-full

You’re all set! Open http://localhost:3000 and register. The new account, contact and trial subscription appear in Bunny under Customers > Accounts.