Skip to main content

​
Basic Usage

This guide assumes you have already setup the sdk in your application.
Here’s a basic example of how to use the BillingProvider and useBillingContext in your application: 
import React from 'react';
import { BillingProvider, useBillingContext } from '@locai1/billing-react-sdk';

const App = () => (
  <BillingProvider authUser={yourAuthUser} authToken={yourAuthToken}>
    <YourComponent />
  </BillingProvider>
);

const YourComponent = () => {
  const { selectedPlan, setSelectedPlan, subscription, setSubscription } = useBillingContext();

  return (
    <div>
      <h1>Selected Plan: {selectedPlan?.name}</h1>
      <h2>Subscription Status: {subscription?.status}</h2>
    </div>
  );
};

export default App;

​
Examples of Usages

  • Selecting a Plan
  • Displaying Subscription Status
import React from 'react';
import { useBillingContext } from '@locai1/billing-react-sdk';

const PlanSelector = () => {
  const { plans, selectedPlan, setSelectedPlan } = useBillingContext();

  return (
    <div>
      <h2>Select a Plan</h2>
      <select value={selectedPlan?.name} onChange={(e) => {
        const plan = plans.find(p => p.name === e.target.value);
        setSelectedPlan(plan);
      }}>
        {plans.map(plan => (
          <option key={plan.name} value={plan.name}>{plan.name}</option>
        ))}
      </select>
    </div>
  );
};

export default PlanSelector;
⌘I