diff --git a/examples/hooks/12-Embedded-Checkout.js b/examples/hooks/12-Embedded-Checkout.js new file mode 100644 index 0000000..49d631d --- /dev/null +++ b/examples/hooks/12-Embedded-Checkout.js @@ -0,0 +1,75 @@ +// This example shows you how to set up React Stripe.js and use +// Embedded Checkout. +// Learn how to accept a payment using the official Stripe docs. +// https://stripe.com/docs/payments/accept-a-payment#web + +import React from 'react'; +import {loadStripe} from '@stripe/stripe-js'; +import {EmbeddedCheckoutProvider, EmbeddedCheckout} from '../../src'; + +import '../styles/common.css'; + +const App = () => { + const [pk, setPK] = React.useState( + window.sessionStorage.getItem('react-stripe-js-pk') || '' + ); + const [clientSecret, setClientSecret] = React.useState( + window.sessionStorage.getItem('react-stripe-js-embedded-client-secret') || + '' + ); + + React.useEffect(() => { + window.sessionStorage.setItem('react-stripe-js-pk', pk || ''); + }, [pk]); + React.useEffect(() => { + window.sessionStorage.setItem( + 'react-stripe-js-embedded-client-secret', + clientSecret || '' + ); + }, [clientSecret]); + + const [stripePromise, setStripePromise] = React.useState(); + + const handleSubmit = (e) => { + e.preventDefault(); + setStripePromise(loadStripe(pk, {betas: ['embedded_checkout_beta_1']})); + }; + + const handleUnload = () => { + setStripePromise(null); + }; + + return ( + <> +
+ + + + +
+ {stripePromise && clientSecret && ( + + + + )} + + ); +}; + +export default App;