stripe / react-stripe-js

React components for Stripe.js and Stripe Elements
https://stripe.com/docs/stripe-js/react
MIT License
1.75k stars 267 forks source link

Add support for fetchClientSecret param to Embedded Checkout #481

Closed tiff-stripe closed 7 months ago

tiff-stripe commented 7 months ago

Summary & motivation

Adds support for passing the fetchClientSecret param to <EmbeddedCheckoutProvider>'s options prop.

Example usage:

import * as React from 'react';
import {loadStripe} from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout
} from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_123', {betas: ['embedded_checkout_beta_1']}));

const App = ({createCheckoutSession}) => {
  const options = {
    fetchClientSecret: async () => { 
      const clientSecret = await createCheckoutSession(); 
      return clientSecret;
    }
  };

  return (
    <EmbeddedCheckoutProvider
      stripe={stripePromise}
      options={options}
    />
      <EmbeddedCheckout />
    </EmbeddedCheckoutProvider>
  )
}

Testing & documentation

Unit tests and manual testing locally.