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: Connect embedded components is currently still in beta. Please contact us to request beta access.
The list of supported components and their required parameters can be found here
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
See more examples in the /examples folder
import React from 'react';
import ReactDOM from 'react-dom';
import {loadConnect} from '@stripe/connect-js';
import {
ConnectPayments,
ConnectPayouts,
ConnectPaymentDetails,
ConnectComponentsProvider,
} from '@stripe/react-connect-js';
const stripeConnect = await loadConnect();
const connectInstance = stripeConnect.initialize({
publishableKey: '{{your key here}}',
clientSecret: '{{your client secret}}',
appearance: {
colorPrimary: '#228403', //optional appearance param
},
});
const App = () => (
<ConnectComponentsProvider connectInstance={connectInstance}>
<ConnectPayments />
<ConnectPayouts />
<ConnectPaymentDetails
onClose={() => {
console.log('closed');
}}
chargeId="pi_test123"
visible
/>
</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.
If you would like to contribute to React Connect.js, please make sure to read our contributor guidelines.