# 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]: --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.billingjs.com/getting-started/add-to-your-app/wrap-your-app.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.