Single Page Checkout in Salesforce Commerce Cloud

So it was come down to the end of the year for my last article for this year 2024, hope you enjoy it.

The Benefits of One-Page Checkout: Simplifying the Online Shopping Experience

In today’s fast-paced digital world, online shopping has become a staple for consumers. However, one of the most frustrating aspects can be the checkout process. Enter one-page checkout—a streamlined approach that can revolutionize the way customers complete their purchases. By condensing the checkout experience into a single page, this method not only enhances user experience but also drives conversions. Let’s explore why one-page checkout is effective and how you can optimize the process for your online store. Then we will be discussing on how we had achieved the user interface and user experience for one of our customer who is on Salesforce Commerce Sitegenisis Platform.

1. Fewer Steps:??

One-page checkout simplifies the shopping experience by reducing the number of steps a customer has to take to complete their purchase. Gone are the days of navigating through multiple pages; everything a shopper needs is accessible in one place, making the process significantly more efficient.

2. Intuitive Design:??

A well-designed one-page checkout is intuitive and user-friendly. Shoppers can easily see all necessary fields without feeling overwhelmed, leading to more completed transactions and fewer abandoned carts.

3. Improved Load Times:??

Loading times can make or break an online shopping experience. With a one-page checkout format, the reduced number of elements often leads to quicker load times, keeping customers engaged and less likely to leave due to frustration.

4. Customizable Experience:??

One-page checkouts can be tailored to meet the specific needs of your audience. Businesses can highlight promotions, customize fields, and design the layout in a way that reflects their brand, providing customers with a personalized shopping experience.

### Tips for Optimizing the Checkout Process

To further enhance the efficiency of your checkout process, consider implementing the following strategies:

- Optimize for Mobile:??

With a significant portion of online shopping done on mobile devices, ensure your checkout process is mobile-friendly. Responsive designs can make a world of difference in user experience.

- Implement Trust Signals and Social Proof:??

Shoppers need reassurance that their data is secure. Display trust badges, security certifications, and customer reviews to build credibility and foster confidence in your store.

- Clearly Communicate Fees and Shipping:??

Hidden fees can lead to cart abandonment. Be transparent about all costs, including shipping, taxes, and any additional fees. Customers appreciate transparency.

- Offer Multiple Payment Options:??

Catering to diverse payment preferences will enhance customer satisfaction. Include various payment methods such as credit/debit cards, digital wallets, and even alternative payment options.

- Display a Progress Indicator:??

If you opt for a multi-step checkout despite the one-page design, incorporating a progress indicator can help customers understand where they are in the process, reducing anxiety and abandonment.

- Allow One-Click Purchases:??

For returning customers, consider implementing one-click purchasing options. This feature allows them to complete transactions quickly, enhancing loyalty and repeat sales.

- Make Support Options Available:??

Sometimes, customers need a little extra help. Offering live chat, FAQs, or customer service contact options during checkout can provide peace of mind and encourage completion of their purchase.

How did we achieve it with on Salesforce Commerce Cloud which is on Sitegenisis?

Here is the figma UIUX that we created to get this done.

UI/UX Design - Figma Slides

Things that need to be considered

Create new combined XML form and get it ready to be displayed

????? Create a ?new ?form ?and ?include existing Shipping, Billing/Payment forms in it. Make sure to give IDs to the form includes so we can refer them individually upon submitting a combined form

????? Combine and re-write the Pipeline logic to get the new form (including existing forms) ready to be displayed

Display Shipping form to customer

????? Use ?the ?new ?form ?created ?above ?to ?display ?the Shipping and Delivery fields. Note: All fields will be displayed using the new form so the IDs and Names for the fields will be updated

????? For guests, keep checkout sections on frontend as non-collapsible and always opened because we don’t need to display saved information for guests

????? For ?logged-in ?customers, ?Shipping ?section ?will ?be prefilled and showing an editable state based on change button only if address is available in profile

????? Fetch the customer-saved addresses and display them in a dropdown list

????? Populate the form with relevant saved address information either upon page load (default address) or upon selecting another address

????? Display empty form if the customer selects to add a new address from the dropdown list

????? Displaying the saved information prepopulated and collapsed

??? ?Displaying the prepopulated information as editable

????? Displaying the blank shipping form expanded when the customer doesn’t have any saved address or customer wants to add a new address instead of using saved ones

??? ?Added loyalty opt in for Registered User who is NOT already in loyalty

?????Added loyalty opt in within the Create an Account module on Guest User Order Confirmation page.

Display Billing form to customer

????? Use ?the ?new ?form ?created ?above ?to ?display ?the Payment and Billing address fields. Note: All fields will be ?displayed using ?the ?new ?form? so ?the ?IDs ?and Names for the fields will be updated

????? For ?guests, ?same as ?shipping will ?be ?selected by default, upon clicking different billing address user can add new billing address in form

????? For logged-in customers, make checkout sections for Billing/Payment prefilled? and ?only ?forms ?will ?be ?in open state like CVV

????? By default, keep the Billing address the same as the shipping address checkbox checked. When unchecked, display the billing address form expanded

????? Fetch the customer-saved addresses and display them in a dropdown list

????? Populate the form with relevant saved address information either upon page load (default address) or upon selecting another address

????? Display empty form if there’s any saved address or the customer selects to add a new address from the dropdown list

??? ?Displaying the prepopulated information as editable

????? Displaying the blank shipping form expanded when the customer doesn’t have any saved address or customer wants to add a new address instead of using saved ones

????? If the customer opts to go with a different address than the shipping address, display billing address form

Display Payment form to customer

????? For logged-in customers, display any saved/default payment information pre-populated

????? Customers can add, and remove CC information from my account section

????? The google captcha service will be used to handle the potential risk of bot attacks.

????? Customer can save the CC information being used in checkout to their account

????? In the case of CC, display the CVV field in both collapsed and expanded modes

????? A bit of R&D here. Check for all other wallet payment options (PayPal, Amazon Pay, Apple Pay, Klarna, and After Pay) if they provide any mechanism to save customer payment information and reuse it instead of asking them to log in again.

Keep the entered information up to date

????? We are not submitting any information to the server until the customer clicks on Place Order so make sure to keep the information saved in front-end forms.

Also, when a customer changes any pre-populated information

Rewrite the frontend validation logic

??? ?Keep code updated for all front-end JS validations.

Now there is only two step instead of 3, we would need to re-write FE validation logic on fields focus out or any other relevant event

Rewrite the backend pipelines and validation logic

??? ?Combine/re-write Pipeline(s) upon order placement.

Also, handle all existing BE validations with the new combined form

Incorporate/Adjust existing integrations to work with rewriting backend pipelines

????? Need to specially take care of all integrations individually. We will need a separate task for every integration (Taxation, Address Validation, All payment options, Fraud Management etc.)

??? ?AvaTax

??? ?QAS

??? ?Forter

??? ?Route Protection

??? ?CyberSource

??? ?Klarna

??? ?PayPal

??? ?Amazon Pay

??? ?Apple Pay

??? ?After Pay

??? ?Pixels (TikTok, FB, GTM etc.)

Keep existing checkout flow for Amazon Pay

????? Amazon Pay provides its own widgets for addresses and shipping methods. They cannot fit into single page/ single click checkout flow

????? Make sure our existing multi step checkout will continue to work for Amazon Pay

Keep analytics data tracking on checkout initiate and place order

????? With the updated wireframes, as there are no more separate submission of shipping and billing information, so all the tracking data being currently sent on these steps will not be track going forward

????? We still need to make sure any data being tracked on initiating checkout and order placement will continue to work

????? The existing tracking for email Opt-In will be carry forward within the Listrack third party implementation.

eGift Card Checkout Flow

????? For e gift card the shipping form will not show, only contact information, billing form and payment forms will show, and user will place order.

eGift Card Check Balance & Redeem Functionality

????? eGift cards check balance and redemption will be working same as normal gift card.

Promo Code

????? This feature will go AS-IS with respect to the current implementation from the backend perspective.

### Conclusion

• A streamlined checkout process is essential for improving customer satisfaction and boosting sales. Implementing a one-page checkout not only simplifies the shopping experience but also allows your business to stand out in a competitive market. By adopting these optimization tips, you can ensure that your online store provides a seamless and enjoyable purchasing journey for all customers. Transform the way your customers shop today!