@noaignite/react-centra-checkout

NoA Ignite Centra helpers. Previously known as @oakwood/accelerator.

Installation

react-centra-checkout is available as an npm package.

// 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'] })

Documentation

https://react-centra-checkout-docs.vercel.app