Soumi Biswas The checkout page is the magic page of any eCommerce site where we get to see the conversion. It helps convert visitors to actual buyers. That is to say, the experience a user goes through on the checkout page becomes a deciding factor as to whether the conversion will take place or not. Most importantly, if you want your customers to return to your store, you need to offer an optimized BigCommerce checkout setting instead of the default setting.
Checkout Errors
It is a known fact that checkout errors have become a common issue with the checkout pages of any online store.
As a result, these cause friction in the customer’s buying journey. Therefore, visitors leave the site and abandon their shopping carts.
If you don’t want such a thing to happen to you and your store, you must optimize the store’s checkout page.
Basically, optimizing the checkout page by using the BigCommerce checkout feature will ensure that customers have a smooth checkout experience and conversion for the store.
Different Types of Errors
Checkout errors are a common thing for the checkout pages. The message pops up when an order fails during the checkout process. As a result, some of the errors that a customer usually faces:
- Shipping Errors
- Payment Errors
- Tax Errors
1. Shipping Errors
Shoppers will get shipping errors when the shopping cart/ shipping manager is not able to find a working shipping method for a combination of methods.
Similarly, an error will occur when it is not able to find the shipping address that the customer has entered.
On the other hand, the moment a shipping manager is unable to find a matching zone, the customer will see an error.
While producing a complete list of shipping options for the customer, the BigCommerce shipping manager looks forward to the customer’s shipping country, state/province, and even zip code.
1.1. How it Emerges
To begin with, based on the information provided, the shipping manager identifies the shipping zone that matches closely.
Furthermore, if a shipping zone match is found, the shipping manager then looks for any flat-rate shipping methods which are enabled for that zone.
The manager then gets rid of all flat-rate methods that don’t apply because of weight or cost restrictions, like non-applicable Ship by Order Total ranges, Ship by Weight ranges, or free shipping over $X methods.
After that, the shipping manager will look out for the real-time shipping methods that are enabled for that zone. Likewise, if it finds matching services, it sends out the details like product weight and dimension to the real-time quote provider.
The real-time quote system will then process these and return the shipping quotes to BigCommerce. Furthermore, the BigCommerce checkout page is going to display every matching viable flat-rate service and/or real-time quote.
If a customer is experiencing shipping issues, then you must identify at which point in the process the error appears.
1.2. Finding and Troubleshooting Shipping Errors
The following sections might help to troubleshoot the shipping errors.
1.2.1. Origin & Zones
You need to check the Shipping Origin address. Ensure you have entered the country, state/province, and zip code correctly. Likewise, if it is incorrect, real-time quotes can’t be processed.
You should look for shipping zones. In case a zone doesn’t support the customer’s address, then a shipping error might come up. So, all countries must be set up to avoid shipping errors from appearing on the checkout page.
In this case, you see a zone that should support the customer’s country, simply Edit the zone from the zone details. According to the zone created, the following actions can be taken. They are:
- Selection of Countries: See if your customer’s country is present within the list of Countries.
- Selection of States or Provinces: Check if your customer’s state or province is within the list of State/Provinces
- Advanced Selection: Check whether the customer’s postcode is within the Country and zip/postcode list.
Once the zones are reviewed, if everything looks exact then the issue might be in the zone’s shipping methods.
1.2.2. Shipping Methods
Shipping methods help to determine the shipping option that a customer gets to see during the BigCommerce checkout. There can be a flat rate method, such as the flat rate method based on the total order or weight.
Hence, real-time shipping services can calculate shipping costs based on origin, weight, and destination.
Usually, shipping methods can easily troubleshoot the error.
1.2.2.1. Flat-Rate Methods
Moreover, if using a flat rate method, make sure the customer’s order is within one of those specified ranges. In this case, it doesn’t fall within the specified ranges. In case it doesn’t fall within the range make it a point to include a default shipping cost.
If the order’s weight is outside the given range, a default shipping cost will be charged. If the field is left blank, a different shipping method will be used.
1.2.2.2. Real-Time Quotes
This section usually explains how to fix problems with shipping quotes from real-time shipping integrations. At the same time, integrated shipping errors are going to provide an error log, which is accessible via the store logs. Likewise, this can help to troubleshoot the shipping errors that appear at the time of BigCommerce checkout.
2. Tax Errors
Two types of tax errors can happen during the BigCommerce checkout process. Examples of issues include incorrect charges, or no tax charged for an order.
The troubleshooting steps for investigating the tax-related issue greatly depend on the method required for calculating the tax. There are two ways to set up the tax.
The ways to set up the tax are:
- Manually creating zones and rates
- Enabling automatic tax provider
2.1. Manual Tax
One needs to double-check the Calculate Tax Based On the field. This kind of setting allows controlling the address that must be used for determining the tax zone under which the customer falls. In case one is not sure about what they should be using, then contacting the local tax authority is the best choice.
Once the address is decided by the system for basing the tax, then create a zone for that address. In case there isn’t any zone for that address, then you have found the problem.
In case there is a zone, ensure that Calculate Tax is enabled. This can be done by going to the Tax Rates & Zones tab as you manually edit the tax setting. Also, you must double-check the ‘Tax Zone Applies To’ for figuring out whether the zone is applicable for all customers or for a selected group.
2.1.1. Things To Check
When everything is set correctly, you will need to ensure that the zone has tax rates. This can be done by clicking on the Tax Rates tab while editing the zone. Or simply by going to the Edit Rates while viewing the zones.
In case you don’t see any rates, then you know what the error is and accordingly you can add the tax rates.
2.2. Automatic Tax
If you are using an automatic tax provider, the troubleshooting chance gets limited. In case the tax is applied at a flat 10% tax rate, the tax provider switches to the fallback rate.
One can use the manual tax setup for calculating the fallback tax rates instead of the flat 10% rate.
In case taxes are charged incorrectly or if any tax has not been charged then you should check the status with the tax provider. This will help you to see performance issues.
One can also use the tax provider’s calculation tool for confirming the proper tax rates are being calculated for a certain region.
3. Payment Errors
Another error that one gets to see during the BigCommerce Payment Checkout is payment errors. It usually happens during the checkout process or within the control panel during order editing, like performing a refund or even manual capture.
However, it does not matter which payment gateway you might be using; the first troubleshooting step is to check the store logs.
First, the logs help to identify the issue and troubleshoot it.
The next step that one needs to take is to double-check the credentials entered for the payment gateway setup. Ensure your customer is using a valid credit card and has funds in their account. In case the error happens in the control panel as you try to perform an order action, each will have certain requirements.
For refunds, the transaction of the order must be settled at the payment gateway. Some payment gateways specify that the transaction must be older than 24 hours but within 60 days (about 2 months) before the money can be refunded.
3.1. Some Common PayPal Payment Errors
Here is a small list of some of the most common errors that one may encounter while using any one of the payment gateways. In this case, this list does not contain the error that you are facing, it’s better to contact the payment gateway for getting more information on the error means and ways to resolve it.
PayPal faces the following errors.
3.1.1. Error: If the seller accepts encrypted website payments only
Cause: This error gets displayed especially when the PayPal Account Profile is set to only accept payments from encrypted buttons. This situation interrupts the payment process and thus displays the error message.
To resolve this issue, the Encrypted Website Payments in the PayPal account must be turned off. To do this, the steps must be followed:
- Log into the PayPal account.
- Click on the Profile icon present on the right side of the page and next to the Log out button.
- Once the popup appears, you need to click Profile and Settings.
- On the left, just click on My selling tools from the menu.
- Click on Update, present on the right of Website preferences.
- In the Encrypted Website Payments section, select Off.
- Click Save.
3.1.2. Error: Security Header is Not Valid 10002
Cause: This error points toward an issue with the login information that one is using for the PayPal connection.
To resolve this error, one will need to remove the credentials and then re-enter them. In case one copies and pastes the data, it needs to be ensured that there are no spaces before or after the information. In case you continue to face issues, contacting PayPal Support for generating new credentials is a way out. Then those new credentials can be pasted into the text editor to avoid extra spaces.
3.1.3. Error: The transaction got refused due to duplicate invoice ID supply
Cause: This error is displayed especially when an account is basically used or has been used for a different store. The Order IDs of the BigCommerce store are usually the same as those used with your other store. Hence, PayPal is rejecting the transaction as a duplicate.
The best way to resolve this issue is to find your other store’s highest order ID. Once you find the ID, you can set BigCommerce order IDs a bit higher. This will ensure that there is no overlapping.
3.1.4. Error: Response code: 23. Response message: Invalid account number
Cause: The customer entered an incorrect credit card number.
As it is an issue with the customer’s credit card, there is nothing one can do without having the correct credit card info. In case you want to reach out to your customer, the Order ID is displayed in the error message. It would be good if one looked into the order information from the Orders section of the control panel. Also, the email address provided in the order details can be used.
3.1.5. Error: Response code: 26. Invalid Vendor Account
Cause: If you are getting this error message, then it’s because of one of the following:
- You just activated your account
- The login information is incorrect
There are many ways to resolve this issue. Make sure your account is at least an hour old. New accounts won’t become active unless an hour has passed after their creation. Verify the fact that all values are correct.
When people depend so much on online shopping, all these errors must be resolved to ensure a smooth and seamless checkout experience for the customers.
Online Shopping: Biggest Challenge
While turning online helped businesses of all-size to pull their loyal, as well as potential customers. However, customer retention was a tough job.
While shopping online from a site, most often shoppers leave the site if they find a better deal on another site. Or they leave the shopping cart if they find that they must fill out a long form to complete the checkout.
This is a never changing picture for online businesses. Since the checkout process has become the sole concern for eCommerce stores, working on it is important.
1. Solution: A Smooth BigCommerce Checkout Process
No matter whether you are running your online store on Shopify or WooCommerce or on the BigCommerce platform, shopping cart abandonment is a common issue. This needs to be fixed by the business house. Or else a business stands the chance of losing potential customers.
There are many ways to fix the checkout problems that a store might be facing. For this reason, merchants prefer to pick such eCommerce platforms that let them build their site or store with amazing features, including a seamless BigCommerce checkout.
Online Shopping: The Big Picture with A Difference
Although online shopping seems to be the future, statistics show that eCommerce sites are facing an issue of cart abandonment.
Online shoppers leave a site or their shopping cart because of multiple reasons. For instance, they might leave the site due to poor user experience or if the page takes too much time to load.
Some other reasons for cart abandonment that can’t be overlooked include high shipping costs and taxes, a lengthy checkout process, and more.
Moreover, certain types of errors related to incorrect tax being charged, failed shipping or payment-related orders, etc., can trigger various checkout errors on the checkout page.
Unless these errors are resolved quickly by the eCommerce store owners, BigCommerce checkout complaints from customers will keep surfacing.
The only way out is to resolve the errors and at the same time come up with an improved design for the BigCommerce checkout page and so on.
The Need to Work on The Checkout Errors
Yes, working on the checkout errors is important. If the checkout errors are not resolved, it will lead to shopping cart abandonment and loss of revenue for the business.
Let’s dive into the reasons mentioned below.
1. Digital Shopping is on the Rise
Since digital shopping is on the rise, businesses need to work on resolving checkout errors. If the errors are not resolved, there is a high chance of losing potential customers. They might visit a competitor’s site. Not only that, if errors persist, it is going to impact their brand image.
In this post-pandemic world, digital shopping is the new normal. The concept of online shopping was there even before COVID, but the percentage of online shoppers was drastically low.
Based on a report published by Statista, only 2 % of the German and Japanese respondents had never done any online purchases before 2022.
According to Statista, online purchase frequency has changed since the Coronavirus pandemic.
It was only after the pandemic that the percentage of online shoppers increased. To reach out to potential customers in this digital age, resolving errors is necessary.
2. Gain the Trust of Customers
The eCommerce industry saw exponential growth during the pandemic. Right from small-scale to mid-scale businesses from every industry vertical turned their business online.
However, customers won’t rely on a brand or a business that offers a poor user experience for a particular page or throughout the entire site.
They would go for other brands that offer a bespoke user experience from the moment they land on the site. Hence, working on the checkout errors for the checkout page is crucial.
3. Checkout Page Issues Is a Threat to Online Businesses
Why are checkout issues posing a threat to online businesses? Or why do eCommerce businesses need to work on optimizing the checkout process? The answer to these two questions is simple.
It’s true, the checkout experience not only affects customer satisfaction but also has a direct connection with their return probability. In fact, improvising the checkout page design will not only help with more conversions but also lead to increased sales and profit.
In short, working on the BigCommerce checkout page design or any similar checkout page will help to bring down the number of shopping cart abandonment.
BigCommerce Checkout: Allows Fixing Shopping Cart Checkout Issues
According to Baymard Institute, 69.57% of online shopping carts are abandoned. This means – for every 100 potential customers, 70 of them just leave the store without making any purchases.
So, one can just imagine the amount of revenue the business house could have earned if they could have captured those visitors.
Sometimes, it has been seen that visitors add an item to their cart but leave it without completing the purchase. Often, it is because they face issues or glitches during the checkout process.
And the moment a user finds the checkout process too complicated or too lengthy, they simply leave the site.
To avoid such scenarios, it is extremely important to work on the checkout page associated with the business. Introducing features like One-Click Checkout or One-Page Checkout can solve the checkout issues greatly.
The good news is BigCommerce platform offers an amazing default page like BigCommerce checkout that promises to change the checkout experience of shoppers.
Understanding BigCommerce Platform & BigCommerce Checkout
BigCommerce is a cloud-based SaaS (Software as a Service) platform that is geared to help both mid to large-scale business houses in leveraging their business to the next level.
Hence, this is one such platform that comes with a robust set of features that promises to make the online shopping experience for customers even better.
In short, with the help of BigCommerce platform businesses make sure that they are delivering the best experience to their customers when they shop online.
1. BigCommerce Checkout Streamline Purchase Process
Businesses that are using the BigCommerce platform for running their online store can start using the flagship checkout page, i.e., BigCommerce Checkout which was started by BigCommerce.
It is an optimized checkout page that creates such a checkout experience, which is going to streamline the process of purchase and increase conversion across the BigCommerce platform.
2. BigCommerce Open Checkout Features
What are the features of BigCommerce Open Checkout? Read on.
BigCommerce Open Checkout is an extension of the BigCommerce One-Page Checkout page, and it comes with intuitive features, such as Google Maps, guest checkout, address auto-complete, and more.
Every business wants the checkout process of their store to be efficient. With Open Checkout, the amount of time for completing the purchase process of any customer is even faster.
BigCommerce Checkout: Detailed Overview
The checkout page is the most important page of any eCommerce store. Online merchants spend millions of dollars on advertising and marketing to build a strong online presence and get the desired amount of traffic to their store.
But the most frustrating part of all is when visitors explore a site but don’t convert. In fact, even after making efforts to design the site in an attractive manner, visitors simply leave the site without taking any action.
Even after investing so much money and time, if a business fails to retain customers on its sites it is bad for the business. This usually happens due to poor user experience on the site, which leads to shopping cart abandonment.
The only way to reduce shopping cart abandonment is by switching to the default BigCommerce One-Page Checkout page.
1. Introducing BigCommerce Open Checkout
While running an online store, businesses usually focus on their product page. This is because they want to ensure their customers have a good experience while they explore the page or buy the products.
But they usually overlook the checkout page of the store. Such an action is a huge mistake from the end of the business houses since the checkout page is crucial for conversion.
However, if an online store is facing low conversions and high shopping cart abandonment due to checkout issues, there is nothing to worry about.
On the brighter side, merchants can improve the checkout process for their customers simply by adding the Open Checkout extension to their stores.
2. What Is Open Checkout
In simple words, Open Checkout is an open-source version of the platform’s standard checkout experience. It enables merchants, partners, and developers to create a unique checkout.
The rollout of Open Checkout helped BigCommerce to establish itself as one of the leading SaaS eCommerce platforms that offer production-level checkout. Moreover, Open Checkout does not compromise on the simplicity, security, and speed offered by the SaaS platform.
Configuring The One-Page Checkout Settings
Apart from customizing the look of the BigCommerce Checkout default page, Optimized One-Page Checkout, the Checkout Settings can also be configured.
To perform this action, one will need to head to the Advanced Settings present on the left-hand side of the BigCommerce dashboard. From the Advanced Settings > Checkout tab.
On clicking the Checkout tab, one gets the option to enable the Guest Checkout, Order Comments, Terms and Conditions, Multiple Shipping Addresses, Bot Protection, Persistent Cart, etc. It also allows collapsing the Coupon Code. The BigCommerce checkout default page comes with the default shipping option.
Let’s dive into the details of each of them
1. Enable Guest Checkout
Enabling this option allows customers to place an order without creating an account. It provides the option of creating accounts automatically for customers who check out as a guest.
This, in turn, automatically sends an email invitation to the customer. They are allowed to use their email address as their username, create a password and track their orders.
In case this option is disabled, customers will need to create an account before they are allowed to place an order. In fact, some payment options like PayPal, Amazon Pay, and Apple Pay are unavailable outside of the checkout page.
2. Enable Order Comments
With this option, customers are allowed to enter any comments along with their order right on the order confirmation page. Enabling this gives the user the ability to add any information and even leave instructions in case there are no designated fields.
By enabling this option, businesses can show that they can go to a great extent for their customers.
3. Enable Terms and Conditions
If this option is enabled, customers will have to accept the terms and conditions before making any kind of purchase. Once it is enabled, it can be either linked to the terms and conditions page. Or a plain text can be added.
4. Multiple Shipping Addresses
Usually enabling this shipping address option allows the customers to send the items in their cart to different addresses.
5. Bot Protection
By enabling Bot Protection, it allows adding the Google reCAPTCHA codes to the BigCommerce checkout page. This, in turn, will prevent any bot attacks and other forms of malicious, automated activity on the site.
This option should be enabled only if you are having any problems with bots. Otherwise, enabling this feature might make the BigCommerce checkout process long unnecessarily. This might have a negative impact on the conversion rate.
6. Enable Persistent Cart
When customers add something to their cart, it will be saved across all devices. This feature is only available with the Plus, Pro and Enterprise BigCommerce plans.
7. Google Address Autocomplete
If this feature is turned on, customers start receiving suggested addresses based on their input. This results in an even faster checkout experience.
8. Default Shipping Option
There are four choices for the default shipping option. They are:
- Least expensive, excluding pickup in store
- Least expensive
- Most expensive
- None
Well, optimizing the BigCommerce checkout default page is extremely important to ensure low shopping cart abandonment.
Important Reasons for Tweaking or Customizing the Open Checkout
Open Checkout is built upon BigCommerce’s Checkout SDK. Hence, it can easily jumpstart the development of some outstanding features and uses-cases, like:
- Branded Checkout Pages
- Adapt to New Retail Environment
- Modernized B2B Purchase
- Customer Group Rules
1. Branded Checkout Pages
You can easily design a cohesive brand experience during the customer’s buying journey by adding some custom CSS rules and JavaScript applications.
2. Adapt to New Retail Environment
It is important to optimize the BigCommerce checkout page for enabling advanced delivery options, such as buying online or pick-up from store, scheduling delivery date, or facilitating pickup from locations like brick-and-mortar stores.
3. Modernized B2B Purchase
Streamlining the B2B purchasing by adding custom fields for the buyers. This will allow the buyers to provide account information or pay using the purchase order, and even submit an order without collecting payment at checkout.
4. Customer Group Rules
Presenting a unique front-end interface by making use of customer group rules. This will allow offering specific payment, pricing, and even shipping methods directly on the checkout page.
These are some of the reasons for implementing the changes to the BigCommerce Open Checkout page from the standard BigCommerce interface.
How To Use the BigCommerce Open Checkout?
Businesses are responsible for keeping the checkout code up to date with the latest releases made by the eCommerce platform giant, BigCommerce. However, this is not a great deal since one gets the latest version whenever one is ready for the BigCommerce upgrade.
One thing that must be kept in mind is that the native checkout process is usually hosted by BigCommerce. In case you have plans to edit the code with BigCommerce Open Checkout, then you will need to host the BigCommerce checkout page on your own.
Simply speaking, BigCommerce Open Checkout should not be used because of a sudden decision. It is true that the BigCommerce platform offers a great degree of customization that is surely going to benefit stores, but it comes with a cost.
There are chances of regulatory fines and even legal penalties if it fails to meet PCI compliance. But if any businesses still look forward to using the BigCommerce Open Checkout extension, they will have to copy the source code repository from GitHub.
At the same time, one must confirm that the Node is greater than version 10 and the nmp should be greater than version 3.
Often, using a Node Version Manager helps to track which versions are being used. As required, the necessary updates can be installed.
1. Steps to Be Followed
The fork must be cloned locally. Then it needs to be opened in the editor and the following steps must be carried out. They are:
- Firstly, you will need to open a terminal.
- Second, the following command ‘nmp install && nmp ci’ needs to be installed for all required packages.
- Third, the terminal must be split. On one side, the command ‘nmp run dev’ must be entered. And on the other side, the command ‘nmp run dev:server’ must be entered. It will start the application locally.
- Fourth, the local server address offered by nmp run dev:server must be used in order to head to the test store. Then from the BigCommerce control panel, one should head to the Advance Settings and click on Checkout. From there the Custom Checkout option must be clicked.
- Fifth, the URL obtained from the locally hosted auto-loader-dev.js file needs to be entered.
Once you complete all these steps then certainly you are ready to start the local development.
Editing The BigCommerce Checkout Page of BigCommerce Store
If you want to edit the BigCommerce checkout page, you will need to complete the following steps. They are:
1. Go to Advanced Settings
First, you must log into your BigCommerce account. In case you do not have an account, just create one to get started. From the home page of BigCommerce, go to the Advanced Settings options present on the left-hand side of the screen.
2. Go to the Checkout option
Second, once you have selected the Advanced Settings option, you will be shown a list of the settings section. You will simply need to click on the Checkout button, which appears on the top of the list.
3. Scroll Down to Checkout Styling and select ‘Customize Checkout’
Third, as you click on the Checkout tab, a new page will pop up. This will contain the checkout setting fields. Scroll down the page and you will come across a section named Checkout Styling with Customize Checkout button in blue color.
4. Select the Checkout page
Once you have clicked the blue button, you will need to continue selecting the ‘Checkout Page’ section that is present in the left sidebar,
5. Edit the Checkout Page
At this point, as you open the BigCommerce checkout page tab, you will be able to preview the checkout page of your store. Now, it is time to edit the page as you want.
5.1. Things That Can Be Edited
The following things can be edited. They are:
5.1.1. Body Page
You can choose the new background color, as well as the focus color.
5.1.2. Body Text
You can edit the font family and the text color.
5.1.3. Checkout Steps Icon
It lets you edit the background color, text color, and icon color
5.1.4. Discount Banner
Edit the background, text, and icon color.
5.1.5. Form Input Fields
In particular, you will be able to change the label text color, field placeholder text color, field text color, and so on. Moreover, you can change the field error text color, field inner shadow color, field background color, checkbox button background color, and even the field border color.
5.1.6. Form Checklist
You will be able to edit the background color, header text color, and even the border color.
5.1.7. Header
Upload an image and choose the background, border, and text color.
5.1.8. Heading1, 2, etc.
You will be able to edit the font family and text color.
5.1.9. Logo
Pick the logo type, be it image or text, and then align it to the right, left to the center of the page.
5.1.10. Order Summary Box
It lets you pick the background and border color.
5.1.11. Primary Action Button
Let’s you change the font family, text hover color, text color, active text color, background color, text disabled color, border color, border active color, border hover color, and border disabled cover.
5.1.12. Secondary Text
Let us you change the font family and text color
5.1.13. Secondary Action Button
It allows you to change the font family, text hover color, text color, active text color, background color, text disabled color, background hover color, background disabled color, border hover color, border disabled cover, and border active color.
5.1.14. URL
Change the font family, hover text color, and text color
These steps are easy for those who are good at designing. However, if you are not, it’s better to take the help of professional developers who will match the color of the checkout page with the logo color and other marketing elements.
One must remember that the use of the right color helps to build brand recognition and increase the trust of customers.
6. Save Changes
Make sure to save the edits you made to the BigCommerce checkout page. But do this only if you are happy with the customized checkout page design.
You can also preview the checkout page design for the Desktop, Tablet, and Mobile version before saving the changes.
Special Considerations for the Checkout Page
Whether it is a Shopify checkout page or the default page of BigCommerce checkout, one must keep in mind that the checkout page is the final stage for merchants where they can expect some conversions.
This calls for creating a smooth experience for the customers before they take any action. however, some considerations for the BigCommerce checkout page are as follows:
1. PCI Compliance
The Payment Card Industry Data Security Standard is a set of rules put forward by some leading credit card companies for online transactions. If a site is PCI compliant, it easily meets the set standards by the group.
And BigCommerce One-Page Checkout is PCI Compliant. Likewise, developers know pretty well that optimizing the One-Page Checkout might impact the PCI compliance status of the page.
2. Page Speed Performance
Page speed plays a vital role in considering how long it takes for some data to get displayed. Too many images, third-party applications, and JavaScript codes increase the load time.
If the checkout page takes longer to load and display, the higher is the chance of losing customers.
3. User-friendly Experience
Merchants looking forward to customizing the BigCommerce One-Page Checkout should consider the user-experience. Sometimes merchants might feel tempted to add some more entries in order to pull more customer information.
But too many fields might make it taxing for the customers and this might lead to a high conversion rate. The opposite happens when the fields are reduced.
Best Practices for Checkout Customization
You might be surprised to know that some of the customization options are built into the BigCommerce Control Panel. Also, custom functionality and styling can be added to the BigCommerce checkout with CSS and JavaScript.
1. Checkout Form Fields
BigCommerce has the ability to define new fields on the BigCommerce checkout page address form, as well as the recording fields. Custom fields become visible to online shoppers when they proceed to the checkout page.
The values that the shopper fills out become visible to them in the Order View Section of the Control Panel.
Custom address fields support a wide variety of input types, such as date picker, checkbox, dropdown, text field.
Common uses for custom checkout form fields are collecting a customer’s account number or verifying the delivery preferences. Developers can easily repurpose the custom form fields for storing data that requires to be carried over to the order record.
2. Store Design Settings
Another native option for styling the checkout page is Store Design. The Store Design editor comes with an interface for controlling certain settings, such as the checkout page’s header image, fonts, and colors.
It is a good idea to check the settings before starting the hard-coding CSS as it allows merchants more control over the design. This helps to ensure that their choice lasts throughout the theme updates.
Developers can control which Store Design settings should remain available to the merchants for configuration. Themes often define settings and their values in the schema.json file, and the chosen value is stored in the config.json file.
3. Multi-language checkout
Moving with the customizations that call for light custom code, the text strings that display on the optimized One-Page Checkout page can be edited or even translated into various languages.
For accessing the translation keys that are displayed on the checkout page. One needs to append the JSON object that contains the checkout keys and their string values to the .json lang file(s) of the store.
For instance, if English is the default language of the store, but if you want to change the wording for some fields of the BigCommerce checkout field, the checkout JSON object needs to be added to the en.json file.
Similarly, if the store supports English and French and you want to display French version of the checkout page for French customers, then you will need to add the checkout JSON object to the fr.json file.
4. Custom CSS
It is crucial to note that the BigCommerce Optimized One-Page Checkout refers to the optimized-checkout.scss file for styling purposes. The theme documentation for a complete list of CSS classes is easy to review.
Also, one has the ability to refer to custom stylesheets and even add CSS rules for manipulating the styles and layout.
5. Custom JavaScript
BigCommerce platform is known to support their default page – BigCommerce checkout script injection with Script Manager. The Script Manager is an interface to manage third-party scripts.
In case you are building an app for running custom JavaScript on the BigCommerce checkout page or on the order confirmation page for creating pop-ups, scripts can be injected programmatically by using Scripts API.
What is BigCommerce One-Page Checkout?
By now, you are aware of the importance of the checkout page. A better design is bound to improve the conversion rate of the store by converting visitors to buyers.
Having said that, it’s worth mentioning that one of the latest features introduced to the BigCommerce platform is bound to improve the checkout page of any BigCommerce store.
This means online businesses will witness an improved functionality and appearance of the BigCommerce checkout page.
With some best practices in place, applying some custom code to the checkout page is easy. This, in turn, can improve the checkout efficiency of the platform.
Everything to Know About BigCommerce One-Page Checkout
Do you have any idea about BigCommerce One-Page Checkout? Most of you might know about it or some of you might not have any knowledge of it. To know about it, go through the rest of this post.
BigCommerce One-Page Checkout from BigCommerce can be used along with the regular checkout process. The checkout page has been made minimal but highly responsive. All sorts of distractions that a customer might have during their shopping trip have been removed.
1. Checkout SDK Customizes the Checkout Experience
The new Checkout SDK allows customizing and designing the checkout experience of the customers.
However, one thing that needs to be noted is that the process of customizing the BigCommerce checkout page isn’t the same as the process of customizing the default templates present in the theme.
2. Risks Associated
It is a known fact that customizing the checkout page is slightly different from customizing other default templates in the themes. However, there are many good sides to customizing the BigCommerce checkout page.
However, some factors must be taken into account before you hop on the customization bandwagon.
The possibility of introducing bugs is also high. Bugs can affect the page uptime, which can affect the sales of a store. In short, it is risky to customize the BigCommerce checkout setting.
When there is any specific checkout customization requirement, security is an important consideration.
The biggest benefit of using BigCommerce is that PCI compliance is bundled into the core feature set of the native checkout page.
BigCommerce takes great strides to ensure the platform meets the highest security standards.
Payment Methods For BigCommerce One-Page Checkout
Now that you are well aware of the BigCommerce checkout features, it’s time to know about the various payment methods that are supported by the BigCommerce One-Page Checkout. They are:
- Adyen
- Afterpay
- Affirm
- Amazon Pay
- Apple Pay
- Authorize.Net
- BlueSnap Payments
- Chase Merchant Services
- Chase Integrated Payments
- Chase Pay
- Clover Payments
- CyberSource Direct
- eWay Rapid
- First Data Payeezy Gateway
- Google Pay
- Heartland Payment Systems
- Klarna Payments
- MIGS
- Masterpass
- MyVirtualMerchant
- NMI
- Offline Payment Methods
- PayPal Website Payments Pro
- PayPal Express Checkout
- Paymetric
- PayPal Credit
- PayPal powered by Braintree
- QuickBooks Payments
- SecureNet
- Sage Pay/Protx VSP Direct
- Square Payments V2
- ShopKeep Payments
- Stripe
- Store Credit
- Test Payment Gateway
- USAePay
- Visa Checkout
- Worldpay Ecomm
- Worldpay Core
The payment method for One-Page Checkout is listed in alphabetical order.
If multiple payment methods are to be used and any of them are not supported, BigCommerce’s original single-page checkout will be used in lieu of Optimized One-Page Checkout.
In case you plan to use multiple payment methods and if any one of the methods is not included in the list of supported methods, then the online store will be using BigCommerce’s legacy single-page checkout instead of Optimized One-Page Checkout.
Technical Overview of BigCommerce One-Page Checkout
The optimized BigCommerce One-Page Checkout is basically a single-page application whose primary purpose is to convert the Cart into an Order. The checkout application is made up of several layers. They are:
- Backend application
- Storefront Checkout API
- Checkout JS SDK
- Frontend Presentation Layer
The BigCommerce One-Page Checkout uses the same JS SDK and Storefront Checkout API that are generally available to external developers.
The Storefront Checkout API contains the business logic of the backend eCommerce application — fetches available shipping methods, retrieves customer information, and also calculates the sales tax and discounts.
On the other hand, the JS SDK is a jacket library that offers methods for interaction with the Storefront Checkout API.
Process of Converting a Cart into An Order
As a BigCommerce store owner, if you are looking forward to converting a cart to order, the following steps must be followed. They are:
A Cart object starts as a collection of product line items and also as a customer account ID. It starts as a Checkout object as it starts to pick up additional data, which can supply enough information to calculate taxes, discounts, and even shipping options.
The next step of the BigCommerce checkout is to create consignments. Every consignment is made of line items that need to be shipped to a particular address. In case an order needs to be shipped to different addresses it will consist of multiple consignments.
The checkout gets converted to an order. However, one might notice that no payment has been accepted. At this point, the order status is labeled as Pending Incomplete.
When a payment is successful, the order status is changed from Incomplete to
Awaiting via BigCommerce payment gateway integration.
The best part is that the default checkout page, i.e., the BigCommerce checkout offers a lot of flexibility. The Checkout API has validations and rules in place to support its application logic for the checkout process.
Online Shopping Leading to eCommerce Growth
Is there any need to work on the checkout issues? The answer is a big, yes. Let us dive into the details.
In this digital age, the way businesses are run has changed drastically. More brick-and-mortar stores are moving online. Why?
To tap their targeted customers who have moved to online shopping since the COVID pandemic hit the entire world.
Since the pandemic, some of the eCommerce categories that saw huge growth worldwide were food and groceries, sports and outdoors, and home and garden.
Statista’s survey showed that 35% of those in the Asia Pacific area bought goods online up to three times a month before the pandemic.
However, for the same survey, another 17% of the respondents said that they bought goods online two-three times a week even after the pandemic.
Hence, it is evident that online shopping demand will not see any decline. Rather, the eCommerce industry will see a vast number of online shoppers in this new normal.
Professional Help
Improving the checkout experience of your customers when they are on the checkout page is important. To help a customer make their buying decision and get them to convert, introducing a flagship page like BigCommerce checkout is important.
Therefore, if you want to improve the shopping experience of your customers make it a point to introduce this BigCommerce feature to the store. We, eWay Corp, as a strategic partner of BigCommerce, can help businesses to get started with the right solutions for their checkout page.
Wrapping Up
The pandemic has accelerated growth for eCommerce stores. At the same time, it triggered many changes in the online shopping behaviors of people.
It’s true! Following the pandemic, people are more interested in online shopping than retail shopping. But at the same time, their patience is on the decline. Therefore, it greatly impacts online business.
For instance, if a site takes too long to load or if the checkout process is extremely complicated, the visitor leaves the site at once. Hence, this kind of behavior of customers underlines the urgency of ensuring that the page load time is quick or that the BigCommerce checkout process is a smooth one.
