Express Checkout Element

ExpressCheckoutElement Use the ExpressCheckoutElement from @the relevant part of the product to accept payments through one-click payment buttons. The component must be rendered inside a CheckoutElementsProvider. ### 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 Express Checkout Element initialization 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 - buttonType Specify the preferred button type to display. - applePay Default is plain. - googlePay Default is buy. - paypal Default is paypal. - klarna Default is pay. - layout Specify how the buttons are arranged in a grid-like layout in the Express Checkout Element. Elements determines the layout by using certain factors, such as available space, number of buttons, and the defined layout object. - maxColumns Defines the maximum number of columns the Express Checkout Element can use to render. Default is 0, meaning unlimited. - maxRows Defines the maximum number of rows the Express Checkout Element can use to render. Default is 0, meaning unlimited. - overflow Specify whether or not to always hide the overflow menu or allow Elements to determine when to show the overflow menu. Default is auto. You can't specify both overflow: 'never' and set maxRows to a number greater than 0. - paymentMethodOrder By default, the Express Checkout Element uses a dynamic ordering that optimizes payment method display for each user. You can override the default order in which payment methods display in the Express Checkout Element with a list of payment method types. If there are payment methods that will show that are not specified in paymentMethodOrder, they display after the payment methods you specify. If you specify payment methods that will not show, they are ignored. - paymentMethods In addition to your Dashboard configuration, the CheckoutSession configuration also influences the availability of payment methods in the Express Checkout Element. By default, it displays all available payment methods based on both configurations. When setting the paymentMethods option, the Express Checkout Element 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 - onConfirm Triggered when the Element fires a confirm event. Use this to handle payment confirmation. - onCancel The cancel event is triggered when the payment interface is dismissed (e.g. the customer closes it). Note that in some browsers, the payment interface might be dismissed by the customer even after they authorize the payment. This means that you might receive a cancel event after receiving a confirm event. If you're using the cancel event as a hook for canceling the customer's order, make sure you also refund the payment that you just created. The following Checkout Elements support the cancel event: expressCheckoutElement and checkoutForm. - 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 ExpressCheckoutElement