Wrap your app

Import Billing.js CSS classes

The Billing.js imports already-styled React components for you to import into your app directly.

Those components are styled with Tailwind so you will need to import those classes.

If you are using Tailwind in your app too, make sure to add the Billing.js source code to your Tailwind config. More info

App/ index.tsx - Root component of your react app

import React from "react"
import { render } from "react-dom"
import { BillingProvider } from "@billing-js/react-billing-js"

// ...

// /!\ import the billing.js styles
import "@billing-js/react-billing-js/styles.css"
// /!\ import the billing.js styles

// ...

Wrap with the context provider

Wrap your App with the <BillingProvider /> component to give it access to the Billing.js context.

App/ index.tsx - Root component of your react app

import React from "react"
import { render } from "react-dom"
import { BillingProvider } from "@billing-js/react-billing-js"

import YourApp from "./YourApp"

// /!\ import the billing.js styles /!\
import "@billing-js/react-billing-js/styles.css"

const ReactApp = (
    // Wrap your app with the billing provider with your stripe account id
    <BillingProvider
        // [Required]
        // Your stripe account id that you can find in the 
        // billing.js dashboard (https://billingjs.com)
        stripeAccount={"acct_..."}
        
        // [Optional] default to false (test mode)
        // switch between live and test mode
        liveMode={process.env.ENVIRONMENT === "production"} 
        
        // [Optional]
        options={{ 
            // URL to redirect the user when they click 
            // on the "terms and conditions" link
            termsAndConditionsUrl: "/terms", 
            // URL of the pricing page to redirect the user 
            // when they click on "Update subscription"
            productPageUrl: "/pricing" 
        }} 
        
        // [Optional]
        // getEmailHmac is called when no user is signed in and:
        // A. The user wants to access their customer portal
        // B. The user wants to update their subscription
        // C. A new user wants to start a new subscription
        //
        // This function has to return a JSON object containing the email address
        // and the corresponding hmac ({ email, hmac }). This object can be returned
        // from a Promise (like in the example below)
        // If this function returns undefined or null, Billing will ask the user
        // for their email address, send an email with a link to sign them in.
        getEmailHmac={() =>
            // to sign in as a demo you can simply directly 
            // return the following object:
            /*
            ** return { email: "[e-mail]" }
            */
            //
            // to sign in your user using SSO you need to return the email and hmac
            // you can read how to setup SSO on your backend from 
            fetch("/YOUR_BACKEND_URL_TO_GET_THE_HMAC", {
                method: 'POST',
                headers: {
                  "Content-Type": "application/json",
                  // you might need to add the access token or any other auth method
                  // in order to authenticate the user on your backend
                  "Authorization": "Bearer ..."
                }
                body: JSON.stringify({
                    email // the email address of the user you want to sign in
                })
             })
             .then((res) => ({ 
                 // return the email address
                 email: res?.data?.email, 
                 // and the corresponding HMAC signature fetched from your backend
                 hmac: res?.data?.hmac
             })
         )}

        // [Optional]
        // called when the customer has signed in on Billing
        onCustomerSignedIn={() => {}}
        
        // [Optional]
        // called when Billing has to sign out the user 
        // (ex: after transferring the account)  
        onCustomerSignedOut={() => 
            window.open("/signOut", "_self")
        }
        
        // [Optional]
        // called when an error occurred and was not handled
        onError={(error: any) => { 
            console.error(error)
            if (
                error.type === BillingErrorType.customer_not_found ||
                error.type === BillingErrorType.stripe_account_not_found
            )
                window.open("/signOut", "_self")
        }}
    >
        <YourApp />
    </BillingProvider>
)

render(<ReactApp />, document.getElementById("root"))