From fdddb3c62647cf479d53357f4040d178c17d72a3 Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Mon, 29 Jul 2024 16:32:03 +0200 Subject: [PATCH 01/23] Added onPaymentSuccess callback --- docs/index.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/index.js b/docs/index.js index 0268d9e..f4677c5 100644 --- a/docs/index.js +++ b/docs/index.js @@ -284,10 +284,26 @@ async function initPayment() { const message = document.getElementById("custom-override-message"); message.innerHTML = "Awaiting onBeforeCharge result..."; message.style = "display: flex;"; + return new Promise((resolve) => { + setTimeout(() => { + message.style = "background-color: #61b2e8; display: flex;"; + message.innerHTML = "onBeforeCharge complete - proceeding with payment"; + setTimeout(() => { + message.style = "background-color: orange; display: none;"; + resolve(true); + }, 1000); + }, 1000); + }); + }, + onPaymentSuccess: async () => { + console.log("On payment success called"); + const message = document.getElementById("custom-override-message"); + message.innerHTML = "onPaymentSuccess was called..."; + message.style = "display: flex;"; return new Promise((resolve) => { setTimeout(() => { message.style = "background-color: #20DC86; display: flex;"; - message.innerHTML = "onBeforeCharge success! ✓"; + message.innerHTML = "Payment was successful! ✓ Redirecting..."; setTimeout(() => { message.style = "background-color: orange; display: none;"; resolve(true); From fdc83dc7ea253e4015c36c2cf44581886b34bf6f Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Mon, 29 Jul 2024 16:35:40 +0200 Subject: [PATCH 02/23] Changed text of onBeforeCharge --- docs/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.js b/docs/index.js index f4677c5..4777a73 100644 --- a/docs/index.js +++ b/docs/index.js @@ -287,7 +287,7 @@ async function initPayment() { return new Promise((resolve) => { setTimeout(() => { message.style = "background-color: #61b2e8; display: flex;"; - message.innerHTML = "onBeforeCharge complete - proceeding with payment"; + message.innerHTML = "onBeforeCharge OK. Attempting payment..."; setTimeout(() => { message.style = "background-color: orange; display: none;"; resolve(true); From 85db3d256c2daa56d4c2a80dc5abdb574d0f221c Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Wed, 31 Jul 2024 10:16:11 +0200 Subject: [PATCH 03/23] Added onBeforeProvider redirect callback --- docs/index.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/docs/index.js b/docs/index.js index 4777a73..748c6ca 100644 --- a/docs/index.js +++ b/docs/index.js @@ -225,10 +225,10 @@ async function initPayment() { env: ie, // test | live | int-env-name | pi-nightly.integration longId: longId, preload: ["cards", "afterpay", "klarna"], // loads cards and afterpay script as soon as page loads so that rendering using dropIn is fast - onBeforeError: async (_checkout, componentName, errorData) => { + onBeforeError: async (checkout, componentName, errorData) => { console.error( "On before error called", - _checkout, + checkout, componentName, errorData ); @@ -279,8 +279,8 @@ async function initPayment() { resolve(false); }); }, - onBeforeCharge: async () => { - console.log("On before charge called"); + onBeforeCharge: async (checkout, componentName, errorData) => { + console.log("On before charge called", checkout, componentName, errorData); const message = document.getElementById("custom-override-message"); message.innerHTML = "Awaiting onBeforeCharge result..."; message.style = "display: flex;"; @@ -295,8 +295,24 @@ async function initPayment() { }, 1000); }); }, - onPaymentSuccess: async () => { - console.log("On payment success called"); + onBeforeProviderRedirect: async (checkout, componentName, errorData) => { + console.log("On before provider redirect called", checkout, componentName, errorData); + const message = document.getElementById("custom-override-message"); + message.innerHTML = "Awaiting onBeforeProviderRedirect result..."; + message.style = "display: flex;"; + return new Promise((resolve) => { + setTimeout(() => { + message.style = "background-color: #61b2e8; display: flex;"; + message.innerHTML = "Redirecting to 3rd party provider..."; + setTimeout(() => { + message.style = "background-color: orange; display: none;"; + resolve(true); + }, 1000); + }, 1000); + }); + }, + onPaymentSuccess: async (checkout, componentName, errorData) => { + console.log("On payment success called", checkout, componentName, errorData); const message = document.getElementById("custom-override-message"); message.innerHTML = "onPaymentSuccess was called..."; message.style = "display: flex;"; From 10e5198d10b671282b4565bf1cf502357a32c6bc Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Wed, 31 Jul 2024 11:22:02 +0200 Subject: [PATCH 04/23] Add support for ABORT flow (cards only at the moment) --- docs/index.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/docs/index.js b/docs/index.js index 748c6ca..2db3447 100644 --- a/docs/index.js +++ b/docs/index.js @@ -771,6 +771,26 @@ function getCountry() { : "US"; } +// Returns the payment outcome based on query parameter +function getPaymentOutcome() { + const params = new URLSearchParams(window.location.search); + const paymentOutcome = params.get("paymentOutcome") + ? params.get("paymentOutcome") + : null; + return paymentOutcome; +} + +// Returns the deferral based on payment outcome +function getDeferral() { + const paymentOutcome = getPaymentOutcome(); + if(paymentOutcome === "abort") { + return "DEFERRED" + } + else { + return "NON_DEFERRED" + } +} + // Checks query params to see if error case was selected function getError() { const params = new URLSearchParams(window.location.search); @@ -840,9 +860,7 @@ function getThemeSettings(theme, setting) { function getAmount() { const params = new URLSearchParams(window.location.search); - const paymentOutcome = params.get("paymentOutcome") - ? params.get("paymentOutcome") - : null; + const paymentOutcome = getPaymentOutcome(); let amount; @@ -854,7 +872,7 @@ function getAmount() { amount = 15.0; break; case "abort": - amount = 15.0; + amount = 4.02; break; case "retry": amount = 1.03; @@ -953,6 +971,7 @@ function generateList( preselection: { direction: "CHARGE", networkCodes: getPreselection(method), + deferral: getDeferral() }, presetFirst: false, style: { From 9a43476d7476eeaf1dc72c8b421ec840513dc639 Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Fri, 9 Aug 2024 10:42:55 +0200 Subject: [PATCH 05/23] Added the newest callbacks and solved an issue with onBeforeError implementation --- docs/index.js | 65 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/docs/index.js b/docs/index.js index 2db3447..1c4c449 100644 --- a/docs/index.js +++ b/docs/index.js @@ -225,7 +225,7 @@ async function initPayment() { env: ie, // test | live | int-env-name | pi-nightly.integration longId: longId, preload: ["cards", "afterpay", "klarna"], // loads cards and afterpay script as soon as page loads so that rendering using dropIn is fast - onBeforeError: async (checkout, componentName, errorData) => { + onBeforeError: (checkout, componentName, errorData) => { console.error( "On before error called", checkout, @@ -234,6 +234,11 @@ async function initPayment() { ); switch (componentName) { case "cards": + try { + checkout.dropInComponents["cards"]?.unmount(); + } catch(e) { + console.log(e) + }; showCardsPaymentMethod(false); return new Promise((resolve) => { const message = document.getElementById("custom-override-message"); @@ -244,8 +249,12 @@ async function initPayment() { resolve(true); }, 1500); }); - break; case "afterpay": + try { + checkout.dropInComponents["afterpay"]?.unmount(); + } catch(e) { + console.log(e) + }; showAfterpayPaymentMethod(false); return new Promise((resolve) => { const message = document.getElementById("custom-override-message"); @@ -257,6 +266,11 @@ async function initPayment() { }, 1500); }); case "klarna": + try { + checkout.dropInComponents["klarna"]?.unmount(); + } catch(e) { + console.log(e) + }; showKlarnaPaymentMethod(false); return new Promise((resolve) => { const message = document.getElementById("custom-override-message"); @@ -268,16 +282,17 @@ async function initPayment() { }, 1500); }); default: - document.getElementById("payment-methods").style.display = "none"; - const message = document.getElementById("custom-override-message"); - message.innerHTML = `onBeforeError called in ${componentName}`; - message.style = "background-color: #FF4800; display: flex;"; - break; + return new Promise((resolve) => { + document.getElementById("payment-methods").style.display = "none"; + const message = document.getElementById("custom-override-message"); + message.innerHTML = `onBeforeError called in ${componentName}`; + message.style = "background-color: #FF4800; display: flex;"; + setTimeout(() => { + message.style = "background-color: orange; display: none;"; + resolve(true); + }, 1500); + }); } - - return new Promise((resolve) => { - resolve(false); - }); }, onBeforeCharge: async (checkout, componentName, errorData) => { console.log("On before charge called", checkout, componentName, errorData); @@ -295,8 +310,8 @@ async function initPayment() { }, 1000); }); }, - onBeforeProviderRedirect: async (checkout, componentName, errorData) => { - console.log("On before provider redirect called", checkout, componentName, errorData); + onBeforeProviderRedirect: async (checkout, componentName, redirectData) => { + console.log("On before provider redirect called", checkout, componentName, redirectData); const message = document.getElementById("custom-override-message"); message.innerHTML = "Awaiting onBeforeProviderRedirect result..."; message.style = "display: flex;"; @@ -311,8 +326,8 @@ async function initPayment() { }, 1000); }); }, - onPaymentSuccess: async (checkout, componentName, errorData) => { - console.log("On payment success called", checkout, componentName, errorData); + onPaymentSuccess: async (checkout, componentName, redirectData) => { + console.log("On payment success called", checkout, componentName, redirectData); const message = document.getElementById("custom-override-message"); message.innerHTML = "onPaymentSuccess was called..."; message.style = "display: flex;"; @@ -327,6 +342,26 @@ async function initPayment() { }, 1000); }); }, + onPaymentFailure: async (checkout, componentName, redirectData) => { + console.log("On payment failure called", checkout, componentName, redirectData); + const message = document.getElementById("custom-override-message"); + message.innerHTML = "onPaymentFailure was called..."; + message.style = "display: flex;"; + return new Promise((resolve) => { + setTimeout(() => { + message.style = "background-color: #FF4800; display: flex;"; + message.innerHTML = "Payment session aborted! Redirecting..."; + setTimeout(() => { + message.style = "background-color: orange; display: none;"; + resolve(true); + }, 1000); + }, 1000); + }); + }, + onListRefetch: async (checkout, componentName, listData) => { + console.log("List data refetched", checkout, componentName, listData); + return true; + } }; // Initialises the SDK From 30d4e97885679da2b7bd82343d22d3cf5aba4342 Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Fri, 9 Aug 2024 11:17:38 +0200 Subject: [PATCH 06/23] Updates available drop in components when list refreshes --- docs/index.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/index.js b/docs/index.js index 1c4c449..69a653b 100644 --- a/docs/index.js +++ b/docs/index.js @@ -61,6 +61,7 @@ window.addEventListener("DOMContentLoaded", async () => { } }); +// Resets all radio buttons so if user comes back via browser back button default selection is used window.addEventListener('beforeunload', function () { const radios = document.querySelectorAll('input[type="radio"]'); radios.forEach(radio => { @@ -72,6 +73,7 @@ window.addEventListener('beforeunload', function () { }); }); +// Loads the checkout web script dynamically, using sandbox environment if listUrl from sandbox is passed function loadCheckoutWeb() { const searchParams = new URLSearchParams(window.location.search); const head = document.getElementsByTagName("head")[0]; @@ -88,7 +90,7 @@ function loadCheckoutWeb() { searchParams.get("listUrl").includes("sandbox") ) { js.src = - "https://resources.pi-nightly.integration.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js"; + "https://resources.sandbox.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js"; } else { js.src = "https://resources.pi-nightly.integration.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js"; @@ -360,6 +362,8 @@ async function initPayment() { }, onListRefetch: async (checkout, componentName, listData) => { console.log("List data refetched", checkout, componentName, listData); + const availableComponents = checkout.availableDropInComponents(); + setAvailableComponents(availableComponents); return true; } }; @@ -403,11 +407,7 @@ async function initPayment() { // Checks which dropin components are available based on the list response const availableComponents = checkout.availableDropInComponents(); console.log(availableComponents); - document.getElementById("available-components").textContent = [ - "Available components: ", - ] - .concat(availableComponents.map((comp) => comp.name)) - .join(" "); + setAvailableComponents(availableComponents); // Radio button inputs for the Payoneer-provided payment methods const cardsRadio = document.getElementById("card-radio"); @@ -544,8 +544,12 @@ async function initPayment() { } } -function showError() { - +function setAvailableComponents(availableComponents) { + document.getElementById("available-components").textContent = [ + "Available components: ", + ] + .concat(availableComponents.map((comp) => comp.name)) + .join(" "); } async function getListResult() { From 8fa2c49e886293b65271c863e8a27ae9eab126fe Mon Sep 17 00:00:00 2001 From: Tom Schneider-Swales Date: Fri, 9 Aug 2024 11:50:35 +0200 Subject: [PATCH 07/23] Swapped Klarna and Afterpay --- docs/index.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/index.html b/docs/index.html index 0e969dd..e6ffcfe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -126,44 +126,44 @@

Payment methods

-