Introducing our hosted checkout application.
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. The average cart abandonment rate globally is about 70%, according to data collected by Dynamic Yield. Businesses can lose as much as $18 billion in yearly sales revenue due shopping cart abandonment as reported by Forrester Research.
Commerce Layer ships with a flexible checkout API that developers can use to build exceptional checkout experiences for their clients. Today, we're thrilled to announce that we've released a new hosted checkout application on top of our APIs. It’s a React‑based, PCI & PSD2‑compliant, production‑ready implementation that developers can integrate with just a single link or use as an open-source reference for their projects.
A simple, mobile‑first interface
During the checkout process, where you ask customers for personal information, maintaining trust and removing distractions is paramount to completion. An ideal checkout experience makes the purchasing process easy and streamlined. That’s why we opted for a minimal, mobile‑first interface with a clean design and 3 steps.
1. Customer
Here is where customers provide their email address, billing and shipping information. In this step, logged in customers can reuse their saved addresses to accelerate the process. In the case of digital product purchases, the shipping address form doesn't appear.
2. Delivery
Here, customers select a shipping method for their order. In the case of digital product purchases, this step doesn't appear.
3. Payment
Here, customers select a payment method and place the order. In this step, logged in customers can reuse their saved credit cards to accelerate payment. In case the order balance is zero — e.g. the customer is paying with a gift card code — this step is bypassed. All the supported payment gateways are available out-of-the-box. External gateways would require additional customization.
Each step can be edited by the customer at any time. The order status determines the current step, which stays consistent across sessions. An order summary is always visible, letting shoppers have a complete view of what they’re buying.
Three ways you can leverage the new checkout application
Depending on your project's requirements and use case you can utilize the new checkout application in 3 different ways.
1. The no‑code, hosted way
If you have basic branding requirements or are looking for a quick interim solution, you can leverage the hosted version provided by Commerce Layer.
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:
1. Get a valid access token with a sales channel application. Follow the password flow if you want to checkout as a logged customer.
2. Create an order and add some line items.
3. Checkout the order using the following URL format:
# Format
https://<your-organization-slug>.commercelayer.app/checkout/:order_id?accessToken=<your-access-token>
# Example
https://my-brand.commercelayer.app/checkout/PrnYzoVeha?accessToken=eyJhbGciOiJIUzUxMiJ9.eyJvcm...
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.
Pros
- No coding skills required
- Ready to use
- Fully managed
- Automatic updates
Cons
- Limited branding
- No custom domain
2. The low‑code way
In case your checkout requires a higher level of customization than what's provided by the hosted version, you can fork the repository, make your adjustments and deploy it to your favorite provider (Netlify, Vercel, Heroku, etc.) in one click.
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!
Pros
- Low coding required
- Additional branding cues
- Custom domain
Cons
- Self-hosted
- Manual updates
3. The full‑code way
If you want to design a fully‑customized checkout flow on top of Commerce Layer APIs, you can use our checkout application as a reference and build your own by leveraging our React components or SDK.
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 .com flow.
Pros
- Customized branding
- Custom experience
- Custom domain
Cons
- Greater coding required
- Self-hosted
Share your feedback!
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.
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.
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 join our Slack community and reach out to us.