Package Exports

@billing-js/react-billing-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@billing-js/react-billing-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
)

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()

@billing-js/react-billing-js