<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 to see how to use this component in your app.

Props

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."
    }
}

Last updated