# \<BillingProvider />

`<BillingProvider />` is used to provide a state to billing so that it can store data accross your app's components.

See [wrap your app](https://docs.billingjs.com/getting-started/add-to-your-app/wrap-your-app) to see how to use this component in your app.

### Props

```typescript
interface Props {
    // your stripe account id "acct_..."
    stripeAccount: string 
    
    // switch billing between test and live mode.
    liveMode?: boolean // default false (test mode)
    
    // Additional options
    options?: BillingOptions
    
    // called when Billing has to sign out the user (ex: after transferring the account) 
    onCustomerSignedOut: () => void // default empty function
    
    // called when the user has to sign in to pay
    onCustomerSignedIn: () => void // default empty function
    
    // Called when an error occurs
    onError?: (error: Error) => void // default empty function
}

interface BillingOptions {
    // used to redirect the user when they want to 
    // update their subscription or add a new subscription
    productPageUrl?: string // default "/pricing"
    
    // used to redirect the user from the pricing page when
    // they have an active subscription
    customerPortalUrl?: string // default ""
    
    // used for the terms and conditions link in the payment modal
    termsAndConditionsUrl?: string // default "/terms"
    
    // used for the privacy policy link in the payment modal
    privacyPolicyUrl?: string // default "/privacy"
    
    // whether the link to the terms and conditions should be shown on the payment modal
    showTermsAndConditions?: boolean // default true
    
    // whether the link to the privacy policy should be shown on the payment moda
    showPrivacyPolicy?: boolean // default false
    
    // options for the cancel modal that opens when a user click on "Cancel subscription"
    cancelSubscriptionOptions?: {
        // whether the modal should be shown to the user
        // or the subscription should be canceled directly
        showModal?: boolean // default true
        
        // the message that will be displayed when the modal is opened
        cancelMessage?: string // default:
        // "Are you sure you want to cancel your subscription? 
        // You will lose access the premium 
        // features provided by your current plan."
    }
}
```


---

# 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/components/less-than-billingprovider-greater-than.md?ask=<question>
```

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.