--- title: Embedded Checkout slug: oms/embedded-checkout docTags: createdAt: 2023-11-10T17:07:18.779Z --- # Introduction An embedded checkout is an online purchasing process seamlessly integrated within your store, allowing your customers to complete their transactions without being redirected to an external platform or payment gateway. It offers a more cohesive and branded shopping experience. # Why does embedded checkout matter Embedded checkout matters because it enhances the overall shopping experience, improves conversion rates, and gives your business greater control over branding and data security, ultimately leading to increased sales and customer satisfaction. 1. **Seamless User Experience**: Embedded checkouts provide a smooth and consistent user experience by keeping your customers within the familiar environment of your store. This reduces friction during the checkout process, leading to higher conversion rates. 2. **Branding and Customization**: Your business can customize and maintain its branding and design elements throughout the checkout process, reinforcing your brand identity. 3. **Reduced Cart Abandonment**: Embedded checkouts can help reduce shopping cart abandonment rates. When customers are redirected to external payment pages, they may become confused, which can lead to them abandoning their purchases. 4. **Data Security**: It allows for more control over the security of customer data. With an embedded checkout, your business can implement security measures to protect sensitive information. 5. **Better Insights**: Embedded checkouts can also provide your business with more comprehensive data and analytics about the entire customer journey. This can help you better understand customer behavior and improve the buying process. 6. **Cross-selling and Upselling**: With an embedded checkout, businesses have the opportunity to incorporate cross-selling and upselling features within the checkout process, increasing the average transaction value. 7. **Mobile-Friendly**: Embedded checkouts can be optimized for mobile devices, ensuring a user-friendly experience for customers shopping on smartphones and tablets. 8. **Reduced Technical Barriers**: External payment gateways can sometimes discourage customers who want to avoid creating new accounts or using unfamiliar services. Embedded checkouts simplify the process, making it easier for your customers # How to Setup Embedded Checkout Enabling embedded checkout involves two steps: 1. Enabling a store variable on ChordOMS 2. Changes to your storefront code ## Activate in ChordOMS Simply providing `STRIPE_EMBED_CHECKOUT=enabled` will prepare a checkout session suitable for using Stripe’s embedded checkout. Navigate to **Settings** --> **Store Setup** --> Scroll down to **Environment Variables** and add `STRIPE_EMBED_CHECKOUT`with a value of enabled and click the **+** to save ::Image[]{src="https://api.archbee.com/api/optimize/TmutqdeXiIw-V3gBZXVjd/RreJSGqmb_WumLxICwzW-_image-11-10-2023-at-1238-pm.jpg" size="76" width="2420" height="818" position="flex-start" darkWidth="2420" darkHeight="818" showCaption="false"} ## Activate on storefront The steps to implement Embedded Checkout on your storefront will depend on when your site was launched - specifically, *when your individual site's codebase was forked* from one of Chord's starter kits. Please follow the relevant directions below based on whether your site was forked *before *or *after* ***January 1, 2024.*** If you did not orignally fork your site from one of Chord's starter kits or are unsure of when your codebase was forked, please reach out to ***help\@chord.co.*** ### If launched *before *January 1, 2024 Having forked a version of the Chord starter kit that *does not *incorporate Embedded Checkout, implementation requires the configuration of the aforementioned OMS environment variable and an*** EmeddedCheckout component*** in your front-end codebase. It does not require a front-end environment variable (unless you choose to implement one). Please see the example components below. **Example *****EmbeddedCheckout Component***** - Gatsby** ```typescript /** @jsx jsx */ import { useEffect, useState } from 'react' import { loadStripe } from '@stripe/stripe-js' import { navigate } from 'gatsby' import { useCart, useCheckout } from '@chordcommerce/gatsby-theme-autonomy' const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PK_KEY, { stripeAccount: process.env.GATSBY_STRIPE_CONNECTED_ACCOUNT, }) const EmbeddedCheckout = () => { const { forgetCart } = useCart() const { prepareCheckout } = useCheckout() const [checkout, setCheckout] = useState(null) const [error, setError] = useState(false) const handleComplete = async function (checkout, cart) { const { embeddedCheckout } = checkout checkout.unmount() navigate( `/order/confirmation/${cart.number}/${embeddedCheckout.checkoutSessionId}` ) forgetCart() } useEffect(() => { const initCheckout = async () => { try { const cart = await prepareCheckout() const stripe = await stripePromise // Must have STRIPE_EMBED_CHECKOUT=enabled in OMS store. const checkoutObj = await stripe.initEmbeddedCheckout({ clientSecret: cart.clientSecret || cart.checkoutSessionId, onComplete: () => handleComplete(checkoutObj, cart), }) setCheckout(checkoutObj) } catch (error) { setError(error) console.error(error) } } if (!checkout) initCheckout() }, []) // eslint-disable-line useEffect(() => { checkout?.mount('#checkout') return () => checkout?.destroy() }, [checkout]) return
} export default EmbeddedCheckout ``` ::File{src="https://github.com/chordcommerce/chord-ui/tree/main/packages/gatsby-starter-autonomy" label="https://github.com/chordcommerce/chord-ui/tree/main/packages/gatsby-starter-autonomy"} **Example *****EmbeddedCheckout Component***** - NextJS** ```typescript /** @jsxImportSource theme-ui */ import { useEffect, useState } from 'react' import { loadStripe } from '@stripe/stripe-js' import { useRouter } from 'next/router' import { useCart, useCheckout } from '@chordcommerce/react-autonomy' const stripePromise = loadStripe(process.env.STRIPE_PK_KEY, { stripeAccount: process.env.STRIPE_CONNECTED_ACCOUNT, }) const EmbeddedCheckout = () => { const { forgetCart } = useCart() const { prepareCheckout } = useCheckout() const [checkout, setCheckout] = useState(null) const [error, setError] = useState(false) const router = useRouter(); const handleComplete = async function (checkout, cart) { const { embeddedCheckout } = checkout checkout.unmount() router.push(`/order/confirmation/${cart.number}/${embeddedCheckout.checkoutSessionId}`) forgetCart() } useEffect(() => { const initCheckout = async () => { try { const cart = await prepareCheckout() const stripe = await stripePromise // Must have STRIPE_EMBED_CHECKOUT=enabled in OMS store. const checkoutObj = await stripe.initEmbeddedCheckout({ clientSecret: cart.clientSecret || cart.checkoutSessionId, onComplete: () => handleComplete(checkoutObj, cart), }) setCheckout(checkoutObj) } catch (error) { setError(error) console.error(error) } } if (!checkout) initCheckout() }, []) // eslint-disable-line useEffect(() => { checkout?.mount('#checkout') return () => checkout?.destroy() }, [checkout]) return
} export default EmbeddedCheckout ``` ::File{src="https://github.com/chordcommerce/nextjs-starter-autonomy" label="https://github.com/chordcommerce/nextjs-starter-autonomy"} ### If launched *after *January 1, 2024 Having forked a version of the Chord SDK that already incorporates Embedded Checkout, implementation requires only the configuration of a few environment variables in your OMS instance and your front-end. **If you are using *****Gatbsy*****:** Set `GATSBY_STRIPE_USE_EMBED_CHECKOUT` = `true` in your front-end store Environment Variables. **If you are using *****Nextjs*****:** Set `STRIPE_USE_EMBED_CHECKOUT`= `true` in your front-end store Environment Variables. :::hint{type="success"} If you have any questions, please contact [help@chord.co](mailto\:help@chord.co) :::