@billing-js/react-billing-js

React Billing.js

Setup pricing page by copy pasting code snippets.

Install

index.tsx - Root component of your react app

import React from "react"
import { render } from "react-dom"
import { BillingProvider } from "react-billing-js"

const ReactApp = (
    // Wrap your app with the billing provider with your stripe account id
    <BillingProvider stripeAccount={"acct_..."}>
        <App />
    </BillingProvider>
)

render(<ReactApp />, document.getElementById("root"))

Authentification

App.tsx - Root component

import { useAuth } from "react-billing-js"
const { loading, user, signOut } = useAuth()
import { Switch, Route, Redirect, BrowserRouter as Router } from "react-router-dom"

export default (
    <Router>
        <Switch>
            <Route exact={true} path="/subscription" render={renderPrivateRoute(CustomerPortal)} />
            <Route exact={true} path="/pricing" component={PricingPage} />
            <Route exact={true} path="/login" component={Login} />
            <Redirect to="/pricing" />
        </Switch>
    </Router>
)

Login.tsx - Login page component

import { useAuth } from "react-billing-js"
const { loading, user, signIn } = useAuth()

const onSignIn = () => fetch("/URL_TO_GET_THE_TOKEN").then((token) => signIn(token))

if (loading) {
    return <div>loading...</div>
}
if (user) {
    return <div>Signed in!</div>
}
return (
    <div>
        <button onClick={onSignIn}>Sign in</button>
    </div>
)

Pricing page

import { useProducts } from "react-billing-js"

const {
    loading,
    products: [premiumPlan, businessPlan],
    pricingFilter: {
        currency: { selectedCurrency, availableCurrencies, setCurrency },
        recurrence: { selectedRecurrence, availableRecurrences, setRecurrence }
    }
} = useProducts(["prod_HnVV20md1uku4d", "prod_HpUh1IKcUFkFI8"], { signInUrl: "/login" })

Customer portal

CustomerPortal.tsx - Customer portal component

import { useAuth } from "react-billing-js"
const { loading, user, signOut } = useAuth()

Update subscription