@stripe/react-connect-js

React Connect.js

React components for Connect.js and Connect embedded components

This project is a thin React wrapper around
Connect embedded components.
It allows you to add embedded components to any React app, and manages the state
and lifecycle of embedded components for you.

Note: Some Connect embedded components are currently still in preview. These can
be
viewed on our doc site,
where you can also request preview access.

Components

The list of supported components and their required parameters can be found
here

Minimal example

First, install React Connect.js and
Connect.js.

npm install @stripe/react-connect-js @stripe/connect-js

You have to wrap your components with ConnectComponentsProvider in order to
provide the ConnectInstance context to create or update components

Example

See more examples in the /examples folder

import React from 'react';
import ReactDOM from 'react-dom';
import {loadConnectAndInitialize} from '@stripe/connect-js';
import {
  ConnectPayments,
  ConnectPayouts,
  ConnectPaymentDetails,
  ConnectComponentsProvider,
} from '@stripe/react-connect-js';

const fetchClientSecret = async () => {
  // Fetch the AccountSession client secret by making an API call to your service
};
const connectInstance = loadConnectAndInitialize({
  publishableKey: '{{pk test123}}',
  fetchClientSecret: fetchClientSecret,
  appearance: {
    variables: {
      colorPrimary: '#228403', //optional appearance param,
    },
  },
});

const App = () => (
  <ConnectComponentsProvider connectInstance={connectInstance}>
    <ConnectPayments />
    <ConnectPayouts />
    <ConnectPaymentDetails
      onClose={() => {
        console.log('closed');
      }}
      payment="pi_test123"
    />
  </ConnectComponentsProvider>
);

ReactDOM.render(<App />, document.body);

The stripeConnect.initalize function returns a ConnectInstance once you
initialize it with a publishable key and a client secret returned from the
Account Session API call.

We’ve placed a placeholder API key in this example. Replace it with your
actual publishable API keys to
test this code through your Connect account.

Contributing

If you would like to contribute to React Connect.js, please make sure to read
our contributor guidelines.

Preview/GA

To work with the
preview version
of embedded components, use the /preview folder. For the stable GA
version, use /ga.