@bunnyapp/components 1.0.35 → 1.0.37

package/README.md

@@ -1,6 +1,6 @@
 # ℹ️ About
 
-This repository provides components from the Bunny portal to integrate Bunny UI functionality into your application.
+This package provides components from the Bunny portal to integrate Bunny UI functionality into your application. Both CJS and ESM builds are provided.
 
 # 🧩 Components
 
@@ -8,13 +8,28 @@ This repository provides components from the Bunny portal to integrate Bunny UI
 - Quote
 - Quotes
 - PaymentMethod
+- BillingDetails
 - Transactions
 - Subscriptions (view-only mode)
+- BillingDetails
+- Signup
 
 # 📦 Install
 
 ```bash
-npm install @bunnyapp/components
+npm i @bunnyapp/components
+```
+
+```bash
+yarn add @bunnyapp/components
+```
+
+```bash
+pnpm add @bunnyapp/components
+```
+
+```bash
+bun add @bunnyapp/components
 ```
 
 Ensure all peer dependencies in the package.json are installed.
@@ -22,7 +37,12 @@ Ensure all peer dependencies in the package.json are installed.
 # ⚙️ Configuration
 
 1. Whitelist your subdomain in Bunny (e.g., `localhost` for development, `https://[company-name].bunny.com` for production).
-2. Generate a portal session token using the `portalSessionCreate` mutation from the [Bunny API docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate).
+
+   - ![How to Whitelist Domains](/images/howtowhitelistdomains.png)
+
+2. Get an access token:
+   - **API Token**: Use an API token when you want all of your Bunny data to be accessible to the components. [Create an API Client](https://docs.bunny.com/developer/getting-started/api#create-an-api-client).
+   - **Portal Session Token**: Use a portal session token when you only want data for a single Bunny account to be accessible to the components. [Create a Portal Session](https://docs.bunny.com/developer/integrate/enable-upgrades-and-payments/standalone-customer-portal). The account is baked into the portal session token, therefore there is no accountId parameter in most Bunny components.
 
 # 🔨 Usage
 
@@ -36,19 +56,13 @@ The below example shows how to use the BunnyProvider component with the Invoice
 Here the data such as the saved payment method will be updated between the components.
 
 ```tsx
-import {
-  BunnyProvider,
-  Invoice,
-  PaymentMethod,
-  Transactions,
-  Subscriptions,
-} from "@bunnyapp/components";
+import { BunnyProvider, Invoice, PaymentMethod } from "@bunnyapp/components";
 
 function App() {
   return (
-    <BunnyProvider token={token} subdomain={subdomain} window={window}>
-      <Invoice id="12345" />
-      <PaymentMethod />
+    <BunnyProvider token={token} apiHost={apiHost}>
+      <Invoice id="12345" entityId="1" />
+      <PaymentMethod entityId="1" />
     </BunnyProvider>
   );
 }
@@ -63,28 +77,53 @@ import { BunnyProvider, Invoice, PaymentMethod } from "@bunnyapp/components";
 function App() {
   return (
     <div>
-      <BunnyProvider token={token} subdomain={subdomain} window={window}>
-        <Invoice id="12345" />
+      <BunnyProvider token={token} apiHost={apiHost}>
+        <Invoice id="12345" entityId="1" />
       </BunnyProvider>
       {/* Other components */}
-      <BunnyProvider token={token} subdomain={subdomain} window={window}>
-        <PaymentMethod />
+      <BunnyProvider token={token} apiHost={apiHost}>
+        <PaymentMethod entityId="1" />
       </BunnyProvider>
     </div>
   );
 }
 ```
 
+### Using Signup
+
+The Signup component allows potential customers to sign up for a (paid) subscription and create an account that you can manage within Bunny.
+
+Because the Signup component will be exposed to potentially anyone on the internet, it is very important that you use a token with **ONLY** the `signup:read` and `signup:write` scopes. Providing more scopes will leave your data exposed and could lead to security issues. ![How to Create Signup Token](/images/creatingsignuptoken.png)
+
+Because Signup must use a special token, it should have its own BunnyProvider that is not a child of any other BunnyProvider.
+
+```tsx
+import { BunnyProvider, Signup } from "@bunnyapp/components";
+
+function App() {
+  return (
+    <BunnyProvider token={tokenWithSignupScope} apiHost={apiHost}>
+      <Signup
+        companyName="Acme"
+        entityId="1"
+        priceListCode="business-monthly"
+        returnUrl="https://acme.com/dashboard" // Optional, the customer will be led to this url after signing up
+      />
+    </BunnyProvider>
+  );
+}
+```
+
 ## Parameters
 
 - `token`: Token that allows access to the Bunny API. Generate this using `portalSessionCreate` from [docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate)
-- `subdomain`: The subdomain the components will make requests to. e.g. `https://acme.bunny.com`
-- `window`: The window to use for the BunnyProvider. We use the window for handling payment objects.
+- `apiHost`: The API host the components will make requests to. e.g. `https://acme.bunny.com`
+- `entityId`: This is the id of the Bunny entity that you want to make requests to. An entity is different from an account. [Entity docs](https://docs.bunny.com/guide/tour/entities)
 
 ## Development
 
 To run the development server, run `npm run dev`.
 
-### Storybook stories
+#### Storybook stories
 
 To view the storybook stories, run `npm run storybook`.