The full guide to integrating Zuora in your website
How do you build a web storefront and integrate Zuora with your website?
Table of contents
Building an ecommerce website in 2023 isn’t a novel thing, but it doesn’t mean it is easy. Customers have high expectations, expecting fast loading times, mobile-friendly content, localised content, secure transactions and more. Providers such as Shopify and Amazon have transformed the ecommerce market and reset customer’s expectations to sky high-level. It would be nice if you could hook up Zuora and Shopify and be done with, but unfortunately it isn’t that simple. Here’s what you’ll need to think about:
In this guide, we'll assume you are building a website from scratch. If you aren't, feel free to skip some sections such as building a website. Enjoy!
To fulfil those expectations, you will need to get building and coding. You will need to set up a DevOps infrastructure, front and back-end frameworks, and release processes. The key areas will be:
Now the nice thing is none of this is specific to Zuora, so you will find plenty of developers happy and willing to help. The basics for a subscription ecommerce website are similar to a regular website, but we’ll tackle all the particularities and specificities of subscriptions commerce in the next sections, and in particular Zuora commerce.
How Limio can help
Limio creates a website for you, so you don’t need to think about hosting, framework, infrastructure, testing, security, SEO and analytics. It all comes off-the-shelf, which you can then host on your own custom domain and plug-in your analytics infrastructure.
Create your product and pricing pages
Ok so you have the barebone of a website, now it’s time to create your Zuora Commerce website! First thing first, your customers need to browse the catalog. For subscriptions, it can be fairly simple (e.g. Spotify Free, Spotify Premium, Spotify Family) as opposed to sprawling ecommerce catalog. It can however be more complex if you have many products and add-ons. So let’s break down what you need to think about. We’ll merge in product and pricing pages, as a lot of subscription products will present all the information in one place, but you could also separate them.
Product & Pricing Page:
Again, not much that is specific to Zuora Commerce, though you will need to pull the price from somewhere. Do you hardcode them on your website, store them on a local database, or do you pull them dynamically from Zuora? Let’s consider the options:
The right option for you will depend on the use case. Simple pricing with little promotional activity? Hardcoding might be fine for those simple use cases or to start with. More pricing with lots of promotional activity and where load time is critical? Storing prices in a local database will make more sense. Complex pricing such as consumption-based price? Pulling prices from Zuora will guarantee the best accuracy, but the experience might be slow. A good workaround can be to show prices such as ‘From $99 a month’ or ‘Starting at $9/user/month’ and performing calculations in a cart in the cart or checkout. Don’t forget you’ll also need to pull the name of the product and pricing from somewhere, and this could change with time (Digital - 50% off).
Limio has many off-the-shelf components that help to create product & pricing pages rapidly, from pricing displays, to FAQ, to banner displays. Limio can store prices locally for speed or can query Zuora for more complex pricing.
In subscription commerce, having a shopping cart is often deemed optional because the purchasing process typically involves selecting a subscription plan rather than adding multiple individual items to a cart. However, even if not prominently displayed, maintaining a "hidden" cart system can offer several benefits:
In essence, while not always front and centre in subscription commerce, a cart system, even if hidden, offers valuable tools for customer engagement and operational flexibility.
So if you want to create a cart, how do you do it? Zuora doesn’t include a cart concept, so you’re on your own here and will need to build the logic as part of your website. What are the key components of a cart?
Limio facilitates Zuora Commerce, so Limio always has a cart, whether visible to the user or not. This allows marketers to create abandoned cart campaigns, but also gives the flexibility to cross-sell and upsell offers and add-ons down the line. If the cart is visible, Limio has standard components that can be embedded on any page on the website or have its own dedicated page (or both!). The cart can be also custom-made via the Limio SDK.
In the retail world, no one likes to be forced to create an account before purchasing a product. It’s well-known that it hurts the conversion funnel But in the subscription world, this is often a must-have. Subscriptions are complex products that require self-service - without registration and authentication, how will customers manage their subscriptions? So while it’s possible to skip authentication, it’s not best practice.
Not only will it make the customer experience more convoluted, but if you have an unauthenticated checkout, it makes provisioning an order much more complex. You will need to think about how you link the order to the customer’s identity. Post-purchase, there will need to be mechanisms to require the subscriber to create their account, but none are error-proof. Do registration on the order complete? The customer can close the tab. Do it via email? It can end up in spam or ignored. And there are complex edge cases, for example what if the customer makes a mistake in their email, how do you resolve those issues and assign the subscription to the correct identity?
Spare yourself some pain and plan to build and maintain an authentication mechanism as part of your ecommerce. If you already have an authentication mechanism, which most media or SaaS customers will already have, then you should re-use that. If you don’t have currently like most retail companies, then you’ve got two options:
You will need to develop the UI for the authentication and registration. Most third-party identity platforms will have their own standards. If you plan on custom-building, developing the UI for registration and authentication should focus on simplicity, clarity, and security. Start by designing a clean and intuitive layout, with clearly labelled input fields for essential information like username, email, and password. You’ll need to incorporate visible validation messages to guide users through the process, and ensure that error messages are helpful without compromising security (don’t give away too much!). For a seamless user experience, integrate options for social media logins and remember to design for mobile responsiveness. Lastly, prioritise security features like two-factor authentication that is appropriate to your audience.
Last but not least, how do you link authentication to your overall customer identifier in Zuora and Salesforce (if they already exist). If you are john@smith.com, how does that relate to Zuora Account A-00001 and Salesforce Account ID 100AEXFF ? For example, to connect Zuora to Salesforce, Zuora requires a CRM ID at the time of creation, so that Zuora Z360 can show the relevant data in Salesforce. This is often work that needs to be carried within the authentication layer. Else you would need to query the external systems when creating the order, degrading the customer experience by increasing the order processing time due to the additional API calls involved. The best practice is to pass the relevant identifier to the identity provider, store them in the JWT token, and then use the information as part of the order provisioning.
Authentication is one of the most difficult points of integrating your website with Zuora. Limio has spent years of development to make it seamless. For example, Limio can support both un-authenticated and authenticated purchases, and those can be for different use cases. For example, a gift or reseller purchase could be unauthenticated and all other owned-subscriptions purchases can be authenticated. For authenticated purchases, Limio will federate identity with your identity provider via OAuth/OpenId, whether custom-built or third-party authentication provider like Microsoft Azure, AWS Cognito, or Okta. The user will seamlessly go to your registration or authentication page, and if already logged-in, will seamlessly land on the checkout. Limio can also read a JWT token to pull the relevant identifiers such as Salesforce Account, so that this information can be distributed to various systems including Zuora, as well as segment information to create personalised experience. Don’t want to do that? Limio is able to orchestrate the order to first create information in Salesforce and pass them to the necessary fields in Zuora. And the beauty of all this is that all this can be achieved with zero code, just point & click within the Limio platform.
The checkout is likely the largest beast to tackle in subscription commerce, even more complex than authentication. Offering a checkout that can cater to all the different subscription pricing, the complexity of certain baskets, the regulatory requirements around cancellation and price displays, and the ability to purchase, renew, upgrade throughout the subscription lifecycle is complex enough. But layer on integration for payments, tax, addresses, and the requirement for security and speed, as well as marketer’s desire to control the look & feel and experiment with different checkouts and it becomes a nightmare. We haven’t even touched how to do it specifically with Zuora.
Let’s breakdown the key components of a checkout:
To go further, you may need to think about:
Lots to think about right? So let’s define the key components and focus on doing the basics:
Et voilà, you’ve got a checkout that can handle a purchase and make the Order API call to Zuora to create a Zuora Customer, Zuora Subscription, Zuora Payment Method, Zuora Contacts, Zuora Invoice and Zuora Payments. But let’s not get ahead of yourself as that’s in the next section.
Limio aims to dramatically simplify creating a checkout that is flexible enough for marketers to experiment with while integrating seamlessly with the necessary systems including Zuora. Limio’s Modular Checkout allows users to flexibly drag & drop different components such as user, address and payment fields in different places and configure them via a no-code interface. Out-of-the-box integrations with authentication providers such as AWS Cognito, address prefill such as Loqate, and payment and tax via Zuora allow companies to plug & play rapidly with a functional checkout.
Let’s talk about a serious topic: fraud. If you have a checkout, it will attract fraudsters. Checkouts are highly sought after targets as the British Airways hack showed years ago. So you will need to implement security features such as rate limitations, ReCAPTCHA, and more. Luckily, Zuora (and Limio) are PCI-compliant so it will reduce the amount of things to care about such as card tokenization and encryption of payment data. But here’s what you’ll still need to worry about:
Fraudsters don’t sleep sadly and so you will need to continuously monitor your checkout and implement good practice with your company such as:
Limio is PCI-compliant so needless to say, Limio’s Modular Checkout is built-in with security in mind. From SSL/TLS, encryption, CORS policy, rate limiting features and constant monitoring by our team, you can rest easy that we’re keeping watch.
Congratulations, you’ve got your first order! Now what needs to happen? Well as it turns out, an awful lot. Typically, you will need to do things in the following order:
One of the difficulties here is that those calls must be made sequentially. Zuora needs the CRM ID coming from Salesforce, and entitlement systems need to know the order has been successful and paid for before provisioning access.
You may also want to send webhooks to other systems that are necessary to be aware of the new order in your architecture, for example an email marketing system.
And what about if something fails or there is performance degradation? Well guess what, you might need to build something to track failures, be it a reporting dashboard or an application. This will allow you to operationally manage failures, for example due to payments and follow-up with customers or send abandon basket campaigns, and slowness, for example due to latency between applications. It’s worth knowing that if something fails in Zuora, Zuora does a full rollback so you will have nothing created if the payment fails for example due to a gateway error (but you may have some data in Salesforce given it was the initial step).
Limio includes a flexible order plugin that allows to mix out-of-the-box integrations with leading apps such as Zuora and Salesforce, embed custom logic, for example for custom fields, and integrate with additional critical applications. All orders are tracked via events that include comprehensive reporting on order failures, allow for order resubmission in certain scenarios, provide full logs on order steps executed, and breakdown every API call and the response times for each step giving you full visibility on speed and performance.
Last but not least, you need an order complete page. They are typically three types of order complete page:
Regardless of the order complete page, there is one key challenge around order completion: how do you provision access and entitlements as soon as the order is completed? It is immensely frustrating to a customer to perform a purchase and then not get access to the product immediately. Yet, Access and Entitlement systems are often custom-built and therefore required to be integrated with the ecommerce systems. Integration means failures, race conditions, and performance degradation are all on the table. One safe way to make sure this doesn’t happen is for order to be synchronous, so the customer only gets to the order complete page once all systems have been provisioned.
An even better experience, especially for media companies, is being able to jump back into the trigger point of the purchase, for example an article where the paywall was triggered. This requires conserving the referrer through the whole conversion funnel and being able to redirect the customer, for example via a Call-To-Action, back to the article.
Limio supports all three options for order complete (onboarding-focussed, order-focussed and redirect) and allows marketers to customise the look & feel of them. You can decide whether to make orders synchronous or not, depending on the risk for your Access and Entitlement system. And for specific use cases, such as media companies, Limio can conserve the initial referrer so that the customer can get back into the initial article they wanted to read!
© 2023
Innovate42 Ltd, trading as Limio, company number 10653083. Limio® is a registered trademark in the UK, EU and US. Our registered office is: Unit 13.1.1 The Leather Market, Weston Street, London, England, SE1 3ER