Bank Payment Elements

/**
 * IBAN input element for European bank transfers
 * @param props - IBAN element configuration props
 * @returns JSX element for IBAN input
 */
function IbanElement(props: IbanElementProps): JSX.Element;

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

interface StripeIbanElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Placeholder text for the IBAN input */
  placeholder?: string;
  /** Disabled state */
  disabled?: boolean;
  /** IBAN validation options */
  supportedCountries?: string[];
}

import React, { useState } from 'react';
import { IbanElement, useStripe, useElements } from '@stripe/react-stripe-js';

const SepaPaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [ibanComplete, setIbanComplete] = useState(false);

  const handleIbanChange = (event) => {
    setIbanComplete(event.complete);
    if (event.error) {
      console.log('IBAN error:', event.error.message);
    }
  };

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

    if (!stripe || !elements) return;

    const iban = elements.getElement(IbanElement);
    
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'sepa_debit',
      sepa_debit: iban,
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com',
      },
    });

    if (error) {
      console.log('[error]', error);
    } else {
      console.log('[PaymentMethod]', paymentMethod);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        IBAN
        <IbanElement
          options={{
            style: {
              base: {
                fontSize: '16px',
                color: '#424770',
                '::placeholder': {
                  color: '#aab7c4',
                },
              },
            },
            supportedCountries: ['SEPA']
          }}
          onChange={handleIbanChange}
          onReady={() => console.log('IbanElement ready')}
        />
      </label>
      <button disabled={!stripe || !ibanComplete}>
        Pay with SEPA Debit
      </button>
    </form>
  );
};

/**
 * FPX bank selection element for Malaysian payments
 * @param props - FPX bank element configuration props
 * @returns JSX element for FPX bank selection
 */
function FpxBankElement(props: FpxBankElementProps): JSX.Element;

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

interface StripeFpxBankElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Default bank selection */
  value?: string;
  /** Disabled state */
  disabled?: boolean;
}

/**
 * iDEAL bank selection element for Dutch payments
 * @param props - iDEAL bank element configuration props
 * @returns JSX element for iDEAL bank selection
 */
function IdealBankElement(props: IdealBankElementProps): JSX.Element;

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

interface StripeIdealBankElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Default bank selection */
  value?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Hide bank icon */
  hideIcon?: boolean;
}

/**
 * Przelewy24 bank selection element for Polish payments
 * @param props - P24 bank element configuration props
 * @returns JSX element for P24 bank selection
 */
function P24BankElement(props: P24BankElementProps): JSX.Element;

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

interface StripeP24BankElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Default bank selection */
  value?: string;
  /** Disabled state */
  disabled?: boolean;
}

/**
 * EPS bank selection element for Austrian payments
 * @param props - EPS bank element configuration props
 * @returns JSX element for EPS bank selection
 */
function EpsBankElement(props: EpsBankElementProps): JSX.Element;

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

interface StripeEpsBankElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Default bank selection */
  value?: string;
  /** Disabled state */
  disabled?: boolean;
}

/**
 * Australian bank account element for BECS Direct Debit
 * Requires beta access - contact Stripe support for more information
 * @param props - AU bank account element configuration props
 * @returns JSX element for Australian bank account input
 */
function AuBankAccountElement(props: AuBankAccountElementProps): JSX.Element;

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

interface StripeAuBankAccountElementOptions {
  /** Appearance and styling options */
  style?: StripeElementStyle;
  /** Disabled state */
  disabled?: boolean;
}

import React, { useState } from 'react';
import { IdealBankElement, useStripe, useElements } from '@stripe/react-stripe-js';

const IdealPaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [selectedBank, setSelectedBank] = useState('');

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

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

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

    const idealBank = elements.getElement(IdealBankElement);
    
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'ideal',
      ideal: idealBank,
      billing_details: {
        name: 'Jenny Rosen',
      },
    });

    if (error) {
      console.log('[error]', error);
    } else {
      console.log('[PaymentMethod]', paymentMethod);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Select your bank
        <IdealBankElement
          options={{
            style: {
              base: {
                padding: '10px 14px',
                fontSize: '18px',
                color: '#424770',
                backgroundColor: 'transparent',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                '::selection': {
                  backgroundColor: '#6772e5',
                },
              },
              invalid: {
                color: '#9e2146',
              },
            },
            hideIcon: false
          }}
          onChange={handleBankChange}
          onReady={() => console.log('IdealBankElement ready')}
        />
      </label>
      <button disabled={!stripe || !selectedBank}>
        Pay with iDEAL
      </button>
    </form>
  );
};

interface StripeBankElementChangeEvent {
  elementType: 'fpxBank' | 'idealBank' | 'p24Bank' | 'epsBank';
  empty: boolean;
  complete: boolean;
  value: string;
  error?: StripeError;
}

interface StripeIbanElementChangeEvent {
  elementType: 'iban';
  empty: boolean;
  complete: boolean;
  error?: StripeError;
  value?: {
    country?: string;
  };
}

interface StripeAuBankAccountElementChangeEvent {
  elementType: 'auBankAccount';
  empty: boolean;
  complete: boolean;
  error?: StripeError;
  value?: {
    accountHolderType?: 'individual' | 'company';
  };
}

// European SEPA payments
const SepaForm = () => (
  <form>
    <IbanElement options={{ supportedCountries: ['SEPA'] }} />
  </form>
);

// Dutch iDEAL payments
const DutchForm = () => (
  <form>
    <IdealBankElement />
  </form>
);

// Malaysian FPX payments
const MalaysianForm = () => (
  <form>
    <FpxBankElement />
  </form>
);

// Polish Przelewy24 payments
const PolishForm = () => (
  <form>
    <P24BankElement />
  </form>
);

// Austrian EPS payments
const AustrianForm = () => (
  <form>
    <EpsBankElement />
  </form>
);