# Elements and Checkout Integration

This section provides an overview of how to integrate Stripe Elements and Checkout into your JavaScript applications. It covers creating, managing, and interacting with various Element types, as well as utilizing the Checkout functionality for streamlined payment processing.

## Elements

Stripe Elements are pre-built UI components that you can embed in your website to collect payment information securely.

### Creating Elements

You can create various types of Elements using the `elements.create()` method.

*   **Express Checkout Element**: For accepting payments through one-click payment buttons.
    *   [Create the Express Checkout Element](/js/elements_object/create_express_checkout_element.md)
*   **Link Authentication Element**: For collecting customer email addresses for Link.
    *   [Create the Link Authentication Element](/js/elements_object/create_link_authentication_element.md)
*   **Address Element**: For collecting billing and shipping addresses.
    *   [The Address Element](/js/element/address_element.md)
*   **Tax ID Element**: For collecting tax identification numbers.
    *   [Retrieve a Tax ID Element](/js/elements_object/get_tax_id_element.md)
*   **Generic Element Creation**: For creating individual `Element` instances.
    *   [Create an Element](/js/elements_object/create_element.md)
    *   [Create an Issuing Element](/js/issuing_elements/create.md)

### Retrieving Elements

You can retrieve previously created Elements using the `elements.getElement()` method.

*   **Payment Element**:
    *   [Get a Payment Element](/js/elements_object/get_payment_element.md)
*   **Express Checkout Element**:
    *   [Get an Express Checkout Element](/js/elements_object/get_express_checkout_element.md)
*   **Link Authentication Element**:
    *   [Get a Link Authentication Element](/js/elements_object/get_link_authentication_element.md)
*   **Address Element**:
    *   [Get an Address Element](/js/elements_object/get_address_element.md)
*   **Tax ID Element**:
    *   [Retrieve a Tax ID Element](/js/elements_object/get_tax_id_element.md)

### Element Methods

Several methods are available to interact with Element instances.

*   **Collapse Payment Element**:
    *   [Collapse a Payment Element](/js/elements_object/collapse_payment_element.md)
*   **Get Value from Tax ID Element**:
    *   [Get value from a Tax ID Element](/js/elements_object/get_value_tax_id_element.md)
*   **Blur an Element**:
    *   [Blur an Element](/js/element/other_methods/blur.md)

### Element Events

Elements emit various events that you can listen to for user interactions and status updates.

*   **Update-end Event**: Triggered when `elements.update()` is complete.
    *   [Update-end event](/js/element/events/on_update_end.md)
*   **Change Event**: Triggered when any value in the event payload changes.
    *   [Change event](/js/element/events/on_change.md)
*   **Ready Event**: Triggered when the Element is fully rendered.
    *   [Ready event](/js/element/events/on_ready.md)
*   **Focus Event**: Triggered when the Element gains focus.
    *   [Focus event](/js/element/events/on_focus.md)
*   **Blur Event**: Triggered when the Element loses focus.
    *   [Blur event](/js/element/events/on_blur.md)
*   **Escape Event**: Triggered when the escape key is pressed within an Element.
    *   [Escape event](/js/element/events/on_escape.md)
*   **Click Event**:
    *   [Click event](/js/element/events/on_click.md)
*   **LoadError Event**: Triggered when the Element fails to load.
    *   [LoadError event](/js/element/events/on_loaderror.md)
*   **Express Checkout Element Events**:
    *   **Confirm Event**: Triggered when the customer finalizes their payment.
        *   [Confirm event](/js/elements_object/express_checkout_element_confirm_event.md)
    *   **Cancel Event**: Triggered when the payment interface is dismissed.
        *   [Cancel event](/js/elements_object/express_checkout_element_cancel_event.md)
    *   **ShippingAddressChange Event**: Triggered when the customer selects a new shipping address.
        *   [ShippingAddressChange event](/js/elements_object/express_checkout_element_shippingaddresschange_event.md)
    *   **ShippingRateChange Event**: Triggered when the customer selects a new shipping rate.
        *   [ShippingRateChange event](/js/elements_object/express_checkout_element_shippingratechange_event.md)

## Custom Checkout

Custom Checkout provides a flexible way to build your own checkout flow using Stripe's JavaScript SDK.

### Managing Checkout Sessions

You can interact with the Checkout Session to update various details.

*   **Read Session Data**:
    *   [Read session data](/js/custom_checkout/session.md)
*   **Apply Promotion Code**:
    *   [Apply a promotion code](/js/custom_checkout/apply_promotion_code.md)
*   **Remove Promotion Code**:
    *   [Remove a promotion code](/js/custom_checkout/remove_promotion_code.md)
*   **Update Shipping Address**:
    *   [Update the Customer's shipping address](/js/custom_checkout/update_shipping_address.md)
*   **Update Billing Address**:
    *   [Update the Customer's billing address](/js/custom_checkout/update_billing_address.md)
*   **Update Email Address**:
    *   [Update the Customer's email address](/js/custom_checkout/update_email.md)
*   **Update Phone Number**:
    *   [Update the Customer's phone number](/js/custom_checkout/update_phone_number.md)
*   **Update Tax ID Information**:
    *   [Update the Customer's business name and tax ID](/js/custom_checkout/update_tax_id_info.md)
*   **Update Line Item Quantity**:
    *   [Update line item quantities](/js/custom_checkout/update_line_item_quantity.md)
*   **Update Shipping Option**:
    *   [Update the selected shipping option](/js/custom_checkout/update_shipping_option.md)
*   **Run Server Update**: Wrap an async function to update the Checkout Session on your server.
    *   [Run server update](/js/custom_checkout/run_server_update.md)

### Creating Custom Checkout Elements

You can create specific Elements within the Custom Checkout context.

*   **Billing Address Element**:
    *   [Create a Billing Address Element](/js/custom_checkout/create_billing_address_element.md)
*   **Shipping Address Element**:
    *   [Create a Shipping Address Element](/js/custom_checkout/create_shipping_address_element.md)
*   **Currency Selector Element**:
    *   [Create a Currency Selector Element](/js/custom_checkout/create_currency_selector_element.md)

### Retrieving Custom Checkout Elements

You can retrieve previously created Elements within the Custom Checkout context.

*   **Payment Element**:
    *   [Get the Payment Element](/js/custom_checkout/get_payment_element.md)
*   **Billing Address Element**:
    *   [Get the Billing Address Element](/js/custom_checkout/get_billing_address_element.md)
*   **Shipping Address Element**:
    *   [Get the Shipping Address Element](/js/custom_checkout/get_shipping_address_element.md)
*   **Express Checkout Element**:
    *   [Get the Express Checkout Element](/js/custom_checkout/get_express_checkout_element.md)
*   **Currency Selector Element**:
    *   [Get the Currency Selector Element](/js/custom_checkout/get_currency_selector_element.md)

### Customizing Appearance

You can customize the visual appearance of Elements used in Custom Checkout.

*   **Change Appearance**: Use the Appearance API to modify colors, fonts, borders, etc.
    *   [Change the visual customization of Elements using the Appearance API](/js/custom_checkout/change_appearance.md)
*   **Load Custom Fonts**: Load additional custom fonts into your Elements.
    *   [Load additional custom fonts into Elements](/js/custom_checkout/load_fonts.md)

### Custom Checkout Element Events

Elements within Custom Checkout emit events similar to standard Elements.

*   **Change Event**: Triggered when Checkout Session data changes.
    *   [Change event](/js/custom_checkout/element_events/on_change.md)
*   **Ready Event**: Triggered when the Element is fully rendered.
    *   [Ready event](/js/custom_checkout/element_events/on_ready.md)
*   **Focus Event**: Triggered when the Element gains focus.
    *   [Focus event](/js/custom_checkout/element_events/on_focus.md)
*   **Blur Event**: Triggered when the Element loses focus.
    *   [Blur event](/js/custom_checkout/element_events/on_blur.md)
*   **Escape Event**: Triggered when the escape key is pressed within an Element.
    *   [Escape event](/js/custom_checkout/element_events/on_escape.md)
*   **LoadError Event**: Triggered when the Element fails to load.
    *   [LoadError event](/js/custom_checkout/element_events/on_loaderror.md)
*   **Confirm Event**: Triggered from the Express Checkout Element when the customer finalizes their payment.
    *   [Confirm event](/js/custom_checkout/element_events/on_confirm.md)
*   **Cancel Event**: Triggered from the Express Checkout Element when the payment interface is dismissed.
    *   [Cancel event](/js/custom_checkout/element_events/on_cancel.md)

### Checkout Events

Listen to Checkout events to respond to changes on your checkout page.

*   **Change Event**: Triggered when Checkout Session data changes.
    *   [Change event](/js/custom_checkout/change_event.md)

## Embedded Checkout

Embedded Checkout allows you to embed the entire Stripe Checkout experience directly into your website.

### Managing Embedded Checkout

*   **Mount embedded Checkout**: Attach Checkout to a DOM element.
    *   [Mount embedded Checkout](/js/embedded_checkout/mount.md)
*   **Unmount embedded Checkout**: Detach Checkout from the DOM.
    *   [Unmount embedded Checkout](/js/embedded_checkout/unmount.md)
*   **Destroy embedded Checkout**: Remove and destroy the Checkout instance.
    *   [Destroy embedded Checkout](/js/embedded_checkout/destroy.md)

## React Stripe.js Checkout

This section covers checkout-related functionalities when using the React Stripe.js library.

### Managing Checkout Sessions

*   **Apply Promotion Code**:
    *   [Apply a promotion code](/js/react_stripe_js/checkout/apply_promotion_code.md)
*   **Remove Promotion Code**:
    *   [Remove a promotion code](/js/react_stripe_js/checkout/remove_promotion_code.md)
*   **Update Shipping Address**:
    *   [Update the Customer's shipping address](/js/react_stripe_js/checkout/update_shipping_address.md)
*   **Update Billing Address**:
    *   [Update the Customer's billing address](/js/react_stripe_js/checkout/update_billing_address.md)
*   **Update Email Address**:
    *   [Update the Customer's email address](/js/react_stripe_js/checkout/update_email.md)
*   **Update Phone Number**:
    *   [Update the Customer's phone number](/js/react_stripe_js/checkout/update_phone_number.md)
*   **Update Tax ID Information**:
    *   [Update the Customer's business name and tax ID](/js/react_stripe_js/checkout/update_tax_id_info.md)
*   **Update Line Item Quantity**:
    *   [Update line item quantities](/js/react_stripe_js/checkout/update_line_item_quantity.md)
*   **Update Shipping Option**:
    *   [Update the selected shipping option](/js/react_stripe_js/checkout/update_shipping_option.md)
*   **Run Server Update**: Wrap an async function to update the Checkout Session on your server.
    *   [Run server update](/js/react_stripe_js/checkout/run_server_update.md)

## Payment Request Events

*   [PaymentRequest events](/js/payment_request/events.md)

## Appendix

*   [Viewport meta tag requirements](/js/appendix/viewport_meta_requirements.md)