Customer not Directed to the Payment Review Page after Checkout using the Checkout Flow
In the following implementations, customers are not directed to the payment review page after checking out even when Windcave is the only configured payment method:
-
SiteBuilder Extensions Kilimanjaro
-
SiteBuilder Extensions Premium Kilimanjaro
-
SuiteCommerce Advanced (SCA) Kilimanjaro
-
SCA 2018.2
-
SCA 2020.1
-
SCA 2020.1.12
-
SCA 2021.2
-
SCA 2021.2.3
These patch instructions describe the steps to fix this problem so that customers are directed to the correct payment review page.
To implement this patch, create a custom module to override the OrderWizard.Module.PaymentMethod.Selector.js
JavaScript file which is part of the OrderWizard.Module.PaymentMethod module.
If you are not familiar with implementing patches for SuiteCommerce Advanced, refer to the following:
-
Before you get started, familiarize yourself with Best Practices for Customizing SCA.
-
For step by step instructions, refer to Patch Using Override Mode.
Step 1: Create the Override File
-
Following the instructions in the Patch Using Override Mode procedure, create a new directory and file:
/Modules/extensions/OrderWizard.Module.PaymentMethod@1.0.0/JavaScript/OrderWizard.Module.PaymentMethod.Selector.js
-
In the
OrderWizard.Module.PaymentMethod.Selector.js
file, in thesetModuleByType()
method, find the following code:if (!this.selectedModule) { this.selectedModule = _.first(this.modules); }
And replace it with the following code:
if (!this.selectedModule) { this.selectedModule = _.findWhere(this.modules, { isActive: true }); }
-
In the
render()
method of the same file, find the following line of code:var selected_payment = this.model.get('paymentmethods').findWhere({primary: true})
And replace it with the following code:
var selected_payment = this.wizard.options.profile.get('creditcards').length > 0 && this.model.get('paymentmethods').findWhere({primary: true})
-
From the
render()
method, move the following code to the end of theinitialize()
method:_.each(this.modules, function (module) { module.isActive = module.instance.isActive(); })
-
Finally, in the
getContext()
method, find the following code:module.isSelected = (self.selectedModule.type === module.type);
And replace it with the following code:
module.isSelected = (self.selectedModule && self.selectedModule.type === module.type);
-
Save the file.
Step 2: Prepare the Developer Tools For Your Patch
When preparing the Developer Tools for your patch as described in the Patch Using Override Mode procedure, you should:
-
Paste the following sample code into the new
ns.package.json
file that you create in the Modules directory:Modules/extensions/OrderWizard@1.0.0/ns.package.json
{ "gulp": { "javascript": [ "JavaScript/*.js" ] }, "overrides": { "suitecommerce/OrderWizard@X.Y.Z/JavaScript/PaymentMethod.Selector.js" : "JavaScript/PaymentMethod.Selector.js" } }
Important:You must replace the string
X.Y.Z
with the version of the module in your implementation of SuiteCommerce Advanced. -
Open the
distro.json
file in the root SuiteCommerce Advanced development directory and then add your custom module to themodules
object as described in the Patch Using Override Mode procedure. The following sample shows the value to add to the list of existing values that follow the“modules”
key."modules": { ""extensions/OrderWizard.Module.PaymentMethod": "1.0.0", . . .
Step 3: Test and Deploy Your Patch
Follow the instructions provided in the Patch Using Override Mode procedure to test and deploy your patch.