Checkout Provider

CheckoutElementsProvider The CheckoutElementsProvider component allows you to use Element components and access data from your Checkout Session in any nested component. Wrap the portion of your React tree that renders individual Element components to make the Checkout instance available via React context. To use CheckoutElementsProvider, call loadStripe from @stripe/stripe-js with your publishable key. The loadStripe function asynchronously loads the Stripe.js script and initializes a Stripe object. Pass the returned Promise to CheckoutElementsProvider along with the client secret of your Checkout Session. ### Props - stripe A Stripe object or a Promise resolving to a Stripe object. The easiest way to initialize a Stripe object is with the Stripe.js wrapper module. After this prop has been set, it can not be changed. - options Options for CheckoutElementsProvider. - clientSecret The Checkout Session client secret or a promise that resolves to the client secret. - elementsOptions A set of options to configure Elements created with Checkout Sessions. - appearance Match the design of your site with the appearance option. 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 or CustomFontSource objects. - savedPaymentMethod Options to configure what Elements displays when used to Save payment details during payment. - 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. 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. - allowed Whether Adaptive Pricing can be used with this integration. Default is false. Additional setup is required before you can use Adaptive Pricing with Checkout elements. ### Example title Mount CheckoutElementsProvider