commercelayer-sanity-template VS mfe-checkout

In this section, you will learn how we built a starter with an ecommerce application with transactional functionalities powered by Commerce Layer APIs, structured content on Sanity, imported seed data, and deployment configuration to Netlify. If you want to follow along with the guide, you can take a look at the finished project on GitHub here or even install the starter here.

{ "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 🙃?