mfe-checkout VS commercelayer-sdk

{ "version": 2.0, "title": "Commerce Layer Starter", "description": "A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.", "previewMedia": { "type": "image", "src": ".sanity-template/assets/preview.jpg", "alt": "Preview image with Commerce Layer, Nextjs, and Netlify's logo" }, "technologies": [ { "id": "nextjs", "name": "Next.js", "url": "https://nextjs.org" }, { "id": "commercelayer", "name": "Commerce Layer", "url": "https://commercelayer.io" }, { "id": "netlify", "name": "Netlify", "url": "https://netlify.com" } ], "deployment": { "provider": "netlify", "sites": [ { "id": "studio", "type": "studio", "title": "Commerce Layer Starter Studio", "description": "A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.", "dir": "./studio", "previewMedia": { "type": "image", "src": ".sanity-template/assets/studio.png", "alt": "A preview image of the Sanity studio." }, "buildSettings": { "base": "studio", "dir": "/dist", "cmd": "npm run build" } }, { "id": "web", "type": "web", "title": "Commerce Layer Starter Web", "description": "A multi-country ecommerce starter built with Sanity Studio, Commerce Layer, Next.js, and deployed to Netlify.", "dir": "./web", "previewMedia": { "type": "image", "src": ".sanity-template/assets/preview.jpg", "alt": "A preview image of the web demo." }, "buildSettings": { "base": "/", "dir": "/out", "cmd": "npm run build" } } ] } }

The Drop-in library uses the Commerce Layer checkout application to provide a PCI-compliant, PSD2-compliant, and production-ready checkout flow powered by Commerce Layer APIs. The orders API will return the checkout URL using the format .checkout.commercelayer.app/:order_id?accessToken=. The Drop-in library will then automatically pass that URL to the checkout button (with class clayer-shopping-bag-checkout) alongside the order ID and required access token. When you click on the checkout button, you will be redirected to the checkout application. Upon successful checkout, the order will be sent to and can be managed in the orders management system (OMS), in the Commerce Layer dashboard. So cool, right 🙃?

In this article, you'll practice the basics of headless commerce by building a simple ecommerce product page with static content, HTML5, and TailwindCSS as seen in the screenshot below. We will then integrate Commerce Layer to make the website shoppable using the Drop-in Javascript library and deploy the application to the cloud. The Drop-in library is a minimal way to get started with headless commerce and Commerce Layer, but if you're building for your business you can opt for a deeper integration using the Commerce Layer SDK.