[{"data":1,"prerenderedAt":530},["ShallowReactive",2],{"bootstrap":3,"blog-introducing-our-hosted-checkout-application":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","the-new-payments-api-built-for-how-people-pay-now","The new Payments API. Built for how people pay now.","\u003Cp>The new Payments API. Built for how people pay now.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":299,"featured":11,"seoMetaTags":300,"layout":364,"blogPostCarousel":427,"_seoMetaTags":491,"authors":525},{"text":279,"isExternal":11,"url":280,"link":281},"Introducing our hosted checkout application.","",{"_modelApiKey":212,"slug":282},"introducing-our-hosted-checkout-application","January 20, 2022",{"name":285,"picture":286},"Simone Fiorucci",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874508-commercelayeravatarsquareff7e27.png","Simone Fiorucci — Marketing Manager at Commerce Layer",1280,"png",{"x":292,"y":292},0.5,{},[],"shopping-cart","Not only an out-of-the-box, hosted payment solution for developers who are working with Commerce Layer and looking for a one-stop integration, but also and above all a powerful reference tool to build your own custom checkout experience with unlimited flexibility.",{"color":298,"name":8},"gray","portrait",[301,305,309,312,316,319,322,326,330,334,337,341,345,349,353,356,360],{"attributes":302,"tag":303,"content":304},null,"title","Introducing Our Hosted Checkout Application",{"attributes":306,"tag":308,"content":302},{"property":307,"content":304},"og:title","meta",{"attributes":310,"tag":308,"content":302},{"name":311,"content":304},"twitter:title",{"attributes":313,"tag":308,"content":302},{"name":314,"content":315},"description","Both a hosted checkout app for those who need a one-stop integration and a reference tool to build your own custom checkout flow with unlimited flexibility.",{"attributes":317,"tag":308,"content":302},{"property":318,"content":315},"og:description",{"attributes":320,"tag":308,"content":302},{"name":321,"content":315},"twitter:description",{"attributes":323,"tag":308,"content":302},{"property":324,"content":325},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1640020957-introducing-our-new-hosted-checkout-application.jpg?auto=format&fit=max&w=1200",{"attributes":327,"tag":308,"content":302},{"property":328,"content":329},"og:image:width","1200",{"attributes":331,"tag":308,"content":302},{"property":332,"content":333},"og:image:height","630",{"attributes":335,"tag":308,"content":302},{"name":336,"content":325},"twitter:image",{"attributes":338,"tag":308,"content":302},{"property":339,"content":340},"og:locale","en",{"attributes":342,"tag":308,"content":302},{"property":343,"content":344},"og:type","article",{"attributes":346,"tag":308,"content":302},{"property":347,"content":348},"og:site_name","Commerce Layer",{"attributes":350,"tag":308,"content":302},{"property":351,"content":352},"article:modified_time","2025-10-08T16:58:40Z",{"attributes":354,"tag":308,"content":302},{"property":355,"content":280},"article:publisher",{"attributes":357,"tag":308,"content":302},{"name":358,"content":359},"twitter:card","summary_large_image",{"attributes":361,"tag":308,"content":302},{"name":362,"content":363},"twitter:site","@commercelayer",[365,371,378,381,392,395,401,404,410,413,416,421,424],{"_modelApiKey":366,"copy":367,"listStyle":368,"darkTheme":11,"buttons":369,"color":370,"indent":7},"wysiwyg","\u003Cp>Building an intuitive checkout flow is crucial to every ecommerce business, as the checkout experience has a direct impact on conversion rate and a customer’s trust. The numbers speak loudly. \u003Cstrong>The average cart abandonment rate globally is about 70%\u003C\u002Fstrong>, according to data collected by \u003Ca href=\"https:\u002F\u002Fmarketing.dynamicyield.com\u002Fbenchmarks\u002Fcart-abandonment-rate\u002F\" target=\"_blank\">Dynamic Yield\u003C\u002Fa>. Businesses can lose as much as \u003Cstrong>$18 billion in yearly sales revenue\u003C\u002Fstrong> due shopping cart abandonment as reported by Forrester Research.\u003C\u002Fp>\n\n\u003Cp>Commerce Layer ships with a flexible \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fhow-tos\u002Fcheckout\" target=\"_blank\">checkout API\u003C\u002Fa> that developers can use to build \u003Cstrong>exceptional checkout experiences\u003C\u002Fstrong> for their clients. Today, we're thrilled to announce that we've released a \u003Cstrong>new hosted checkout application\u003C\u002Fstrong> on top of our APIs. It’s a React‑based, PCI & PSD2‑compliant, production‑ready implementation that developers can \u003Cstrong>integrate with just a single link\u003C\u002Fstrong> or use as an open-source reference for their projects.\u003C\u002Fp>\n","directional",[],"violet",{"_modelApiKey":372,"title":373,"preTitle":374,"linkText":375,"darkTheme":11,"link":376},"link_block","React checkout.","Open-source","View on GitHub",{"_modelApiKey":203,"text":375,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":377,"link":302,"anchor":280,"openForm":11,"form":302,"htmlClassNames":280},"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fmfe-checkout",{"_modelApiKey":366,"copy":379,"listStyle":368,"darkTheme":11,"buttons":380,"color":370,"indent":11},"\u003Ch3>A simple, mobile‑first interface\u003C\u002Fh3>\n\n\u003Cp>During the checkout process, where you ask customers for personal information, maintaining trust and removing distractions is paramount to completion. An ideal checkout experience \u003Cstrong>makes the purchasing process easy and streamlined.\u003C\u002Fstrong> That’s why we opted for a minimal, mobile‑first interface with a clean design and 3 steps.\u003C\u002Fp>\n\n\u003Ch4>1. Customer\u003C\u002Fh4>\n\n\u003Cp>Here is where customers provide their email address, billing and shipping information. In this step, \u003Cstrong>logged in customers can reuse their saved addresses\u003C\u002Fstrong> to accelerate the process. In the case of digital product purchases, the shipping address form doesn't appear.\u003C\u002Fp>\n",[],{"_modelApiKey":382,"border":7,"caption":280,"image":383,"size":391,"darkTheme":11,"rounded":7,"color":370},"image_block",{"url":384,"alt":385,"title":385,"width":386,"height":387,"format":388,"focalPoint":389,"customData":390},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1640021479-customer-step.jpg","Hosted checkout — customer step",1535,1336,"jpg",{"x":292,"y":292},{},"standard",{"_modelApiKey":366,"copy":393,"listStyle":368,"darkTheme":11,"buttons":394,"color":370,"indent":11},"\u003Ch4>2. Delivery\u003C\u002Fh4>\n\n\u003Cp>Here, customers select a shipping method for their order. In the case of digital product purchases, this step doesn't appear.\u003C\u002Fp>\n",[],{"_modelApiKey":382,"border":7,"caption":280,"image":396,"size":391,"darkTheme":11,"rounded":7,"color":370},{"url":397,"alt":398,"title":398,"width":386,"height":387,"format":388,"focalPoint":399,"customData":400},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1640022043-delivery-step.jpg","Hosted checkout — delivery step",{"x":292,"y":292},{},{"_modelApiKey":366,"copy":402,"listStyle":368,"darkTheme":11,"buttons":403,"color":370,"indent":11},"\u003Ch4>3. Payment\u003C\u002Fh4>\n\n\u003Cp>Here, customers select a payment method and place the order. In this step, \u003Cstrong>logged in customers can reuse their saved credit cards to accelerate payment.\u003C\u002Fstrong> In case the order balance is zero — e.g. the customer is paying with a gift card code — this step is bypassed. All the \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fhow-tos\u002Fpayments\" target=\"_blank\">supported payment gateways\u003C\u002Fa> are available out-of-the-box. \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fexternal-resources\u002Fexternal-payment-gateways\" target=\"_blank\">External gateways\u003C\u002Fa> would require additional customization.\u003C\u002Fp>\n",[],{"_modelApiKey":382,"border":7,"caption":280,"image":405,"size":391,"darkTheme":11,"rounded":7,"color":370},{"url":406,"alt":407,"title":407,"width":386,"height":387,"format":388,"focalPoint":408,"customData":409},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1640022288-payment-step.jpg","Hosted checkout — payment step",{"x":292,"y":292},{},{"_modelApiKey":366,"copy":411,"listStyle":368,"darkTheme":11,"buttons":412,"color":370,"indent":11},"\u003Cp>Each step can be edited by the customer at any time. The order status determines the current step, which stays consistent across sessions. An \u003Cstrong>order summary\u003C\u002Fstrong> is always visible, letting shoppers have a complete view of what they’re buying.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":414,"listStyle":368,"darkTheme":11,"buttons":415,"color":370,"indent":11},"\u003Ch3>Three ways you can leverage the new checkout application\u003C\u002Fh3>\n\n\u003Cp>Depending on your project's requirements and use case you can utilize the new checkout application in 3 different ways.\u003C\u002Fp>\n\n\u003Ch4>1. The no‑code, hosted way\u003C\u002Fh4>\n\n\u003Cp>If you have basic branding requirements or are looking for a quick interim solution, you can leverage the \u003Cstrong>hosted version provided by Commerce Layer.\u003C\u002Fstrong> \u003C\u002Fp>\n\n\u003Cp>The integration is as easy as generating a URL and redirecting the customer to a Commerce Layer hosted page. You can generate a valid checkout URL in 3 simple steps:\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>1.\u003C\u002Fstrong> \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\" target=\"_blank\">Get a valid access token\u003C\u002Fa> with a sales channel application. Follow the \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\u002Fpassword\" target=\"_blank\">password flow\u003C\u002Fa> if you want to checkout as a logged customer.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>2.\u003C\u002Fstrong> \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Forders\u002Fcreate\" target=\"_blank\">Create an order\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fline_items\u002Fcreate\" target=\"_blank\">add some line items\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>3.\u003C\u002Fstrong> Checkout the order using the following URL format:\u003C\u002Fp>\n",[],{"_modelApiKey":417,"code":418,"showLineNumbers":11,"highlightLines":280,"language":419,"size":420},"code_block","# Format\nhttps:\u002F\u002F\u003Cyour-organization-slug>.commercelayer.app\u002Fcheckout\u002F:order_id?accessToken=\u003Cyour-access-token>\n\n# Example\nhttps:\u002F\u002Fmy-brand.commercelayer.app\u002Fcheckout\u002FPrnYzoVeha?accessToken=eyJhbGciOiJIUzUxMiJ9.eyJvcm...","shell","Wide",{"_modelApiKey":366,"copy":422,"listStyle":368,"darkTheme":11,"buttons":423,"color":370,"indent":11},"\u003Cp>This option can be used if you want to accelerate your project's go‑live while developing a custom checkout flow. You can add your logo and a primary color for some basic branding.\u003C\u002Fp>\n\n\u003Chr>\n\n\u003Cp>\u003Cstrong>Pros\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>No coding skills required\u003C\u002Fli>\n\u003Cli>Ready to use\u003C\u002Fli>\n\u003Cli>Fully managed\u003C\u002Fli>\n\u003Cli>Automatic updates\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>Cons\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Limited branding\u003C\u002Fli>\n\u003Cli>No custom domain\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n\n\u003Ch4>2. The low‑code way\u003C\u002Fh4>\n\n\u003Cp>In case your checkout requires a higher level of customization than what's provided by the hosted version, you can \u003Cstrong>fork the repository, make your adjustments and deploy it to your favorite provider\u003C\u002Fstrong> (Netlify, Vercel, Heroku, etc.) in one click. \u003C\u002Fp>\n\n\u003Cp>This approach can be a very good compromise between customization and time‑to‑market. And if your changes make sense for the larger audience, we'd be happy to review your PRs and merge them into the main branch!\u003C\u002Fp>\n\n\u003Chr>\n\n\u003Cp>\u003Cstrong>Pros\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Low coding required\u003C\u002Fli>\n\u003Cli>Additional branding cues\u003C\u002Fli>\n\u003Cli>Custom domain\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>Cons\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Self-hosted\u003C\u002Fli>\n\u003Cli>Manual updates\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n\n\u003Ch4>3. The full‑code way\u003C\u002Fh4>\n\n\u003Cp>If you want to design a fully‑customized checkout flow on top of Commerce Layer APIs, you can \u003Cstrong>use our checkout application as a reference and build your own\u003C\u002Fstrong> by leveraging our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-react-components\" target=\"_blank\">React components\u003C\u002Fa> or \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sdk\" target=\"_blank\">SDK\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>Bear in mind that the hosted version will always be at your disposal for multiple use cases. For example, your customer service advisor may want to create a checkout link for a shopping cart and send it directly to the customer, bypassing the custom \u003Cem>.com\u003C\u002Fem> flow.\u003C\u002Fp>\n\n\u003Chr>\n\n\u003Cp>\u003Cstrong>Pros\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Customized branding\u003C\u002Fli>\n\u003Cli>Custom experience\u003C\u002Fli>\n\u003Cli>Custom domain\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>Cons\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Greater coding required\u003C\u002Fli>\n\u003Cli>Self-hosted\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n",[],{"_modelApiKey":366,"copy":425,"listStyle":368,"darkTheme":11,"buttons":426,"color":370,"indent":11},"\u003Ch3>Share your feedback!\u003C\u002Fh3>\n\n\u003Cp>We’re happy to continue providing our developer community flexibility in selecting a path for your use case and business environment — we want our new checkout to be an asset.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>Not only an out‑of‑the‑box, hosted solution for those who are looking for a one‑click integration, but also a powerful reference tool for those who want to build custom experiences with no constraints of any kind.\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>Now we want to hear from you. Try it out and help us make it even better. We welcome your feedback and want to learn about your use cases. For any questions or comments, please \u003Ca href=\"https:\u002F\u002Fslack.commercelayer.app\u002F\" target=\"_blank\">join our Slack community\u003C\u002Fa> and reach out to us.\u003C\u002Fp>\n",[],{"displayTitle":428,"cta":302,"ctaText":280,"cards":429},"Your next read",[430,445,463,476],{"_modelApiKey":212,"link":431,"subtitle":435,"date":435,"author":436,"additionalAuthors":440,"icon":441,"abstract":442,"tag":443,"displayTitle":432,"cardRatio":299,"featured":444},{"text":432,"isExternal":11,"url":280,"link":433},"Understanding omnichannel payments.",{"_modelApiKey":212,"slug":434},"understanding-omnichannel-payments","February 23, 2021",{"name":285,"picture":437},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":438,"customData":439},{"x":292,"y":292},{},[],"credit-card","Creating a seamless customer journey across all channels isn't an easy task unless you can leverage a reliable omnichannel payment framework.",{"color":298,"name":100},0,{"_modelApiKey":212,"link":446,"subtitle":450,"date":450,"author":451,"additionalAuthors":458,"icon":459,"abstract":460,"tag":461,"displayTitle":447,"cardRatio":11,"featured":462},{"text":447,"isExternal":11,"url":280,"link":448},"How to sell internationally with a single Shopify store and Commerce Layer.",{"_modelApiKey":212,"slug":449},"how-to-sell-internationally-with-a-single-shopify-store-and-commerce-layer","February 22, 2022",{"name":452,"picture":453},"Filippo Conforti",{"url":454,"alt":455,"title":455,"width":289,"height":289,"format":290,"focalPoint":456,"customData":457},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874449-commercelayeravatarsquare212f3f.png","Filippo Conforti — CEO at Commerce Layer",{"x":292,"y":292},{},[],"globe","Shopify is a popular ecommerce platform that helps merchants grow their businesses, until it comes to expanding internationally. Learn how to extend Shopify with Commerce Layer, enabling brands to scale internationally without the trade-offs.",{"color":298,"name":8},1,{"_modelApiKey":212,"link":464,"subtitle":468,"date":468,"author":469,"additionalAuthors":473,"icon":295,"abstract":474,"tag":475,"displayTitle":465,"cardRatio":11,"featured":38},{"text":465,"isExternal":11,"url":280,"link":466},"How does Commerce Layer compare with Shopify Plus?",{"_modelApiKey":212,"slug":467},"how-does-commerce-layer-compare-with-shopify-plus","November 10, 2020",{"name":452,"picture":470},{"url":454,"alt":455,"title":455,"width":289,"height":289,"format":290,"focalPoint":471,"customData":472},{"x":292,"y":292},{},[],"Discover why and how Commerce Layer can be a great alternative to Shopify, especially if you want to go headless and expand your business internationally.",{"color":298,"name":8},{"_modelApiKey":212,"link":477,"subtitle":481,"date":481,"author":482,"additionalAuthors":486,"icon":487,"abstract":488,"tag":489,"displayTitle":478,"cardRatio":11,"featured":490},{"text":478,"isExternal":11,"url":280,"link":479},"Omnichannel vs multichannel: the key differences.",{"_modelApiKey":212,"slug":480},"omnichannel-vs-multichannel-the-key-differences","July 28, 2021",{"name":285,"picture":483},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":484,"customData":485},{"x":292,"y":292},{},[],"arrows-out","Terms like omnichannel and multichannel are often used interchangeably, but the two approaches are quite different. Learn where they diverge and how Commerce Layer can help you develop true omnichannel experiences.",{"color":298,"name":100},3,[492,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523],{"attributes":302,"tag":303,"content":304},{"attributes":494,"tag":308,"content":302},{"property":307,"content":304},{"attributes":496,"tag":308,"content":302},{"name":311,"content":304},{"attributes":498,"tag":308,"content":302},{"name":314,"content":315},{"attributes":500,"tag":308,"content":302},{"property":318,"content":315},{"attributes":502,"tag":308,"content":302},{"name":321,"content":315},{"attributes":504,"tag":308,"content":302},{"property":324,"content":325},{"attributes":506,"tag":308,"content":302},{"property":328,"content":329},{"attributes":508,"tag":308,"content":302},{"property":332,"content":333},{"attributes":510,"tag":308,"content":302},{"name":336,"content":325},{"attributes":512,"tag":308,"content":302},{"property":339,"content":340},{"attributes":514,"tag":308,"content":302},{"property":343,"content":344},{"attributes":516,"tag":308,"content":302},{"property":347,"content":348},{"attributes":518,"tag":308,"content":302},{"property":351,"content":352},{"attributes":520,"tag":308,"content":302},{"property":355,"content":280},{"attributes":522,"tag":308,"content":302},{"name":358,"content":359},{"attributes":524,"tag":308,"content":302},{"name":362,"content":363},[526],{"name":285,"picture":527},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":528,"customData":529},{"x":292,"y":292},{},1791379912053]