Customize the Checkout Application

This topic applies to

Applies to

SuiteCommerce Advanced

 

Much of the SuiteCommerce 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 a SuiteCommerce Advanced solution, you can create custom modules and, using best practices, modify the checkout experience as described in this section of the documentation. See Best Practices for Customizing SuiteCommerce Advanced.

Important

Whenever possible, advanced customization should be accomplished by creating new extensions. This allows for easier maintenance, portability, and release independence. Only implement advanced customizations by creating custom modules when the exposed extensibility APIs are not sufficient for your business use case. For details on the extensibility API see Extensibility API, Frontend Extensibility API, and Extensions.


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 Customize and Extend Core SuiteCommerce Advanced Modules for information and best practices on customizing JavaScript.


  2. Redefine the dependency SC.Checkout.Configuration.Steps.Standard to the desired checkout flow as defined below:

    Checkout Flow

    Dependency

    Associated .js File

    Standard (Default)

    SC.Checkout.Configuration.Steps.Standard

    SC.Checkout.Configuration.Steps.Standard.js

    One Page Checkout

    SC.Checkout.Configuration.Steps.OPC

    SC.Checkout.Configuration.Steps.OPC.js

    Billing First

    SC.Checkout.Configuration.Steps.BillingFirst

    SC.Checkout.Configuration.Steps.BillingFirst.js

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

    You can customize checkout in following ways:

    Note

    The three checkout configurations shipped with SuiteCommerce Advanced 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.