## Elements

This section details the various Elements available for integrating with Stripe's JavaScript library. Elements are embeddable UI components that allow you to collect payment information securely.

### Core Elements

These are fundamental building blocks for collecting various types of information.

*   **Address Element:** An embeddable component for collecting local and international billing and shipping addresses.
    *   `/js/element/address_element.md`
*   **Express Checkout Element:** An embeddable component for accepting payments through one-click payment buttons.
    *   `/js/element/express_checkout_element.md`

### Element Creation and Retrieval

Methods for creating and retrieving instances of Elements.

*   **Create an Element:**
    *   `elements.create(type: string, options?: object)`: Creates an instance of an individual `Element`.
        *   `/js/elements_object/create_element.md`
    *   `elements.create(type: 'expressCheckout', options?: object)`: Creates an instance of the Express Checkout Element.
        *   `/js/elements_object/create_express_checkout_element.md`
    *   `elements.create(type: 'linkAuthentication', options?: object)`: Creates an instance of the Link Authentication Element.
        *   `/js/elements_object/create_link_authentication_element.md`
    *   `elements.create(type: string, options: object)`: Creates an instance of an individual Issuing Element.
        *   `/js/issuing_elements/create.md`
*   **Get an Element:**
    *   `elements.getElement(type: 'payment')`: Retrieves a previously created Payment Element.
        *   `/js/elements_object/get_payment_element.md`
    *   `elements.getElement(type: 'expressCheckout')`: Retrieves a previously created Express Checkout Element.
        *   `/js/elements_object/get_express_checkout_element.md`
    *   `elements.getElement(type: 'linkAuthentication')`: Retrieves a previously created Link Authentication Element.
        *   `/js/elements_object/get_link_authentication_element.md`
    *   `elements.getElement(type: 'address', options?: object)`: Retrieves a previously created Address Element.
        *   `/js/elements_object/get_address_element.md`
    *   `elements.getElement(type: 'taxId')`: Retrieves a previously created Tax ID Element.
        *   `/js/elements_object/get_tax_id_element.md`

### Element Methods

Methods that can be called on an Element instance.

*   **Blur an Element:**
    *   `element.blur()`: Blurs the [Element](https://docs.stripe.com/js/element.md).
        *   `/js/element/other_methods/blur.md`
*   **Collapse a Payment Element:**
    *   `element.collapse()`: Collapses the Payment Element into a row of payment method tabs.
        *   `/js/elements_object/collapse_payment_element.md`
*   **Get value from a Tax ID Element:**
    *   `element.getValue()`: Validates and retrieves form values from a Tax ID Element.
        *   `/js/elements_object/get_value_tax_id_element.md`

### Element Events

Events that can be listened to on an Element instance.

*   **Change event:**
    *   `element.on(event: 'change', handler: function)`: Triggered when any value in the change event payload changes.
        *   `/js/element/events/on_change.md`
*   **Ready event:**
    *   `element.on(event: 'ready', handler: function)`: Triggered when the `Element` is fully rendered and methods on the instance can be called.
        *   `/js/element/events/on_ready.md`
*   **Focus event:**
    *   `element.on(event: 'focus', handler: function)`: Triggered when the `Element` gains focus.
        *   `/js/element/events/on_focus.md`
*   **Blur event:**
    *   `element.on(event: 'blur', handler: function)`: Triggered when the `Element` loses focus.
        *   `/js/element/events/on_blur.md`
*   **Escape event:**
    *   `element.on(event: 'escape', handler: function)`: Triggered when the escape key is pressed within an Element.
        *   `/js/element/events/on_escape.md`
*   **Click event:**
    *   `element.on(event: 'click', handler: function)`:
        *   `/js/element/events/on_click.md`
*   **LoadError event:**
    *   `element.on(event: 'loaderror', handler: function)`: Triggered when the `Element` fails to load.
        *   `/js/element/events/on_loaderror.md`
*   **Update-end event:**
    *   `elements.on(event: 'update-end', handler: function)`: Triggered when the call to `elements.update()` is complete.
        *   `/js/element/events/on_update_end.md`
*   **Confirm event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from an Express Checkout Element when the customer finalizes their payment.
        *   `/js/elements_object/express_checkout_element_confirm_event.md`
*   **Cancel event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from an Express Checkout Element when the payment interface is dismissed.
        *   `/js/elements_object/express_checkout_element_cancel_event.md`
*   **Shippingaddresschange event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from an Express Checkout Element whenever the customer selects a new address.
        *   `/js/elements_object/express_checkout_element_shippingaddresschange_event.md`
*   **Shippingratechange event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from an Express Checkout Element whenever the customer selects a new shipping rate.
        *   `/js/elements_object/express_checkout_element_shippingratechange_event.md`

### Custom Checkout Elements

Elements specifically designed for use with Custom Checkout.

*   **Create Billing Address Element:**
    *   `checkout.createBillingAddressElement(options?: object)`: Creates an instance of a Billing Address Element.
        *   `/js/custom_checkout/create_billing_address_element.md`
*   **Create Shipping Address Element:**
    *   `checkout.createShippingAddressElement(options?: object)`: Creates an instance of a Shipping Address Element.
        *   `/js/custom_checkout/create_shipping_address_element.md`
*   **Create Currency Selector Element:**
    *   `checkout.createCurrencySelectorElement()`: Creates an instance of a Currency Selector Element.
        *   `/js/custom_checkout/create_currency_selector_element.md`
*   **Get the Payment Element:**
    *   `checkout.getPaymentElement()`: Gets the previously created Payment Element instance.
        *   `/js/custom_checkout/get_payment_element.md`
*   **Get the Billing Address Element:**
    *   `checkout.getBillingAddressElement()`: Gets the previously created Billing Address Element instance.
        *   `/js/custom_checkout/get_billing_address_element.md`
*   **Get the Shipping Address Element:**
    *   `checkout.getShippingAddressElement()`: Gets the previously created Shipping Address Element instance.
        *   `/js/custom_checkout/get_shipping_address_element.md`
*   **Get the Express Checkout Element:**
    *   `checkout.getExpressCheckoutElement()`: Gets the previously created Express Checkout Element instance.
        *   `/js/custom_checkout/get_express_checkout_element.md`
*   **Get the Currency Selector Element:**
    *   `checkout.getCurrencySelectorElement()`: Gets the previously created Currency Selector Element instance.
        *   `/js/custom_checkout/get_currency_selector_element.md`

### Custom Checkout Element Events

Events specific to Elements used within Custom Checkout.

*   **Change event:**
    *   `element.on(event: 'change', handler: function)`: Triggered when any value in the change event payload changes. Supported by `paymentElement`, `billingAddressElement`, `shippingAddressElement`, and `taxIdElement`.
        *   `/js/custom_checkout/element_events/on_change.md`
*   **Ready event:**
    *   `element.on(event: 'ready', handler: function)`: Triggered when the `Element` is fully rendered.
        *   `/js/custom_checkout/element_events/on_ready.md`
*   **Focus event:**
    *   `element.on(event: 'focus', handler: function)`: Triggered when the `Element` gains focus.
        *   `/js/custom_checkout/element_events/on_focus.md`
*   **Blur event:**
    *   `element.on(event: 'blur', handler: function)`: Triggered when the `Element` loses focus.
        *   `/js/custom_checkout/element_events/on_blur.md`
*   **Escape event:**
    *   `element.on(event: 'escape', handler: function)`: Triggered when the escape key is pressed within an `Element`.
        *   `/js/custom_checkout/element_events/on_escape.md`
*   **LoadError event:**
    *   `element.on(event: 'loaderror', handler: function)`: Triggered when the `Element` fails to load.
        *   `/js/custom_checkout/element_events/on_loaderror.md`
*   **Confirm event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from the Express Checkout Element when the customer finalizes their payment.
        *   `/js/custom_checkout/element_events/on_confirm.md`
*   **Cancel event (Express Checkout Element):**
    *   `expressCheckoutElement.on(event: string, handler: function)`: Triggered from the Express Checkout Element when the payment interface is dismissed.
        *   `/js/custom_checkout/element_events/on_cancel.md`

### React Stripe.js Checkout Elements

Methods for interacting with checkout elements within a React Stripe.js integration.

*   **Apply a promotion code:**
    *   `applyPromotionCode(promotionCode: string)`: Applies a promotion code to the Checkout Session.
        *   `/js/react_stripe_js/checkout/apply_promotion_code.md`
*   **Remove a promotion code:**
    *   `removePromotionCode()`: Removes the currently applied promotion code.
        *   `/js/react_stripe_js/checkout/remove_promotion_code.md`
*   **Update the Customer's shipping address:**
    *   `updateShippingAddress(shippingAddress: nullable object)`: Updates the Customer's shipping address.
        *   `/js/react_stripe_js/checkout/update_shipping_address.md`
*   **Update the Customer's billing address:**
    *   `updateBillingAddress(billingAddress: nullable object)`: Updates the Customer's billing address.
        *   `/js/react_stripe_js/checkout/update_billing_address.md`
*   **Update the Customer's email address:**
    *   `updateEmail(email: nullable string)`: Updates the Customer's email address.
        *   `/js/react_stripe_js/checkout/update_email.md`
*   **Update the Customer's phone number:**
    *   `updatePhoneNumber(phoneNumber: nullable string)`: Updates the Customer's phone number.
        *   `/js/react_stripe_js/checkout/update_phone_number.md`
*   **Update the Customer's business name and tax ID:**
    *   `updateTaxIdInfo(taxIdInfo?: )`: Updates the Customer's business name and tax ID.
        *   `/js/react_stripe_js/checkout/update_tax_id_info.md`
*   **Update line item quantities:**
    *   `updateLineItemQuantity(options: object)`: Changes the quantity of a line item.
        *   `/js/react_stripe_js/checkout/update_line_item_quantity.md`
*   **Update the selected shipping option:**
    *   `updateShippingOption(shippingOption?: string)`: Updates the selected shipping option.
        *   `/js/react_stripe_js/checkout/update_shipping_option.md`
*   **Run server update:**
    *   `runServerUpdate(userFunction: function)`: Wraps an async function that makes a request to your server to update the Checkout Session.
        *   `/js/react_stripe_js/checkout/run_server_update.md`