Setup Customer Portal

Show the customer portal to allow your users to self-manage their subscriptions.

App/Pages/ CustomerPortal.tsx - Customer Portal component

Return the default Customer Portal Component directly

import { CustomerPortal } from "@billing-js/react-billing-js"

export default () => {
    return (
        <div>
            {/* full Customer Portal component */}
            <CustomerPortal />
        </div>
    )
}

Or create your own custom Customer Portal

Always wrap your custom customer portal with the <CustomerPortal/> component

It will automatically manage the customer session

import { CustomerPortal, CustomerProfile, Subscriptions, PaymentMethods, InvoicesHistory } from "@billing-js/react-billing-js"

export default () => {
    return (
        <div>
            {/* /!\ Always wrap your customer portal with the <CustomerPortal/> component */}
            <CustomerPortal>
                <CustomerProfile />
                <Subscriptions />
                <div>Custom component to display additional information to the user</div>
                <PaymentMethods />
                <InvoicesHistory />
            </CustomerPortal>
        </div>
    )
}

Last updated