@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.

$3

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

$3

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

``sh
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

`jsx
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 = () => (



onClose={() => {
console.log('closed');
}}
payment="pi_test123"
/>

);

ReactDOM.render(, 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.

$3

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