> For the complete documentation index, see [llms.txt](https://docs.billingjs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.billingjs.com/getting-started/add-to-your-app/wrap-your-app.md). # 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](https://tailwindcss.com/) so you will need to import those classes. {% hint style="info" %} If you are using [Tailwind](https://tailwindcss.com/) in your app too, make sure to add the Billing.js source code to your Tailwind config. [More info](/getting-started/installation.md#optional-configure-tailwind) {% endhint %} [`App`](/getting-started/add-to-your-app.md#app-structure)`/ index.tsx` - *Root component of your react app* ```tsx 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 [``](/components/less-than-billingprovider-greater-than.md) component to give it access to the Billing.js context. [`App`](/getting-started/add-to-your-app.md#app-structure)`/ 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: "demo@billingjs.com" }
            */
            //
            // 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 this page
            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"))
[^1]: