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 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 checkout with 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 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 / @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 example embeddedcheckout component nextjs / @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 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 help\@chord co