Billing.js
  • Introduction
  • Features
  • Getting started
    • Installation
    • Add to your app
      • Wrap your app
      • Setup Pricing page
      • Setup Customer Portal
    • Configure Webhooks and Triggers
      • Subscription webhook
      • Customer Webhook
      • New user trigger
  • Guides
    • Single Sign-On
    • Shared subscriptions
    • Local currency support
    • Automatic Dispute Response
  • Components
    • <BillingProvider />
    • Pricing Page
      • <PaymentField />
      • <PaymentSummary />
      • <PromotionCode />
      • <PaymentModal />
    • Customer Portal
      • <CustomerProfile />
      • <Subcriptions />
      • <ManageSharedSubscriptionModal />
      • <PaymentMethods />
      • <Invoices />
  • Hooks
    • useAuth
    • useProducts
  • Methods
    • Product
      • getProducts
    • Customer
      • getCustomerSubscriptions
      • getCustomerPaymentMethods
      • getCustomerInvoices
    • Subscription
      • addSubscription
      • cancelSubscription
      • updateSubscription
    • Payment Method
      • attachPaymentMethodToCustomer
      • detachPaymentMethodFromCustomer
      • setPaymentMethodAsDefault
    • Shared Subscription
      • getSharedSubscription
      • getSharedSubscriptionUsers
      • updateSharedSubscriptionUsers
Powered by GitBook
On this page

Was this helpful?

  1. Getting started
  2. Add to your app

Setup Customer Portal

PreviousSetup Pricing pageNextConfigure Webhooks and Triggers

Last updated 2 years ago

Was this helpful?

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

// 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>
    )
}
App
Pages