Billing/Payment Service Docs

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.

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;

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

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
};

React SDK

Initial Setup