支払いを送信ベータ
購入を完了するボタンを追加します。
セッションの準備ができているか確認する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
支払いを送信する前に、canConfirm を確認し、すべての必須データが存在していることを確認します。データが不足している場合は、confirmationRequirements を確認し、何が不足しているかを表示できます。
支払いボタンをレンダリングする![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
支払いボタンのクリックへの応答など、顧客が購入を完了する準備が整ったときに、confirm を呼び出します。
支払いを送信する前に、canConfirm を確認し、すべての必須データが存在していることを確認します。データが不足している場合は、confirmationRequirements を確認し、何が不足しているかを表示できます。
支払いボタンのクリックへの応答など、顧客が購入を完了する準備が整ったときに、confirm を呼び出します。
import React from 'react'; import {useCustomCheckout} from '@stripe/react-stripe-js'; const PayButton = () => { const {confirm, canConfirm, confirmationRequirements} = useCustomCheckout(); const [loading, setLoading] = React.useState(false); const handleClick = () => { setLoading(true); confirm().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;