> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/chord-oms-overview/checkout/embedded-checkout.md).

# Embedded Checkout

## Embedded Checkout

## 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

![](https://3559351341-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGejRW1RLC9yasX56Xzxu%2Fuploads%2Fgit-blob-59d142c230e4b6ecd002d5627a143efa40246fde%2Fembedded-checkout-1.jpg?alt=media)

### 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&#x20;*****EmbeddedCheckout Component*****&#x20;- 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
```

<https://github.com/chordcommerce/chord-ui/tree/main/packages/gatsby-starter-autonomy>

**Example&#x20;*****EmbeddedCheckout Component*****&#x20;- 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
```

<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&#x20;*****Gatbsy*****:**

Set `GATSBY_STRIPE_USE_EMBED_CHECKOUT` = `true` in your front-end store Environment Variables.

**If you are using&#x20;*****Nextjs*****:**

Set `STRIPE_USE_EMBED_CHECKOUT`= `true` in your front-end store Environment Variables.

{% hint style="success" %}
If you have any questions, please contact <help@chord.co>
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/chord-oms-overview/checkout/embedded-checkout.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.