顧客の詳細情報を収集するベータ
顧客のメールアドレスを収集します。
プライベートプレビュー
The Custom Checkout integration is in private preview. To request access, こちらをクリックしてください。
Custom Checkout では、顧客のメールアドレスを収集する必要があります。顧客のメールアドレスを収集するコンポーネントを作成します。
顧客が入力を完了したら、updateEmail を呼び出して、メールアドレスを検証し、保存します。
- 複数のステップで構成されたフォームがある場合は、保存ボタンをクリックするなど、次のステップに進む前に
updateEmail を呼び出します。 - 1 ページのフォームを使用する場合は、支払いを送信する前に
updateEmail を呼び出します。フォーカスが外れたときなどに updateEmail を呼び出して、事前に検証することもできます。
import React from 'react';
import {useCustomCheckout} from '@stripe/react-stripe-js';
const EmailInput = () => {
const checkout = useCustomCheckout();
const [email, setEmail] = React.useState('');
const [error, setError] = React.useState(null);
const handleBlur = () => {
checkout.updateEmail(email).then((result) => {
if (result.error) {
setError(result.error);
}
})
};
const handleChange = (e) => {
setError(null);
setEmail(e.target.value);
};
return (
<div>
<input
type="text"
value={email}
onChange={handleChange}
onBlur={handleBlur}
/>
{error && <div>{error.message}</div>}
</div>
);
};
export default EmailInput;
