0
# Bank Payment Elements
1

2
Elements for region-specific bank payment methods and direct bank transfers. These elements support various banking payment methods popular in different regions worldwide.
3

4
## Capabilities
5

6
### IbanElement
7

8
IBAN (International Bank Account Number) input element for SEPA payments and European bank transfers.
9

10
```typescript { .api }
11
/**
12
 * IBAN input element for European bank transfers
13
 * @param props - IBAN element configuration props
14
 * @returns JSX element for IBAN input
15
 */
16
function IbanElement(props: IbanElementProps): JSX.Element;
17

18
interface IbanElementProps extends ElementProps {
19
  /** Configuration options for the IBAN Element */
20
  options?: StripeIbanElementOptions;
21
  /** Triggered when data exposed by this Element is changed */
22
  onChange?: (event: StripeIbanElementChangeEvent) => any;
23
  /** Triggered when the Element is fully rendered and can accept focus */
24
  onReady?: (element: StripeIbanElement) => any;
25
  /** Triggered when the escape key is pressed within the Element */
26
  onEscape?: () => any;
27
}
28

29
interface StripeIbanElementOptions {
30
  /** Appearance and styling options */
31
  style?: StripeElementStyle;
32
  /** Placeholder text for the IBAN input */
33
  placeholder?: string;
34
  /** Disabled state */
35
  disabled?: boolean;
36
  /** IBAN validation options */
37
  supportedCountries?: string[];
38
}
39
```
40

41
**Usage Examples:**
42

43
```typescript
44
import React, { useState } from 'react';
45
import { IbanElement, useStripe, useElements } from '@stripe/react-stripe-js';
46

47
const SepaPaymentForm = () => {
48
  const stripe = useStripe();
49
  const elements = useElements();
50
  const [ibanComplete, setIbanComplete] = useState(false);
51

52
  const handleIbanChange = (event) => {
53
    setIbanComplete(event.complete);
54
    if (event.error) {
55
      console.log('IBAN error:', event.error.message);
56
    }
57
  };
58

59
  const handleSubmit = async (event) => {
60
    event.preventDefault();
61

62
    if (!stripe || !elements) return;
63

64
    const iban = elements.getElement(IbanElement);
65
    
66
    const { error, paymentMethod } = await stripe.createPaymentMethod({
67
      type: 'sepa_debit',
68
      sepa_debit: iban,
69
      billing_details: {
70
        name: 'Jenny Rosen',
71
        email: 'jenny@example.com',
72
      },
73
    });
74

75
    if (error) {
76
      console.log('[error]', error);
77
    } else {
78
      console.log('[PaymentMethod]', paymentMethod);
79
    }
80
  };
81

82
  return (
83
    <form onSubmit={handleSubmit}>
84
      <label>
85
        IBAN
86
        <IbanElement
87
          options={{
88
            style: {
89
              base: {
90
                fontSize: '16px',
91
                color: '#424770',
92
                '::placeholder': {
93
                  color: '#aab7c4',
94
                },
95
              },
96
            },
97
            supportedCountries: ['SEPA']
98
          }}
99
          onChange={handleIbanChange}
100
          onReady={() => console.log('IbanElement ready')}
101
        />
102
      </label>
103
      <button disabled={!stripe || !ibanComplete}>
104
        Pay with SEPA Debit
105
      </button>
106
    </form>
107
  );
108
};
109
```
110

111
### FpxBankElement
112

113
FPX bank selection element for Malaysian online banking payments.
114

115
```typescript { .api }
116
/**
117
 * FPX bank selection element for Malaysian payments
118
 * @param props - FPX bank element configuration props
119
 * @returns JSX element for FPX bank selection
120
 */
121
function FpxBankElement(props: FpxBankElementProps): JSX.Element;
122

123
interface FpxBankElementProps extends ElementProps {
124
  /** Configuration options for the FPX Bank Element */
125
  options?: StripeFpxBankElementOptions;
126
  /** Triggered when data exposed by this Element is changed */
127
  onChange?: (event: StripeFpxBankElementChangeEvent) => any;
128
  /** Triggered when the Element is fully rendered and can accept focus */
129
  onReady?: (element: StripeFpxBankElement) => any;
130
  /** Triggered when the escape key is pressed within the Element */
131
  onEscape?: () => any;
132
}
133

134
interface StripeFpxBankElementOptions {
135
  /** Appearance and styling options */
136
  style?: StripeElementStyle;
137
  /** Default bank selection */
138
  value?: string;
139
  /** Disabled state */
140
  disabled?: boolean;
141
}
142
```
143

144
### IdealBankElement
145

146
iDEAL bank selection element for Dutch online banking payments.
147

148
```typescript { .api }
149
/**
150
 * iDEAL bank selection element for Dutch payments
151
 * @param props - iDEAL bank element configuration props
152
 * @returns JSX element for iDEAL bank selection
153
 */
154
function IdealBankElement(props: IdealBankElementProps): JSX.Element;
155

156
interface IdealBankElementProps extends ElementProps {
157
  /** Configuration options for the iDEAL Bank Element */
158
  options?: StripeIdealBankElementOptions;
159
  /** Triggered when data exposed by this Element is changed */
160
  onChange?: (event: StripeIdealBankElementChangeEvent) => any;
161
  /** Triggered when the Element is fully rendered and can accept focus */
162
  onReady?: (element: StripeIdealBankElement) => any;
163
  /** Triggered when the escape key is pressed within the Element */
164
  onEscape?: () => any;
165
}
166

167
interface StripeIdealBankElementOptions {
168
  /** Appearance and styling options */
169
  style?: StripeElementStyle;
170
  /** Default bank selection */
171
  value?: string;
172
  /** Disabled state */
173
  disabled?: boolean;
174
  /** Hide bank icon */
175
  hideIcon?: boolean;
176
}
177
```
178

179
### P24BankElement
180

181
Przelewy24 bank selection element for Polish online banking payments.
182

183
```typescript { .api }
184
/**
185
 * Przelewy24 bank selection element for Polish payments
186
 * @param props - P24 bank element configuration props
187
 * @returns JSX element for P24 bank selection
188
 */
189
function P24BankElement(props: P24BankElementProps): JSX.Element;
190

191
interface P24BankElementProps extends ElementProps {
192
  /** Configuration options for the P24 Bank Element */
193
  options?: StripeP24BankElementOptions;
194
  /** Triggered when data exposed by this Element is changed */
195
  onChange?: (event: StripeP24BankElementChangeEvent) => any;
196
  /** Triggered when the Element is fully rendered and can accept focus */
197
  onReady?: (element: StripeP24BankElement) => any;
198
  /** Triggered when the escape key is pressed within the Element */
199
  onEscape?: () => any;
200
}
201

202
interface StripeP24BankElementOptions {
203
  /** Appearance and styling options */
204
  style?: StripeElementStyle;
205
  /** Default bank selection */
206
  value?: string;
207
  /** Disabled state */
208
  disabled?: boolean;
209
}
210
```
211

212
### EpsBankElement
213

214
EPS bank selection element for Austrian online banking payments.
215

216
```typescript { .api }
217
/**
218
 * EPS bank selection element for Austrian payments
219
 * @param props - EPS bank element configuration props
220
 * @returns JSX element for EPS bank selection
221
 */
222
function EpsBankElement(props: EpsBankElementProps): JSX.Element;
223

224
interface EpsBankElementProps extends ElementProps {
225
  /** Configuration options for the EPS Bank Element */
226
  options?: StripeEpsBankElementOptions;
227
  /** Triggered when data exposed by this Element is changed */
228
  onChange?: (event: StripeEpsBankElementChangeEvent) => any;
229
  /** Triggered when the Element is fully rendered and can accept focus */
230
  onReady?: (element: StripeEpsBankElement) => any;
231
  /** Triggered when the escape key is pressed within the Element */
232
  onEscape?: () => any;
233
}
234

235
interface StripeEpsBankElementOptions {
236
  /** Appearance and styling options */
237
  style?: StripeElementStyle;
238
  /** Default bank selection */
239
  value?: string;
240
  /** Disabled state */
241
  disabled?: boolean;
242
}
243
```
244

245
### AuBankAccountElement
246

247
Australian bank account element for BECS Direct Debit payments (requires beta access).
248

249
```typescript { .api }
250
/**
251
 * Australian bank account element for BECS Direct Debit
252
 * Requires beta access - contact Stripe support for more information
253
 * @param props - AU bank account element configuration props
254
 * @returns JSX element for Australian bank account input
255
 */
256
function AuBankAccountElement(props: AuBankAccountElementProps): JSX.Element;
257

258
interface AuBankAccountElementProps extends ElementProps {
259
  /** Configuration options for the AU Bank Account Element */
260
  options?: StripeAuBankAccountElementOptions;
261
  /** Triggered when data exposed by this Element is changed */
262
  onChange?: (event: StripeAuBankAccountElementChangeEvent) => any;
263
  /** Triggered when the Element is fully rendered and can accept focus */
264
  onReady?: (element: StripeAuBankAccountElement) => any;
265
  /** Triggered when the escape key is pressed within the Element */
266
  onEscape?: () => any;
267
}
268

269
interface StripeAuBankAccountElementOptions {
270
  /** Appearance and styling options */
271
  style?: StripeElementStyle;
272
  /** Disabled state */
273
  disabled?: boolean;
274
}
275
```
276

277
**Bank Selection Usage Example:**
278

279
```typescript
280
import React, { useState } from 'react';
281
import { IdealBankElement, useStripe, useElements } from '@stripe/react-stripe-js';
282

283
const IdealPaymentForm = () => {
284
  const stripe = useStripe();
285
  const elements = useElements();
286
  const [selectedBank, setSelectedBank] = useState('');
287

288
  const handleBankChange = (event) => {
289
    setSelectedBank(event.value);
290
    console.log('Selected bank:', event.value);
291
  };
292

293
  const handleSubmit = async (event) => {
294
    event.preventDefault();
295

296
    if (!stripe || !elements || !selectedBank) return;
297

298
    const idealBank = elements.getElement(IdealBankElement);
299
    
300
    const { error, paymentMethod } = await stripe.createPaymentMethod({
301
      type: 'ideal',
302
      ideal: idealBank,
303
      billing_details: {
304
        name: 'Jenny Rosen',
305
      },
306
    });
307

308
    if (error) {
309
      console.log('[error]', error);
310
    } else {
311
      console.log('[PaymentMethod]', paymentMethod);
312
    }
313
  };
314

315
  return (
316
    <form onSubmit={handleSubmit}>
317
      <label>
318
        Select your bank
319
        <IdealBankElement
320
          options={{
321
            style: {
322
              base: {
323
                padding: '10px 14px',
324
                fontSize: '18px',
325
                color: '#424770',
326
                backgroundColor: 'transparent',
327
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
328
                fontSmoothing: 'antialiased',
329
                '::selection': {
330
                  backgroundColor: '#6772e5',
331
                },
332
              },
333
              invalid: {
334
                color: '#9e2146',
335
              },
336
            },
337
            hideIcon: false
338
          }}
339
          onChange={handleBankChange}
340
          onReady={() => console.log('IdealBankElement ready')}
341
        />
342
      </label>
343
      <button disabled={!stripe || !selectedBank}>
344
        Pay with iDEAL
345
      </button>
346
    </form>
347
  );
348
};
349
```
350

351
## Bank Element Event Types
352

353
```typescript { .api }
354
interface StripeBankElementChangeEvent {
355
  elementType: 'fpxBank' | 'idealBank' | 'p24Bank' | 'epsBank';
356
  empty: boolean;
357
  complete: boolean;
358
  value: string;
359
  error?: StripeError;
360
}
361

362
interface StripeIbanElementChangeEvent {
363
  elementType: 'iban';
364
  empty: boolean;
365
  complete: boolean;
366
  error?: StripeError;
367
  value?: {
368
    country?: string;
369
  };
370
}
371

372
interface StripeAuBankAccountElementChangeEvent {
373
  elementType: 'auBankAccount';
374
  empty: boolean;
375
  complete: boolean;
376
  error?: StripeError;
377
  value?: {
378
    accountHolderType?: 'individual' | 'company';
379
  };
380
}
381
```
382

383
## Regional Payment Method Integration
384

385
Different bank elements are designed for specific regions and payment methods:
386

387
```typescript
388
// European SEPA payments
389
const SepaForm = () => (
390
  <form>
391
    <IbanElement options={{ supportedCountries: ['SEPA'] }} />
392
  </form>
393
);
394

395
// Dutch iDEAL payments
396
const DutchForm = () => (
397
  <form>
398
    <IdealBankElement />
399
  </form>
400
);
401

402
// Malaysian FPX payments
403
const MalaysianForm = () => (
404
  <form>
405
    <FpxBankElement />
406
  </form>
407
);
408

409
// Polish Przelewy24 payments
410
const PolishForm = () => (
411
  <form>
412
    <P24BankElement />
413
  </form>
414
);
415

416
// Austrian EPS payments
417
const AustrianForm = () => (
418
  <form>
419
    <EpsBankElement />
420
  </form>
421
);
422
```