Collect customer detailsBeta
Collect customer email addresses.
Private preview
The Custom Checkout integration is in private preview. To request access, click here.
Custom Checkout requires customer email address collection. Create a component to collect your customer’s email address.
Call updateEmail when your customer finishes the input to validate and save the email address.
- If you have a multi-step form, call
updateEmail before moving to the next step, such as clicking a Save button. - If you have a single-page form, call
updateEmail before submitting the payment. You can also call updateEmail to validate earlier, such as on input blur.
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;
