Skip to main content
This guide assumes you have already installed the @locai1/billing-react-sdk package in your project.
After installing the @locai1/billing-react-sdk package, you need to set up the billing context and reducer in your application. This guide will help you with the initial setup.
1

Add billingReducer to Your Global Reducer

Ensure the billingReducer is included in your global reducer setup:
import { combineReducers } from 'redux';
import billingReducer from '@locai1/billing-react-sdk/toolkit/billing.slice';
// other reducers
// example: import authReducer from './auth/auth.slice';
// example: import chatReducer from './chat/chat.slice';

const rootReducer = combineReducers({
  billing: billingReducer,
  // other reducers
  // example: auth: authReducer,
  // example: chat: chatReducer,
});

export default rootReducer;
2

Wrap Your Application with BillingProvider

Import and wrap your application or the relevant part of your application with the BillingProvider:
import React from 'react';
import ReactDOM from 'react-dom';
import { BillingProvider } from '@locai1/billing-react-sdk';
import App from './App';

ReactDOM.render(
  <BillingProvider authToken={yourAuthToken}>
    <App />
  </BillingProvider>,
  document.getElementById('root')
);
3

Access Context Values

Use the useBillingContext hook to access the context values in your components:
import React from 'react';
import { useBillingContext } from '@locai1/billing-react-sdk';

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

  // Your component logic here
};