Rendering a checkout experience

Overview

In this quick start guide we'll demonstrate how to create a checkout experience using Stigg's embeddable widgets.

The Stigg checkout widget allows you to easily accept payments without ever worrying about changes to your pricing model or migration to another billing provider.


Before we begin

In order to complete this guide in your application code, please make sure that you have:


Initializing the React SDK

The first step is to initialize Stigg's React SDK with the client API key by wrapping your application with StiggProvider component.

import React from 'react';
import ReactDOM from 'react-dom';
import { StiggProvider } from '@stigg/react-sdk';
import App from './App';

ReactDOM.render(
  <StiggProvider apiKey="YOUR_CLIENT_API_KEY">
    <App />
  </StiggProvider>,
  document.getElementById('app'),
);

Rendering the checkout experience

Additional resources