Skip to content

Commit a9166f2

Browse files
jbransvisajbransvisa
authored
Merge pull request #29 from CyberSource/v25.3.0
Update to Klarna Checkout express
2 parents 0df2f96 + 988052e commit a9166f2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1017
-446
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
* **Description:** Cybersource, a Visa solution, is the only global, modular payment management platform built on secure Visa infrastructure with the payment reach and fraud insights of a massive $500B+ global processing network. You can find out more about what Cybersource does [here](https://www.cybersource.com/en-gb.html).
55
* **Categories:** Payment Processing, Fraud Detection, Address Validation, Tax Computation
6-
* **Version:** 25.2.0
7-
* **Compatibility:** <span style="color:red">This version of the Cybersource cartridge is not compatible with versions of SFRA higher than Release 7.0.0. </span>
8-
This version can be found on the Master branch of the SFRA repository on May , 2025 <span style="color:red">This version is compatible with Salesforce B2C Commerce 22.2 release. <span>
6+
* **Version:** 25.3.0
7+
* **Compatibility:** <span style="color:red">This version of the Cybersource cartridge is not compatible with versions of SFRA Release 7.0.0. </span>
8+
This version can be found on the Master branch of the SFRA repository on June , 2025 <span style="color:red">This version is compatible with Salesforce B2C Commerce 22.2 release. <span>
99

1010
----
1111

‎cartridges/int_cybersource_sfra/cartridge/client/default/custom/klarna.js

Lines changed: 123 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,140 @@
11
'use strict';
22

3-
/* eslint-disable no-undef */
4-
5-
$(document).ready(function () {
6-
$('#klarna-pay-authorize').hide();
7-
8-
$('#klarna-error-message').hide();
9-
10-
// If a session token has already been generated, display the widget and remove the request session form.
11-
// Prevents creating a new session every time customer comes to the billing step.
12-
// This will require a new implementation of Klarna.Payments.load to update the Klarna session with new
13-
// payment or basket information, as this could have changed since customer was last on the billing page.
14-
/*
15-
var sessionToken = $('#klarna-container').data('session-token');
16-
if (sessionToken) {
17-
removeSessionForm();
18-
loadWidget(sessionToken);
19-
}
20-
*/
21-
22-
/**
23-
* function
24-
*/
25-
function authorizeKlarnaOrder() {
3+
/**
4+
* function
5+
*/
6+
function requestSession(isCheckoutPage) {
7+
var endpoint = window.klarnaVariables.createSessionEndpoint;
8+
if (isCheckoutPage)
269
$.spinner().start();
27-
var updateEndpoint = document.getElementById('klarnaUpdateUrl').value;
28-
$.ajax({
29-
method: 'POST',
30-
url: updateEndpoint,
31-
success: function (data) {
10+
$.ajax({
11+
url: endpoint,
12+
method: 'POST',
13+
data: null,
14+
success: function (data) {
15+
if (isCheckoutPage)
3216
$.spinner().stop();
33-
if (!data.error) {
34-
Klarna.Credit.authorize(function (res) {
35-
if (res.approved === true) {
36-
document.getElementById('klarnaAuthToken').value = res.authorization_token;
37-
$('#klarna-pay-authorize').hide();
38-
$('.submit-payment').trigger('click');
39-
} else
40-
if (res.show_form === true) {
41-
$('#klarna-pay-authorize').show();
42-
} else {
43-
$('#klarna-pay-authorize').hide();
44-
}
45-
});
46-
} else {
47-
$('#klarna-email-group').show();
48-
$('#klarna-pay-get-session').show();
49-
$('#klarna-pay-authorize').hide();
50-
$('#klarna-credit-main').remove();
51-
$('.error-message').css('display', 'block');
52-
var errorPara = document.getElementsByClassName('error-message-text');
53-
if (errorPara.length > 0) {
54-
errorPara[0].innerText = 'Your payment settings could not be submitted. Please review your payment settings and try again. Thank you for your patience!';
17+
if (data.reasonCode !== 100 || data.decision === 'REJECT') {
18+
console.log("Error creating klarna session: ", data);
19+
$('#klarna-error-message').show();
20+
$('#klarna-submit-paymentButton').hide();
21+
} else {
22+
if (data.sessionToken) {
23+
window.klarnaVariables.klarnaClientToken = data.sessionToken;
24+
if (isCheckoutPage === false) {
25+
klarnaAsyncCallback(data.sessionToken);
26+
}
27+
else {
28+
window.klarnaSessionFromCheckout = true;
29+
$('#klarna-submit-paymentButton').show();
30+
Klarna.paymentStage($.Deferred());
5531
}
5632
}
57-
},
58-
// eslint-disable-next-line
59-
error: function (err) {
33+
}
34+
},
35+
// eslint-disable-next-line
36+
error: function (err) {
37+
if (isCheckoutPage) {
38+
$('#klarna-error-message').show();
6039
$.spinner().stop();
61-
$('.error-message').css('display', 'block');
62-
var errorPara = document.getElementsByClassName('error-message-text');
63-
if (errorPara.length > 0) {
64-
errorPara[0].innerText = 'Your payment settings could not be submitted. Please review your payment settings and try again. Thank you for your patience!';
65-
}
6640
}
67-
});
68-
}
41+
console.log("Error creating klarna session: ", err);
42+
}
43+
});
44+
}
45+
46+
47+
$(function () {
48+
$('#klarna-error-message').hide();
6949

70-
/**
71-
* function
72-
* @param {*} sessionToken sessionToken
73-
*/
74-
function loadWidget(sessionToken) {
75-
var token = {};
76-
token.client_token = sessionToken;
77-
Klarna.Credit.init(token);
78-
Klarna.Credit.load({ container: '#klarna-container' }, function (res) {
79-
if (res.show_form === true) {
80-
$('#klarna-pay-authorize').show();
81-
$('#klarna-pay-authorize').click(function () {
82-
authorizeKlarnaOrder();
83-
});
50+
var $klarnaTab = $('#klarna-tab-checkout');
51+
if ($klarnaTab.length !== 0) {
52+
53+
$klarnaTab.on('click', function (event) {
54+
$('#klarna-error-message').hide();
55+
if (!isSessionExists()) {
56+
requestSession(true); //isCheckoutPage = true
8457
}
8558
});
8659
}
8760

88-
/**
89-
* function
90-
*/
91-
function removeSessionForm() {
92-
$('#klarna-email-group').hide();
93-
$('#klarna-pay-get-session').hide();
61+
var $divElement = $('#checkout-actions');
62+
if ($divElement.length !== 0) {
63+
handleKlarna(false); // isCheckoutPage = false
9464
}
9565

96-
/**
97-
* function
98-
*/
99-
function requestSession() {
100-
var form = $('#dwfrm_billing');
101-
var formData = $(form).serialize();
102-
var endpoint = $('#klarna-pay-get-session').data('action-url');
103-
$.spinner().start();
104-
$.ajax({
105-
url: endpoint,
106-
method: 'POST',
107-
data: formData,
108-
success: function (data) {
109-
$.spinner().stop();
110-
if (data.reasonCode !== 100 || data.decision === 'REJECT') {
111-
$('#klarna-error-message').show();
112-
} else {
113-
removeSessionForm();
114-
loadWidget(data.sessionToken);
115-
}
116-
},
117-
// eslint-disable-next-line
118-
error: function (err) {
119-
$.spinner().stop();
120-
$('#klarna-error-message').show();
121-
}
122-
});
66+
});
67+
function handleKlarna(isCheckoutPage) {
68+
window.miniCartButtonLoaded = false;
69+
70+
if (isSessionExists()) {
71+
klarnaAsyncCallback(window.klarnaVariables.klarnaClientToken);
12372
}
73+
else {
74+
requestSession(isCheckoutPage);
75+
}
76+
}
12477

125-
$('#klarna-pay-get-session').click(function (e) {
126-
e.preventDefault();
127-
// removing error message
128-
$('.error-message').css('display', 'none');
129-
// If Klarna widget isn't already open.
130-
if ($('#klarna-credit-main').length === 0) {
131-
// Request session token.
132-
$('#klarna-error-message').hide();
133-
requestSession();
134-
}
135-
});
136-
});
78+
function isSessionExists() {
79+
if (typeof window.klarnaVariables.klarnaClientToken !== 'undefined' && window.klarnaVariables.klarnaClientToken !== "null") {
80+
return true;
81+
}
82+
else {
83+
return false;
84+
}
85+
}
86+
function klarnaAsyncCallback(sessionToken) {
87+
var klarnaExpressCheckoutMC = document.querySelector('#klarnaExpressCheckoutMC');
88+
var klarnaExpressCheckoutCart = document.querySelector('#klarnaExpressCheckoutCart');
89+
90+
sessionToken = window.klarnaVariables.klarnaClientToken;
91+
if (klarnaExpressCheckoutMC && window.miniCartButtonLoaded !== true && isSessionExists()) {
92+
initKlarnaExpressButton('#klarnaExpressCheckoutMC', sessionToken);
93+
}
94+
if (klarnaExpressCheckoutCart && window.cartButtonLoaded !== true && isSessionExists()) {
95+
initKlarnaExpressButton('#klarnaExpressCheckoutCart', sessionToken);
96+
}
97+
};
98+
99+
100+
function initKlarnaExpressButton(containerId, sessionToken) {
101+
102+
window.Klarna.Payments.Buttons.init({
103+
client_token: sessionToken
104+
}).load({
105+
container: containerId,
106+
locale: window.klarnaVariables.currentLocale,
107+
on_click: (authorize) => {
108+
authorize(
109+
{ collect_shipping_address: true, auto_finalize: false },
110+
null,
111+
(result) => {
112+
if (result.approved) {
113+
$.ajax({
114+
url: window.klarnaVariables.handleExpressCheckoutAuth,
115+
type: 'post',
116+
dataType: 'json',
117+
contentType: 'application/json',
118+
data: JSON.stringify(result),
119+
success: function (data) {
120+
if (data.redirectUrl) {
121+
window.location.href = data.redirectUrl;
122+
}
123+
}
124+
});
125+
} else {
126+
console.log("Klarna error: ", result);
127+
}
128+
},
129+
);
130+
},
131+
},
132+
function load_callback(loadResult) {
133+
if (containerId === '#klarnaExpressCheckoutMC')
134+
window.miniCartButtonLoaded = true;
135+
else if (containerId === '#klarnaExpressCheckoutCart')
136+
window.cartButtonLoaded = true;
137+
138+
console.log('Klarna widget loaded:', loadResult);
139+
});
140+
}

0 commit comments

Comments
 (0)