Checkout Form

CheckoutForm > This feature is in private preview. See Embedded form for more information. Use the CheckoutForm from @the relevant part of the product to render the embedded form; a single form that handles payment, address, and other elements. The component must be rendered inside a CheckoutFormProvider. ### 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 Embedded form initialization options. - layout The layout of the embedded form. The 'expanded' layout is a single-step embedded form, while the 'compact' layout is a multi-step embedded form. When you leave this undefined, Stripe renders the layout it determines has the best conversion. - contacts An array of objects that you can use to display saved addresses in the embedded form. The first contact is automatically selected. - name The name of the contact. This might be a person, or a business name. - address The address of the contact. - line1 - line2 - city The name of a city, town, village, etc. - state The most coarse subdivision of a country. Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines. - postal_code The postal code or ZIP code, also known as PIN code in India. - country Two-letter country code, capitalized. Valid two-letter country codes are specified by the related setting alpha-2. - phone The phone number of the contact. - features Configuration for client-side features of the embedded form. Use this to disable default features of the Checkout Session that you prefer to implement in your own UI instead. - promotionCodeCollection Controls whether to show promotion code input in the embedded form. Defaults to 'auto'. - 'auto': Shows the promotion code input if the Checkout Session enables allow_promotion_codes. - 'never': Never shows the promotion code input in the embedded form. Use this if you build your own promotion code input outside of the form. - expressCheckout Express checkout configuration options. - buttonHeight By default, the height of the buttons are 44px. You can override this to specify a custom button height in the range of 40px-55px. - buttonTheme Specify the preferred button theme to use. By default, Elements determines the themes based on the specified appearance option. - applePay - googlePay - paypal - klarna - paymentMethods In addition to your Dashboard configuration, the CheckoutSession configuration also influences the availability of payment methods in the Embedded form. By default, it displays all available payment methods based on both configurations. When setting the paymentMethods option, the Embedded form merges your specified options with the default logic to determine the final set of payment methods displayed. - amazonPay - applePay Apple Pay has additional configurations that determine when Stripe can show it. By default, Apple Pay shows when the customer is using a supported platform and when we determine it's advantageous for your conversion. This is the auto behavior. If you want to always show Apple Pay when the customer is using a supported platform, you can set its property in paymentMethods to always. Apple Pay on non-Safari desktop browsers is only supported when its property in paymentMethods is set to always. - googlePay Google Pay has additional configurations that determine when Stripe can show it. By default, Google Pay shows when the customer is using a supported platform and when we determine it's advantageous for your conversion. This is the auto behavior. If you want to always show Google Pay when the customer is using a supported platform, you can set its property in paymentMethods to always. - link - paypal - onChange Callback called when any value in the change event payload changes. - onConfirm Triggered when the embedded form sends a confirm event. Use this to handle payment confirmation. - onReady Callback called once the Element is fully rendered. Recieves the ready event payload. - 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 Element. - onLoadError Callback called when the Element fails to load. ### Example title Render CheckoutForm