@noaignite/react-centra-checkout
NoA Ignite Centra helpers. Previously known as @oakwood/accelerator.
Installation
react-centra-checkout is available as an npm package.
// with pnpm
pnpm install @noaignite/react-centra-checkout
// with npm
npm install @noaignite/react-centra-checkout
// with yarn
yarn add @noaignite/react-centra-checkout
Why
This package exists to ease development of react frontend applications using the Centra Checkout API.
Most importantly, it exposes a CentraProvider
that you wrap your application with (for Next.js projects, usually in _app.js), and a set of hooks to fetch api endpoints and update the user selection.
It does not attempt to abstract the Centra api, but rather exposes the endpoints in a React way of calling them.
Getting started
Start by wrapping your applications root component with CentraProvider
and supply it with apiUrl
(the api url to your Centra checkout api), paymentReturnPage
(url to the api route in your app which handles successful payments) and paymentFailedPage
(url to the api route for failed payments) like so:
import { CentraProvider } from '@noaignite/react-centra-checkout'
<CentraProvider
apiUrl={process.env.CHECKOUT_API}
paymentReturnPage={`${process.env.APP_URL}/api/centra/checkout-success`}
paymentFailedPage={`${process.env.APP_URL}/api/centra/checkout-failed`}
>
<AppProvider>
<AppBase>
<Component {...pageProps} />
</AppBase>
</AppProvider>
</CentraProvider>
By default, the CentraProvider will handle fetching the initial selection for the user, so by wrapping your apps root component, you get access to the useCentraSelection
and useCentraHandlers
hooks.
Getting things from the selection
To get data from the current selection, simply destruct whatever you want from the useCentraSelection
hook, like so:
import { useCentraSelection } from '@noaignite/react-centra-checkout'
const { selection, paymentMethods } = useCentraSelection()
const { items, currency, totals } = selection
Updating the selection
To update the selection, call one of the update handlers from the useCentraHandlers
hook:
import { useCentraHandlers } from '@noaignite/react-centra-checkout'
const { addItem } = useCentraHandlers()
addItem(size, quantity)
Calling endpoints server-side
The Centra selection and handlers will only be available client-side. To make api calls against Centra server-side (e.g when fetching products), you need to call the api directly using the Api client:
import { ApiClient } from '@noaignite/react-centra-checkout'
const response = await ApiClient.default.request('POST', 'products', { categories: ['15'] })