@stripe/react-connect-js
v3.3.19
Published
React components for Connect.js and Connect embedded components
Downloads
227,245
Readme
@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.