Interface PaymentElementConfiguration

Configuration for the Checkout-owned Payment Element.

Checkout Session Private Preview

interface PaymentElementConfiguration {
    savePaymentMethodOptInBehavior?: SavePaymentMethodOptInBehavior;
    appearance?: RecursivePartial<
        {
            font: PaymentSheet.FontConfig;
            colors: | PaymentSheet.GlobalColorConfig
            | {
                light: PaymentSheet.GlobalColorConfig;
                dark: PaymentSheet.GlobalColorConfig;
            };
            shapes: {
                borderRadius: number;
                borderWidth: number;
                shadow: PaymentSheet.ShadowConfig;
            };
            primaryButton: PaymentSheet.PrimaryButtonConfig;
            embeddedPaymentElement: PaymentSheet.EmbeddedPaymentElementAppearance;
            formInsetValues: PaymentSheet.EdgeInsetsConfig;
            applyLiquidGlass?: boolean;
            navigationBarStyle?: PaymentSheet.NavigationBarStyle;
        },
    >;
    preferredNetworks?: CardBrand[];
    billingDetailsCollectionConfiguration?: Checkout.BillingDetailsCollectionConfiguration;
    removeSavedPaymentMethodMessage?: string;
    paymentMethodOrder?: string[];
    opensCardScannerAutomatically?: boolean;
    useAutocompleteEndpoints?: boolean;
    termsDisplay?: Record<string, PaymentSheet.TermsDisplay>;
    paymentMethodLayout?: PaymentSheet.PaymentMethodLayout;
    displaysMandateText?: boolean;
    rowSelectionBehavior?: EmbeddedRowSelectionBehavior;
    applePay?: ApplePayConfiguration;
    googlePay?: GooglePayConfiguration;
    link?: LinkConfiguration;
}

Properties

savePaymentMethodOptInBehavior? appearance? preferredNetworks? billingDetailsCollectionConfiguration? removeSavedPaymentMethodMessage? paymentMethodOrder? opensCardScannerAutomatically? useAutocompleteEndpoints? termsDisplay? paymentMethodLayout? displaysMandateText? rowSelectionBehavior? applePay? googlePay? link?

Properties

OptionalsavePaymentMethodOptInBehavior

savePaymentMethodOptInBehavior?: SavePaymentMethodOptInBehavior

Controls how Payment Element asks customers to save payment methods.

Optionalappearance

appearance?: RecursivePartial<
    {
        font: PaymentSheet.FontConfig;
        colors: | PaymentSheet.GlobalColorConfig
        | {
            light: PaymentSheet.GlobalColorConfig;
            dark: PaymentSheet.GlobalColorConfig;
        };
        shapes: {
            borderRadius: number;
            borderWidth: number;
            shadow: PaymentSheet.ShadowConfig;
        };
        primaryButton: PaymentSheet.PrimaryButtonConfig;
        embeddedPaymentElement: PaymentSheet.EmbeddedPaymentElementAppearance;
        formInsetValues: PaymentSheet.EdgeInsetsConfig;
        applyLiquidGlass?: boolean;
        navigationBarStyle?: PaymentSheet.NavigationBarStyle;
    },
>

Customizes the appearance of Payment Element.

OptionalpreferredNetworks

preferredNetworks?: CardBrand[]

Preferred networks for co-branded cards.

OptionalbillingDetailsCollectionConfiguration

billingDetailsCollectionConfiguration?: Checkout.BillingDetailsCollectionConfiguration

Controls how billing details are collected during checkout.

OptionalremoveSavedPaymentMethodMessage

removeSavedPaymentMethodMessage?: string

A custom message shown when a saved payment method is removed. iOS only.

OptionalpaymentMethodOrder

paymentMethodOrder?: string[]

Overrides the default order of payment method types.

OptionalopensCardScannerAutomatically

opensCardScannerAutomatically?: boolean

Whether the new-card form opens the card scanner automatically.

OptionaluseAutocompleteEndpoints

useAutocompleteEndpoints?: boolean

Whether Stripe address autocomplete endpoints are used.

OptionaltermsDisplay

termsDisplay?: Record<string, PaymentSheet.TermsDisplay>

Controls legal agreement text for each payment method type.

OptionalpaymentMethodLayout

paymentMethodLayout?: PaymentSheet.PaymentMethodLayout

The layout used when Payment Element is presented as a sheet.

OptionaldisplaysMandateText

displaysMandateText?: boolean

Whether the embedded view displays mandate text. Defaults to false.

OptionalrowSelectionBehavior

rowSelectionBehavior?: EmbeddedRowSelectionBehavior

Controls selection in the embedded view.

OptionalapplePay

applePay?: ApplePayConfiguration

Apple Pay configuration. iOS only.

OptionalgooglePay

googlePay?: GooglePayConfiguration

Google Pay configuration. Android only.

Optionallink

link?: LinkConfiguration

Link display configuration.

Settings

Member Visibility

On This Page

Properties