Express Checkout Element

ExpressCheckoutElement Use the ExpressCheckoutElement from @stripe/react-stripe-js to accept payments through one-click payment buttons. The component must be rendered inside an Elements Provider. ### 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 the Express Checkout Element. - allowedShippingCountries By default, the Express Checkout Element allows all countries for shipping. You can specify which countries are allowed for shipping in the Express Checkout Element with a list of two-letter country codes. - applePay Specify Apple Pay specific options. These are passed through to the Apple Pay API. - recurringPaymentRequest Specify a request to set up a recurring payment. See the Apple Pay documentation for more details. - paymentDescription - managementURL - regularBilling - amount - label - recurringPaymentStartDate - recurringPaymentEndDate - recurringPaymentIntervalUnit - recurringPaymentIntervalCount - trialBilling - amount - label - recurringPaymentStartDate - recurringPaymentEndDate - recurringPaymentIntervalUnit - recurringPaymentIntervalCount - billingAgreement - deferredPaymentRequest Specify a request to set up a deferred payment. See the Apple Pay documentation for more details. - paymentDescription - managementURL - deferredBilling - amount - amountType Indicates whether the billing amount is known at request time. When set to 'final', the Apple Pay payment sheet shows the configured amount. - label - deferredPaymentDate - billingAgreement - freeCancellationDate If set, you must also supply a freeCancellationDateTimeZone. - freeCancellationDateTimeZone If set, you must also supply a freeCancellationDate. These are tz timezones such as America/Los_Angeles, Europe/Dublin, and Asia/Singapore. - automaticReloadPaymentRequest Specify a request to set up an automatic reload payment. See the Apple Pay documentation for more details. - paymentDescription - managementURL - automaticReloadBilling - amount - label - automaticReloadPaymentThresholdAmount - billingAgreement - billingAddressRequired Controls whether the Express Checkout Element collects the billing address. The default value depends on your integration: - If you pass allowedShippingCountries, phoneNumberRequired, shippingAddressRequired, emailRequired, applePay, lineItems, or business when creating the Express Checkout Element, billingAddressRequired defaults to false. - Otherwise, billingAddressRequired defaults to true. You can explicitly set billingAddressRequired to true or false to override the default behavior. We highly recommend that you collect the billing address because it can be used to perform address verifications and block fraudulent payments. - business Provide information about your business that's displayed in the Express Checkout Element. This information will be retrieved from your Stripe account if it's not provided. - name The name of your business. Your business name is used to signal to the customer who they're paying. Klarna always retrieves the business name from your Stripe account, even when this option is set. - 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. - emailRequired Collect the customer's email by setting this option to true. - 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. - lineItems An array of LineItem objects. These LineItems are shown as line items in the payment interface, if line items are supported. You can represent discounts as negative amount LineItems. - name The name of the line item surfaced to the customer in the payment interface. - amount The amount in the currency's subunit (for example, cents, yen, etc.). - paymentMethods By default, the Express Checkout Element displays all payment methods possible as a result of your Dashboard configuration. This is the auto behavior. If you don't want to show a given payment method as a payment option, set its property in paymentMethods to never. - 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. This causes Apple Pay to be shown in supported browsers even when the customer isn't logged in to Apple Pay, resulting in a sign-in flow. 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. This causes Google Pay to be shown in supported browsers even when the customer isn't logged in to Google Pay, resulting in a sign-in flow. - link - paypal - klarna - 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. - phoneNumberRequired Collect the customer's phone number by setting this option to true. PayPal doesn't provide a phone number, even when this option is set to true. Google Pay makes a best effort to return the phone number registered to the wallet, but doesn't guarantee it will be provided in all cases. - shippingAddressRequired Collect the customer's shipping address by setting this option to true. If true, you must also supply a valid shippingRates option in either the create, click, or shippingaddresschange events. - shippingRates An array of ShippingRate objects. The first shipping rate listed appears in the payment interface as the default option. - id Unique identifier for the object. - amount The amount to charge for shipping. - displayName The name of the shipping rate, displayed to the customer in the payment interface. - deliveryEstimate The estimated range for how long shipping takes, displayed to the customer in the payment interface. We recommended using the object format, but you can use a string instead. - maximum The upper bound of the estimated range. If empty, it represents no upper bound (for example, infinite). - unit A unit of time. - value Must be greater than 0. - minimum The lower bound of the estimated range. If empty, it represents no lower bound. - unit A unit of time. - value Must be greater than 0. - onConfirm The confirm event is triggered from an Express Checkout Element when the customer finalizes their payment. - onClick The click event is triggered from an Express Checkout Element when the customer clicks a payment button. - onCancel The cancel event is triggered from an Express Checkout Element when the payment interface is dismissed. 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. - onShippingAddressChange Triggered when a customer changes their shipping address. - onShippingRateChange Triggered when a customer changes their shipping rate. - 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