購入に使用する決済手段を保存する非公開プレビュー

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  ui_mode: 'custom',
  return_url: '{{RETURN_URL}}',
  customer_creation: 'always',
  saved_payment_method_options: {
    payment_method_save: 'enabled',
  },
});

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

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;

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

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const {confirm, canConfirm, confirmationRequirements} = useCustomCheckout();
  const [loading, setLoading] = React.useState(false);

  const handleClick = () => {
    setLoading(true);
    confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={!canConfirm || loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;