Customize the Checkout Application...

TL;DR Opening

The SuiteCommerce checkout application allows comprehensive customization, enabling developers to tailor user experiences through various modules and advanced checkout flows. This guide cover strategies for implementing these changes effectively.

Overview

The SuiteCommerce checkout application is highly configurable, facilitating a unique shopping experience for users. It offers several standard configuration properties and allows for the creation of custom modules, especially for SuiteCommerce Advanced (SCA) implementations prior to the Aconcagua release. Starting with Aconcagua, developers are encouraged to utilize the theme and extension developer tools for customization, which simplifies the development process and enhances maintainability.

Customizable Checkout Modules

The checkout experience can be adjusted using the following standard modules:

Module Name	Description
`OrderWizard.Module.Address.Billing`	Lets users manage billing addresses.
`OrderWizard.Module.Address.Shipping`	Lets users manage shipping addresses.
`OrderWizard.Module.Confirmation`	Displays order confirmation post-submission.
`OrderWizard.Module.PaymentMethod.Creditcard`	Allows credit card management for payments.
`OrderWizard.Module.PaymentMethod.GiftCertificates`	Lets users apply gift certificate codes.
`OrderWizard.Module.PaymentMethod.Invoice`	Offers an invoice payment method.
`OrderWizard.Module.PaymentMethod.PayPal`	Integrates PayPal as a payment option.
`OrderWizard.Module.PaymentMethod.Selector`	Displays a list of payment methods.
`OrderWizard.Module.PaymentMethod.PurchaseNumber`	Allows entry of a Purchase Order Number.
`OrderWizard.Module.RegisterEmail`	Provides email registration option for guests.
`OrderWizard.Module.RegisterGuest`	Enables guest registration as customers.
`OrderWizard.Module.Shipmethod`	Facilitates selection of delivery methods.
`OrderWizard.Module.ShowPayments`	Displays selected payment type on review pages.
`OrderWizard.Module.ShowShipments`	Shows shipment method if MultiShipTo is enabled.
`OrderWizard.Module.TermsAndConditions`	Adds a terms and conditions checkbox during checkout.

Customizing the Checkout Flow

To customize the checkout process, follow these steps:

Create a Custom Module: Include the SC.Checkout.Configuration object as a dependency. Avoid direct edits to SC.Checkout.Configuration.js or SC.Checkout.Configuration.ts files. Refer to best practices for customizing JavaScript.
Redefine Checkout Flow Dependency: Modify SC.Checkout.Configuration.Steps.Standard to the desired checkout flow. Here’s how it aligns with associated files:

Checkout Flow	Dependency	Associated JavaScript File	Associated TypeScript File
Standard (Default)	`SC.Checkout.Configuration.Steps.Standard`	`SC.Checkout.Configuration.Steps.Standard.js`	`SC.Checkout.Configuration.Steps.Standard.ts`
One Page Checkout	`SC.Checkout.Configuration.Steps.OPC`	`SC.Checkout.Configuration.Steps.OPC.js`	`SC.Checkout.Configuration.Steps.OPC.ts`
Billing First	`SC.Checkout.Configuration.Steps.BillingFirst`	`SC.Checkout.Configuration.Steps.BillingFirst.js`	`SC.Checkout.Configuration.Steps.BillingFirst.ts`

Extend Checkout Flow's Associated File: Customize the checkout configuration using the associated JavaScript or TypeScript file. Several customization options include:
- Reordering checkout modules
- Adding or removing checkout steps
- Configuring checkout step properties
- Defining URLs for checkout steps

Important Considerations

While creating unique checkout flows can enhance user experience, it's crucial to stay within best practices to avoid creating confusing experiences for customers. Customizations need to be carefully implemented as NetSuite cannot guarantee the usability of advanced customizations.

Key Takeaways

Customize your SuiteCommerce checkout using modules for an enhanced user experience.
Utilize best practices and tools provided in the newer releases for more effective customization.
Ensure your advanced customizations do not compromise usability.

Source: This article is based on Oracle's official NetSuite documentation.

Frequently Asked Questions (4)

Can these checkout customizations be applied to all versions of SuiteCommerce?

Checkout customizations using customizable modules and checkout flows can be applied to SuiteCommerce Advanced implementations prior to the Aconcagua release. From Aconcagua onwards, developers should use the theme and extension developer tools provided.

Is it necessary to modify the SC.Checkout.Configuration.js file for checkout customizations?

No, it is advised to avoid direct edits to SC.Checkout.Configuration.js or SC.Checkout.Configuration.ts files. Instead, use the SC.Checkout.Configuration object as a dependency and refer to best practices for customizing JavaScript.

What module allows managing billing addresses during checkout?

The module `OrderWizard.Module.Address.Billing` is used to manage billing addresses during checkout.

How can I implement a one page checkout flow in SuiteCommerce?

To implement a one page checkout flow, you should use the dependency `SC.Checkout.Configuration.Steps.OPC` and modify the associated JavaScript or TypeScript files with paths `SC.Checkout.Configuration.Steps.OPC.js` or `SC.Checkout.Configuration.Steps.OPC.ts`.

Customize the Checkout Application in SuiteCommerce