Accept a payment with the Express Checkout Element

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutPage from './CheckoutPage';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

function App() {
  const options = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    // Customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutPage />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutPage = () => {
  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};

const options = {
  emailRequired: true,
  phoneNumberRequired: true
};

const options = {
  emailRequired: true,
  phoneNumberRequired: true,
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
};

const onShippingAddressChange = async ({resolve, address}) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: address
    })
  });
  const result = await response.json();
  resolve({
    lineItems: result.updatedLineItems,
  });
};

const onShippingRateChange = async ({resolve, shippingRate}) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  resolve({
    lineItems: result.updatedLineItems,
  });
};

const onCancel = () => {
  elements.update({amount: 1099})
};

<ExpressCheckoutElement
  options={options}
  onConfirm={onConfirm}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
  onCancel={onCancel}
/>

const options = {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
};

import React from 'react';
import {useStripe, useElements, ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Express Checkout Element
    const {error} = await stripe.confirmPayment({
      // `elements` instance used to create the Express Checkout Element
      elements,
      // `clientSecret` from the created PaymentIntent
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};