## Elements with the Checkout Sessions API

Build an online checkout page using React, Stripe Elements, and the Checkout Sessions API. See [build a checkout page](https://docs.stripe.com/checkout/custom/quickstart.md) for steps on using Elements with the Checkout Sessions API.

The following Stripe.js methods are available to use as part of your integration.

### Initialize the Checkout Elements SDK

`stripe.initCheckoutElementsSdk(options?: object)`

This method initializes Checkout for [Checkout elements](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) integrations, where you compose individual Elements on your checkout page.

*   `options`
    *   Checkout initialization options.
    *   `clientSecret` The Checkout Session [client secret](https://docs.stripe.org/api/checkout/sessions/object#checkout_session_object-client_secret) or a promise that resolves to the client secret.
    *   `elementsOptions` A set of options to configure Elements created with Checkout.
        *   `appearance` Match the design of your site with the [appearance option](https://docs.stripe.com/elements/appearance-api.md). The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.
        *   `loader` Display skeleton loader UI while waiting for Elements to fully load after they're mounted. Default is `'auto'` (Stripe determines whether or not to show a loader UI).
        *   `fonts` An array of custom fonts that elements created from the `Elements` object can use. You can specify fonts as [CssFontSource](#css_font_source_object) or [CustomFontSource](#custom_font_source_object) objects.
    *   `savedPaymentMethod` Options to configure what Elements displays when used to [Save payment details during payment](https://docs.stripe.com/payments/checkout/save-during-payment.md).
        *   `enableRedisplay` Toggle if Elements redisplays Customer saved Payment Methods. Default is `'auto'`. Prior to Clover, this defaulted to `'never'`.
        *   `enableSave` Toggle if the Payment Element collects consent to save a Customer's Payment Methods. Default is `'auto'`. Prior to Clover, this defaulted to `'never'`.
    *   `syncAddressCheckbox` Used with the [Address Element](https://docs.stripe.com/elements/address-element.md). The `syncAddressCheckbox` parameter configures which Address Element to show the checkbox. The checkbox allows the customer the option to sync billing and shipping addresses when both Billing and Shipping Address Elements are used in a single Elements instance. The default value is `'billing'`.
    *   `adaptivePricing` Options for [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components).
        *   `allowed` Whether Adaptive Pricing can be used with this integration. Default is `false`. [Additional setup](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components) is required before you can use Adaptive Pricing with Checkout elements.
    *   `defaultValues` If customer details are already known, this option may be passed to prefill