A Guide to Shopify Checkout Extensions & the Payments Platform
Merchants worldwide lose billions of dollars in online sales each year due to poorly designed checkout experiences. With the average global cart abandonment rate hovering around 69.8%, the Baymard Institute estimates that retailers in the US and EU can recover $260 billion worth of lost sales by optimizing their store checkout. Shopify checkout extensions and the Payment’s Platform can help.
In July 2021, Shopify announced many changes to their online platform including some major updates to Shopify Checkout. In this post, we explore the Shopify checkout app extensions and the Shopify Payments Platform to help you understand what they are and what you can expect from them as a merchant.
An Overview of the Shopify Checkout Improvements
Shopify’s core engineering team works relentlessly to ensure their checkout remains fast and optimized at all times. And with the latest updates, they’re taking Shopify Checkout to a whole new level.
Nearly 8% of the world’s adult population checked out on Shopify in 2020. And that’s not all. Shopify processed over $5 billion worth of transactions during the Black Friday Cyber Monday (BFCM) weekend in 2020.
They’ve made some major upgrades to their infrastructure so every Shopify store will be able to handle the same volume of checkouts as the entire platform did during the 2020 BFCM weekend. They’ve also introduced new ways to customize checkout with Shopify app development.
In the past, you could only customize checkout by making small changes from within the editor unless you were a Shopify Plus merchant with access to checkout.liquid customizations. Soon, every Shopify merchant will not only have the ability to make simple changes to the look and feel of checkout but also implement complex UI changes and custom business logic.
You’ll be able to create unique shopping experiences using the checkout app extensions and Shopify Payments platform. Let’s explore the latest updates to see what’s in store for you.
Shopify Checkout App Extensions
The new Shopify checkout app extensions allow developers to extend their app code into checkout using two components: UI extensions and scripts. Together, they empower you to customize every aspect of the checkout experience without compromising its security, performance, and reliability.
UI extensions
UI extensions allow Shopify app developers to add new functionality and alter the checkout appearance using the UI components, APIs, and extension points.
The extensions use a new technology called App Bridge Checkout that hosts the extension code on Shopify’s CDN. And that’s not all. Besides hosting the UI extension code in the cloud, it runs it inside a Web Worker sandbox in the browser during checkout. This ensures the extension is secure and performant without compromising its flexibility.
Thus, you’ll be able to use multiple extensions simultaneously without worrying about store performance. And the best part is that your customizations will also show up on Shop Pay. So, you can design a seamless shopping experience for your customers.
The above diagram illustrates how UI extensions work with the example of a Post-purchase UI extension. When customers navigate to the checkout page, the page loads the Checkout::PostPurchase::ShouldRender extension point to check if a post-purchase page must be shown to the customer.
Optionally, it also checks if the post-purchase page needs pre-rendering, and if required, it downloads the data and stores it in the local browser cache. This allows it to load the post-purchase page instantly after the transaction completes.
Suppose the extension point responds with a confirmation, i.e., render:true. In that case, when the customer completes checkout, they’ll be redirected to a custom post-purchase page before being forwarded to the final “Thank you” page that completes their transaction.
With UI extensions, you’ll be able to set up age verification checks and display sale terms for customers to accept before they proceed to checkout. Similarly, you’ll be able to add buttons to the checkout page to help customers add related products, free gifts, or samples to their order based on their cart items.
You can also use them to set up post-purchase surveys, upsells, information pages, and promotional offers. They’ll help you boost sales, gain insights into customer preferences, and reduce customer churn.
Scripts V2
Shopify Plus merchants have used scripts to customize the checkout for over five years now. To improve its power, reliability, development, and execution, Shopify has rebuilt Scripts using WebAssembly. And courtesy of some helpful updates to their app developer tools, they’ve also made it possible for Shopify developers to deploy scripts using custom workflows.
Scripts V2 is an overhaul of the existing infrastructure. According to Shopify’s tests, even complex script codes can now execute in under ten milliseconds. And the best part is that they’re developing the infrastructure so that scripts can be deployed, installed, and shared using apps. So, merchants won’t need to deal with code, and developers will be able to reuse scripts across multiple stores.
Here’s a generalized overview of the lifecycle of a Shopify script.
Shopify developers will now be able to create, test, configure, and deploy scripts to a custom app. Post-deployment, they’ll be able to monitor their scripts through their Partner Dashboard to review runtime and errors.
Merchants using scripts through custom apps will be able to install, enable, and test them on their stores. Once deployed, customers will trigger script execution when they begin to checkout, and Shopify will execute them as they complete the process.
Scripts let you customize the server-side checkout logic to suit your needs. For instance, you can use them to hide shipping rates or payment methods for your B2B customers. Or, you can use them to display handling times based on cart items. You’ll have the flexibility to define how different attributes trigger different outcomes and reuse that logic across stores easily.
What makes Scripts V2 unique is that they’re co-located and run on Shopify’s servers. This allows them to scale with demand effortlessly.
Further, they use declarative APIs instead of the previously used procedural ones. A quick refresher, API software allows two applications to communicate with one another. This means that developers can specify what they want the API to do, and Shopify will figure out the best way to do it. So, you’ll get the best performance possible every single time the script executes.
Shopify Payments Platform
The checkout is incomplete without payment. And Shopify is about to make it easier for merchants to accept payments online. They’re launching a new Payments Platform that will allow authorized payment partners to build and integrate payments gateways as Shopify extensions.
Using payments apps, you’ll have the ability to choose when you capture customer payments: during purchase or post fulfillment. You’ll also be able to accept payments using methods like:
Buy Now Pay Later
Bank transfers
Cash + ATM
Cryptocurrency
Wallets
These features will help you provide your customers with more convenience. Moreover, you’ll have the ability to use it with Checkout app extensions to set up custom logic for accepting payments.
For example, you’ll be able to set it up so that B2B customers can pay for their orders post-fulfillment while retail customers pay upfront. Likewise, you’ll have the ability to trigger different payment options or redirect buyers to different pages after payment based on customer and cart attributes.
Scale Effortlessly with Shopify’s Checkout Improvements
Shopify checkout extensions and the new Payments Platform simplify your ability to customize checkout. You won’t need to hack checkout.liquid or worry about an inconsistent shopping experience anymore.
With the power of checkout app extensions and Scripts V2, you’ll be able to design unique and consistent shopping experiences. And the new Shopify Payments Platform will allow you to accept new methods of payments as they emerge.
If you need a Shopify Partner that can help you scale your checkout, we’re here to help. Schedule a free discovery call with our Shopify experts to discover how we can help you design bespoke shopping experiences for your customers.