## AuBankAccountElement

Use the `AuBankAccountElement` from `@stripe/react-stripe-js` to collect Australian bank account information (BSB and account number) for use with BECS Direct Debit payments.

### Props

*   `id`
    Sets the DOM `id` attribute on the rendered Element container. Use this to target the Element for styling or testing.
*   `className`
    Applies custom CSS classes to the Element container.
*   `options`
    Options for creating an `auBankAccount` element.
*   `classes`
    Set custom class names on the container DOM element when the Stripe element is in a particular state.
    *   `base`
        The base class applied to the container. Defaults to `StripeElement`.
    *   `complete`
        The class name to apply when the `Element` is complete. Defaults to `StripeElement--complete`.
    *   `empty`
        The class name to apply when the `Element` is empty. Defaults to `StripeElement--empty`.
    *   `focus`
        The class name to apply when the `Element` is focused. Defaults to `StripeElement--focus`.
    *   `invalid`
        The class name to apply when the `Element` is invalid. Defaults to `StripeElement--invalid`.
    *   `webkitAutofill`
        The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari). Defaults to `StripeElement--webkit-autofill`.
*   `style`
    Customize the appearance of this element using CSS properties passed in a [Style](https://docs.stripe.com/js/appendix/style.md) object.
*   `iconStyle`
    Appearance of the icon in the Element. Either `solid` or `default`.
*   `hideIcon`
    Hides the icon in the Element. Default is `false`.
*   `disabled`
    Applies a disabled state to the Element such that user input is not accepted. Default is `false`.
*   `onChange`
    Callback called when any value in the [change event payload](https://docs.stripe.com/js/element/events/on_change.md?type=auBankAccountElement) changes.
*   `onReady`
    Callback called once the Element is fully rendered. Recieves the [ready event payload](https://docs.stripe.com/js/element/events/on_ready.md#element_on_ready-handler).
*   `onBlur`
    Callback called when the Element loses focus.
*   `onFocus`
    Callback called when the Element receives focus.
*   `onEscape`
    Callback called when the escape key is pressed within the

### Example

```jsx
import { Elements } from '@stripe/react-stripe-js';
import { AuBankAccountElement } from '@stripe/react-stripe-js';

const CheckoutForm = () => (
  <Elements stripe={stripePromise}>
    <AuBankAccountElement
      className="my-custom-class"
      onChange={event => console.log(event)}
      onReady={event => console.log(event)}
      onBlur={event => console.log(event)}
      onFocus={event => console.log(event)}
      onEscape={event => console.log(event)}
      options={{
        classes: {
          base: 'my-base-class',
          complete: 'my-complete-class',
          empty: 'my-empty-class',
          focus: 'my-focus-class',
          invalid: 'my-invalid-class',
          webkitAutofill: 'my-webkit-autofill-class',
        },
        style: {
          base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSize: '16px',
            '::placeholder': {
              color: '#aab7c8',
            },
          },
        },
        iconStyle: 'solid',
        hideIcon: false,
        disabled: false,
      }}
    />
  </Elements>
);
```