Customize the Checkout Application

Important:

You should use the SCA developer tools to create custom modules as described in the following procedures only if you are customizing the Kilimanjaro release of SuiteCommerce Advanced (SCA) or earlier. If you are implementing the Aconcagua Release of SCA or later, the best practice is to use the theme and extension developer tools to customize your site. To learn more about why you should use the theme and extension developer tools, see Benefits of the Extension Framework.

Much of the Commerce Checkout application can be customized or configured by editing standard configuration properties and by using existing extensions or creating new extensions. See Checkout for detailed information and procedures on how to do this.

If, however, you need to implement an advanced customization for an SCA solution, you can create custom modules and, using best practices, modify the checkout experience as described in the following procedures. To understand best practices, see Best Practices for Customizing SCA.

By default, several modules are included in each checkout configuration file. Available modules include:

• OrderWizard.Module.Address.Billing: lets the user add, edit, remove, or choose a billing address.

• OrderWizard.Module.Address.Shipping: lets the user add, edit, remove, or choose a shipping address.

• OrderWizard.Module.Confirmation: provides a confirmation message after an order is submitted.

• OrderWizard.Module.PaymentMethod.Creditcard: lets the user add, edit, remove, or choose a credit card as a payment method.

• OrderWizard.Module.PaymentMethod.GiftCertificates: lets the user add a gift certificate code as a payment method.

• OrderWizard.Module.PaymentMethod.Invoice: lets the user select an invoice option as a payment method.

• OrderWizard.Module.PaymentMethod.PayPal: lets the user select a PayPal account as a payment method.

• OrderWizard.Module.PaymentMethod.Selector: lets the user select from a list of payment methods.

• OrderWizard.Module.PaymentMethod.PurchaseNumber: displays a Purchase Order Number field to allow users to search by PO Number. This field will appear independently of the Payment Method selected by the user.

• OrderWizard.Module.RegisterEmail: gives guests the option of registering an email address.

• OrderWizard.Module.RegisterGuest: lets the user register with the site as a customer.

• OrderWizard.Module.Shipmethod: lets the user select a delivery method.

• OrderWizard.Module.ShowPayments: displays the payment type selected. This is typical of a review page.

• OrderWizard.Module.ShowShipments: displays the shipment method selected if MultiShipTo is enabled. This is typical of a review page.

• OrderWizard.Module.TermsAndConditions: creates a Terms and Conditions checkbox during the Review step. If this property is not set, the default is false.

To customize the checkout flow:

1. Create a custom module that includes the SC.Checkout.Configuration object as a dependency.

   Note:

   Do not edit the SC.Checkout.Configuration.js file directly. See Develop Your SCA Customization for information and best practices on customizing JavaScript.

   Note:

   Do not edit the SC.Checkout.Configuration.js file (or SC.Checkout.Configuration.ts file if you are implementing SCA 2019.2 or later) directly. See Develop Your SCA Customization for information and best practices on customizing JavaScript.

2. Redefine the dependency SC.Checkout.Configuration.Steps.Standard to the preferred checkout flow as defined in the following table:

   Checkout Flow	Dependency	Associated File
   		JavaScript (SCA 2019.1 and Earlier	TypeScript (SCA 2019.2 and Later)
   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

3. Extend the checkout flow’s associated .js file to customize the checkout configuration.

   You can customize checkout in following ways:

   • Reorder Checkout Modules

   • Add Checkout Modules

   • Add or Remove Checkout Steps

   • Configure Checkout Step Properties

   • Define Checkout Step URLs

   Note:

   The three checkout configurations shipped with SCA are fully supported by NetSuite. You can create completely customized experiences, but note that advanced customization can create flows that do not make intuitive sense to the user. NetSuite cannot guarantee the outcome of advanced customizations.

Related Topics

• Do More With SCA Customizations
• Create Custom Content Types for SMT

General Notices