@stripe/react-stripe-js#IbanElement JavaScript Examples
The following examples show how to use
@stripe/react-stripe-js#IbanElement.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AddBalanceDialog.js From react-saas-template with MIT License | 4 votes |
AddBalanceDialog = withTheme(function (props) {
const { open, theme, onClose, onSuccess } = props;
const [loading, setLoading] = useState(false);
const [paymentOption, setPaymentOption] = useState("Credit Card");
const [stripeError, setStripeError] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [amount, setAmount] = useState(0);
const [amountError, setAmountError] = useState("");
const elements = useElements();
const stripe = useStripe();
const onAmountChange = amount => {
if (amount < 0) {
return;
}
if (amountError) {
setAmountError("");
}
setAmount(amount);
};
const getStripePaymentInfo = () => {
switch (paymentOption) {
case "Credit Card": {
return {
type: "card",
card: elements.getElement(CardElement),
billing_details: { name: name }
};
}
case "SEPA Direct Debit": {
return {
type: "sepa_debit",
sepa_debit: elements.getElement(IbanElement),
billing_details: { email: email, name: name }
};
}
default:
throw new Error("No case selected in switch statement");
}
};
const renderPaymentComponent = () => {
switch (paymentOption) {
case "Credit Card":
return (
<Fragment>
<Box mb={2}>
<StripeCardForm
stripeError={stripeError}
setStripeError={setStripeError}
setName={setName}
name={name}
amount={amount}
amountError={amountError}
onAmountChange={onAmountChange}
/>
</Box>
<HighlightedInformation>
You can check this integration using the credit card number{" "}
<b>4242 4242 4242 4242 04 / 24 24 242 42424</b>
</HighlightedInformation>
</Fragment>
);
case "SEPA Direct Debit":
return (
<Fragment>
<Box mb={2}>
<StripeIbanForm
stripeError={stripeError}
setStripeError={setStripeError}
setName={setName}
setEmail={setEmail}
name={name}
email={email}
amount={amount}
amountError={amountError}
onAmountChange={onAmountChange}
/>
</Box>
<HighlightedInformation>
You can check this integration using the IBAN
<br />
<b>DE89370400440532013000</b>
</HighlightedInformation>
</Fragment>
);
default:
throw new Error("No case selected in switch statement");
}
};
return (
<FormDialog
open={open}
onClose={onClose}
headline="Add Balance"
hideBackdrop={false}
loading={loading}
onFormSubmit={async event => {
event.preventDefault();
if (amount <= 0) {
setAmountError("Can't be zero");
return;
}
if (stripeError) {
setStripeError("");
}
setLoading(true);
const { error } = await stripe.createPaymentMethod(
getStripePaymentInfo()
);
if (error) {
setStripeError(error.message);
setLoading(false);
return;
}
onSuccess();
}}
content={
<Box pb={2}>
<Box mb={2}>
<Grid container spacing={1}>
{paymentOptions.map(option => (
<Grid item key={option}>
<ColoredButton
variant={
option === paymentOption ? "contained" : "outlined"
}
disableElevation
onClick={() => {
setStripeError("");
setPaymentOption(option);
}}
color={theme.palette.common.black}
>
{option}
</ColoredButton>
</Grid>
))}
</Grid>
</Box>
{renderPaymentComponent()}
</Box>
}
actions={
<Fragment>
<Button
fullWidth
variant="contained"
color="secondary"
type="submit"
size="large"
disabled={loading}
>
Pay with Stripe {loading && <ButtonCircularProgress />}
</Button>
</Fragment>
}
/>
);
})
Example #2
Source File: StripeIBANForm.js From react-saas-template with MIT License | 4 votes |
function StripeIBANForm(props) {
const {
stripeError,
setStripeError,
amount,
amountError,
onAmountChange,
name,
setName,
email,
setEmail
} = props;
return (
<Grid container spacing={2} justifyContent="space-between">
<Grid item xs={8}>
<TextField
variant="outlined"
margin="none"
required
label="Your Name"
value={name}
onChange={event => {
setName(event.target.value);
}}
fullWidth
autoFocus
autoComplete="off"
type="text"
/>
</Grid>
<Grid item xs={4}>
<TextField
required
value={amount}
onChange={event => {
onAmountChange(parseInt(event.target.value));
}}
error={amountError ? true : false}
helperText={amountError}
variant="outlined"
fullWidth
type="number"
margin="none"
label="Amount"
InputProps={{
startAdornment: <InputAdornment position="start">$</InputAdornment>
}}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
variant="outlined"
fullWidth
value={email}
onChange={event => {
setEmail(event.target.value);
}}
type="email"
margin="none"
label="Email"
/>
</Grid>
<Grid item xs={12}>
<StripeTextField
margin="none"
variant="outlined"
fullWidth
label="IBAN"
error={stripeError ? true : false}
helperText={stripeError}
required
StripeElement={IbanElement}
stripeOptions={{ supportedCountries: ["SEPA"] }}
onChange={() => {
if (stripeError) {
setStripeError("");
}
}}
></StripeTextField>
</Grid>
</Grid>
);
}