Skip to content

Commit e761126

Browse files
jules-paystackjules-paystack
committed
fix: lazy-load Paystack SDK to prevent checkout page crash in MFTF tests
The Paystack JS SDK (https://js.paystack.co/v2/inline) was declared as a hard RequireJS dependency, causing it to load when the checkout page renders. In environments without external network access (e.g. Adobe MFTF Docker), this blocks the entire checkout page from loading, failing the StorefrontCustomerCheckoutTest on both CE and EE. Move the SDK to a lazy require() call inside afterPlaceOrder so it is only fetched when a customer actually pays with Paystack.
1 parent 3e4fe58 commit e761126

1 file changed

Lines changed: 93 additions & 92 deletions

File tree

‎view/frontend/web/js/view/payment/method-renderer/pstk_paystack-method.js‎

Lines changed: 93 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ define(
77
"Magento_Checkout/js/model/payment/additional-validators",
88
"Magento_Checkout/js/model/quote",
99
"Magento_Checkout/js/model/full-screen-loader",
10-
"Magento_Checkout/js/action/redirect-on-success",
11-
"paystack"
10+
"Magento_Checkout/js/action/redirect-on-success"
1211
],
1312
function (
1413
$,
@@ -18,8 +17,7 @@ define(
1817
additionalValidators,
1918
quote,
2019
fullScreenLoader,
21-
redirectOnSuccessAction,
22-
PaystackPop
20+
redirectOnSuccessAction
2321
) {
2422
'use strict';
2523

@@ -64,101 +62,104 @@ define(
6462

6563
var _this = this;
6664
_this.isPlaceOrderActionAllowed(false);
67-
68-
var popup = new PaystackPop();
69-
popup.newTransaction({
70-
key: paystackConfiguration.public_key,
71-
email: paymentData.email,
72-
amount: Math.ceil(quote.totals().grand_total * 100), // get order total from quote for an accurate... quote
73-
phone: paymentData.telephone,
74-
currency: checkoutConfig.totalsData.quote_currency_code,
75-
metadata: {
76-
quoteId: quoteId,
77-
custom_fields: [
78-
{
79-
display_name: "QuoteId",
80-
variable_name: "quote id",
81-
value: quoteId
82-
},
83-
{
84-
display_name: "Address",
85-
variable_name: "address",
86-
value: paymentData.street[0] + ", " + paymentData.street[1]
87-
},
88-
{
89-
display_name: "Postal Code",
90-
variable_name: "postal_code",
91-
value: paymentData.postcode
92-
},
93-
{
94-
display_name: "City",
95-
variable_name: "city",
96-
value: paymentData.city + ", " + paymentData.countryId
97-
},
98-
{
99-
display_name: "Plugin",
100-
variable_name: "plugin",
101-
value: "magento-2"
102-
}
103-
]
104-
},
105-
onSuccess: function (response) {
106-
fullScreenLoader.startLoader();
107-
$.ajax({
108-
method: "GET",
109-
url: paystackConfiguration.api_url + "V1/paystack/verify/" + response.reference + "_-~-_" + quoteId,
110-
dataType: 'text'
111-
}).done(function (data) {
112-
// Parse JSON response (may be double-encoded)
113-
try {
114-
data = JSON.parse(data);
115-
// Check if it's still a string (double-encoded)
116-
if (typeof data === 'string') {
65+
66+
require(['paystack'], function (PaystackPop) {
67+
var popup = new PaystackPop();
68+
popup.newTransaction({
69+
key: paystackConfiguration.public_key,
70+
email: paymentData.email,
71+
amount: Math.ceil(quote.totals().grand_total * 100),
72+
phone: paymentData.telephone,
73+
currency: checkoutConfig.totalsData.quote_currency_code,
74+
metadata: {
75+
quoteId: quoteId,
76+
custom_fields: [
77+
{
78+
display_name: "QuoteId",
79+
variable_name: "quote id",
80+
value: quoteId
81+
},
82+
{
83+
display_name: "Address",
84+
variable_name: "address",
85+
value: paymentData.street[0] + ", " + paymentData.street[1]
86+
},
87+
{
88+
display_name: "Postal Code",
89+
variable_name: "postal_code",
90+
value: paymentData.postcode
91+
},
92+
{
93+
display_name: "City",
94+
variable_name: "city",
95+
value: paymentData.city + ", " + paymentData.countryId
96+
},
97+
{
98+
display_name: "Plugin",
99+
variable_name: "plugin",
100+
value: "magento-2"
101+
}
102+
]
103+
},
104+
onSuccess: function (response) {
105+
fullScreenLoader.startLoader();
106+
$.ajax({
107+
method: "GET",
108+
url: paystackConfiguration.api_url + "V1/paystack/verify/" + response.reference + "_-~-_" + quoteId,
109+
dataType: 'text'
110+
}).done(function (data) {
111+
try {
117112
data = JSON.parse(data);
113+
if (typeof data === 'string') {
114+
data = JSON.parse(data);
115+
}
116+
} catch (e) {
117+
console.error('Payment verification JSON parse error:', e);
118+
fullScreenLoader.stopLoader();
119+
_this.isPlaceOrderActionAllowed(true);
120+
_this.messageContainer.addErrorMessage({
121+
message: "Payment verification error."
122+
});
123+
return;
124+
}
125+
126+
$.ajax({
127+
method: 'POST',
128+
url: "https://plugin-tracker.paystackintegrations.com/log/charge_success",
129+
data: {
130+
plugin_name: 'magento-2',
131+
transaction_reference: response.reference,
132+
public_key: paystackConfiguration.public_key
133+
}
134+
});
135+
136+
if (data.status && data.data && data.data.status === "success") {
137+
redirectOnSuccessAction.execute();
138+
return;
118139
}
119-
} catch (e) {
120-
console.error('Payment verification JSON parse error:', e);
121140
fullScreenLoader.stopLoader();
122141
_this.isPlaceOrderActionAllowed(true);
123142
_this.messageContainer.addErrorMessage({
124-
message: "Payment verification error."
143+
message: "Payment verification failed. Status: " + (data.data ? data.data.status : 'unknown')
144+
});
145+
}).fail(function () {
146+
fullScreenLoader.stopLoader();
147+
_this.isPlaceOrderActionAllowed(true);
148+
_this.messageContainer.addErrorMessage({
149+
message: "Payment verification failed."
125150
});
126-
return;
127-
}
128-
129-
// Log payment success
130-
$.ajax({
131-
method: 'POST',
132-
url: "https://plugin-tracker.paystackintegrations.com/log/charge_success",
133-
data:{
134-
plugin_name: 'magento-2',
135-
transaction_reference: response.reference,
136-
public_key: paystackConfiguration.public_key
137-
}
138-
});
139-
140-
// Check if payment was successful
141-
if (data.status && data.data && data.data.status === "success") {
142-
redirectOnSuccessAction.execute();
143-
return;
144-
}
145-
// Payment verification failed
146-
fullScreenLoader.stopLoader();
147-
_this.isPlaceOrderActionAllowed(true);
148-
_this.messageContainer.addErrorMessage({
149-
message: "Payment verification failed. Status: " + (data.data ? data.data.status : 'unknown')
150-
});
151-
}).fail(function () {
152-
fullScreenLoader.stopLoader();
153-
_this.isPlaceOrderActionAllowed(true);
154-
_this.messageContainer.addErrorMessage({
155-
message: "Payment verification failed."
156151
});
157-
});
158-
},
159-
onCancel: function(){
160-
_this.redirectToCustomAction(paystackConfiguration.recreate_quote_url);
161-
}
152+
},
153+
onCancel: function () {
154+
_this.redirectToCustomAction(paystackConfiguration.recreate_quote_url);
155+
}
156+
});
157+
}, function () {
158+
fullScreenLoader.stopLoader();
159+
_this.isPlaceOrderActionAllowed(true);
160+
_this.messageContainer.addErrorMessage({
161+
message: "Unable to load Paystack. Please check your internet connection and try again."
162+
});
162163
});
163164
}
164165
},

0 commit comments

Comments
 (0)