Checkout Form Provider

CheckoutFormProvider > This feature is in private preview. See Embedded form for more information. The CheckoutFormProvider component wraps your React tree for the embedded form integration. It initializes the Embedded form SDK and provides it in a context so nested components can render the CheckoutForm component and access session data. To use CheckoutFormProvider, 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 CheckoutFormProvider 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 CheckoutFormProvider. - clientSecret The Checkout Session client secret or a promise that resolves to the client secret. - appearance Match the design of your site with the appearance option. The layout stays consistent, but you can modify colors, fonts, borders, padding, and more. Note: the embedded form doesn't support rules. - loader Display skeleton loader UI while waiting for the embedded form to fully load after it's mounted. Default is 'auto' (Stripe determines whether or not to show a loader UI). - fonts An array of custom fonts that the embedded form can use. You can specify fonts as CssFontSource or CustomFontSource objects. - savedPaymentMethod Options to configure what the embedded form displays when used to save payment details during payment. - enableRedisplay Toggle if the embedded form redisplays Customer saved Payment Methods. Default is 'auto'. - enableSave Toggle if the embedded form collects consent to save a customer's payment methods. Default is 'auto'. ### Example title Mount CheckoutFormProvider