Embedded Checkout

8min
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.
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.
Branding and Customization: Your business can customize and maintain its branding and design elements throughout the checkout process, reinforcing your brand identity. 
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.
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.
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.
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.
Mobile-Friendly: Embedded checkouts can be optimized for mobile devices, ensuring a user-friendly experience for customers shopping on smartphones and tablets.
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:
Enabling a store variable on ChordOMS
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_CHECKOUTwith a value of enabled and click the + to save
﻿
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 [email protected].
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 <div id="checkout" >
}

export default EmbeddedCheckout
/** @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 <div id="checkout" >
}

export default EmbeddedCheckout
﻿
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 <div id="checkout" >
}

export default EmbeddedCheckout
/** @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 <div id="checkout" >
}

export default EmbeddedCheckout
﻿
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.
If you have any questions, please contact [email protected]﻿
﻿
Updated 20 Mar 2024
Did this page help you?
Checkout
Post Checkout Cross-Sell