diff --git a/app/main/payments.py b/app/main/payments.py index 2ebd314..b2ea76f 100644 --- a/app/main/payments.py +++ b/app/main/payments.py @@ -29,9 +29,6 @@ def adyen_payments(frontend_request, locale_data): payments_request['countryCode'] = locale_data['countryCode'] payments_request['merchantAccount'] = "CheckoutCreateDemo" payments_request['recurringExpiry'] = "2022-08-01T23:59:59+02:00" - payments_request['0'] = [] - payments_request['1'] = [] - # payments_request['paymentMethod'] = {"subtype": "redirect"} payments_request.update(payment_info) @@ -143,8 +140,6 @@ def sanatizeRequest(payments_request): del payments_request['houseNumberOrName'] del payments_request['postalCode'] del payments_request['street'] - del payments_request['0'] - del payments_request['1'] diff --git a/app/static/css/application.css b/app/static/css/application.css index 1fd208a..38b3d5d 100644 --- a/app/static/css/application.css +++ b/app/static/css/application.css @@ -759,7 +759,7 @@ a:hover { display: inline-block; width: 290px; height: 172px; - background-image: url("https://image.ibb.co/bVnMrc/g3095.png"), + background-image: linear-gradient( to right bottom, #0abf53, diff --git a/app/static/img/headphones.png b/app/static/img/headphones.png deleted file mode 100644 index 12d1cf4..0000000 Binary files a/app/static/img/headphones.png and /dev/null differ diff --git a/app/static/img/mystore-logo.svg b/app/static/img/mystore-logo.svg deleted file mode 100644 index 0418b24..0000000 --- a/app/static/img/mystore-logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/app/static/img/shopping-cartcart.png b/app/static/img/shopping-cartcart.png deleted file mode 100644 index ed25fb8..0000000 Binary files a/app/static/img/shopping-cartcart.png and /dev/null differ diff --git a/app/static/img/sunglasses.png b/app/static/img/sunglasses.png deleted file mode 100644 index 1f28053..0000000 Binary files a/app/static/img/sunglasses.png and /dev/null differ diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js index 84f8816..e877f82 100644 --- a/app/static/js/adyen-implementation.js +++ b/app/static/js/adyen-implementation.js @@ -1,3 +1,4 @@ +let r = document.querySelector(":root") const clientKey = JSON.parse(document.getElementById("client-key").innerHTML) const storedCountry = document.getElementById("country-code") const currentPM = document.getElementById("pay-methods") @@ -12,7 +13,10 @@ console.log(countryURL) let payMethods =[]; let payArray = Object.values(payMethods); -// global configuration variables +/** + * Global configuration variables + * + */ let openFirst = true let billAdd = false let onlyStored = true @@ -21,310 +25,38 @@ let showPayMethod = true let hideCVC = false let placeholderData = false +/** + * Hiding toggles of local payment methods not supported for NL (initial page load) + * + */ +document.getElementById('trustlyCol').style.display = "none" +document.getElementById('trustlyBox').style.display = "none" +document.getElementById('trustlyToggle').style.display = "none" +document.getElementById('clearpayCol').style.display = "none" +document.getElementById('clearpayBox').style.display = "none" +document.getElementById('clearpayToggle').style.display = "none" + // identify checkout div and create new empty div to replace with const oldDiv = document.getElementById("dropin-container") const newDiv = document.createElement("div") +/** + * Country flag svg image location + */ const flagUrlMap = { NL: { - src: "https://ca-test.adyen.com/ca/adl/img/flags/nl.svg", - total: "€40.00", - currency: "EUR", - href: "{{ url_for('checkout', integration=method, country=NL) }}", + src: "https://ca-test.adyen.com/ca/adl/img/flags/nl.svg" }, GB: { - src: "https://ca-test.adyen.com/ca/adl/img/flags/gb.svg", - total: "£40.00", - currency: "GBP", - href: "{{ url_for('checkout', integration=method, country=GB) }}", + src: "https://ca-test.adyen.com/ca/adl/img/flags/gb.svg" }, US: { - src: "https://ca-test.adyen.com/ca/adl/img/flags/us.svg", - total: "$40.00", - currency: "USD", - href: "{{ url_for('checkout', integration=method, country=US) }}", - }, -} - -const testCardBrandsMap = { - visa: { - src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg", - cardNumber: "4111 1111 1111 1111", - expiry: "03/30", - cvc: "737", - }, - mc: { - src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/mc.svg", - cardNumber: "2222 4107 4036 0010", - expiry: "03/30", - cvc: "737", - }, - amex: { - src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/amex.svg", - cardNumber: "3700 0000 0000 002", - expiry: "03/30", - cvc: "7373", - }, -} - -// Get old Drop-in -function getOldDiv() { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") -} - -// Create new Drop-in and replace for the old one -function replaceDiv() { - oldDiv.replaceWith(newDiv); - newDiv.setAttribute("id", "dropin-container"); - newDiv.setAttribute("class", "payment p-5"); - initCheckout(); -} - - -// Country dropdown changes the flag image and reloads the dropin with new country values -function changeSelect(el) { - document.getElementById("flag_img").src = flagUrlMap[el.value].src - const country = el.value - countrySettings = getCountryData(country) - console.log(countrySettings) - if ( - document.getElementById("dropin-container") && - document.getElementById("placeholderData").checked == true - ) { - placeholderData = { - holderName: "Jane Doe", - billingAddress: { - street: countrySettings.street, - postalCode: countrySettings.postalCode, - city: countrySettings.city, - country: countrySettings.countryCode, - stateOrProvince: countrySettings.stateOrProvince, - houseNumberOrName: countrySettings.houseNumberOrName, - }, - } - // document.getElementById("placeholderData").checked = false - // placeholderData = false - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - updateToggles(); - initCheckout(); - } else if (document.getElementById("dropin-container")) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - updateToggles(); - initCheckout() + src: "https://ca-test.adyen.com/ca/adl/img/flags/us.svg" } } - -// function openFirstPayment() { -// var firstPayBox = document.getElementById("firstPayBox") -// if (firstPayBox == true){ -// openFirst = true -// oldDiv.replaceWith(newDiv) -// newDiv.setAttribute("id", "dropin-container") -// initCheckout() -// } -// else { -// openFirst = false -// oldDiv.replaceWith(newDiv) -// newDiv.setAttribute("id", "dropin-container") -// initCheckout() -// } -// } - -// Funtion to toggle first payment method open -document - .getElementById("firstPayBox") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - openFirst = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - openFirst = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// Function to add billing address -document - .getElementById("billAdd") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - billAdd = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - billAdd = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// Function to show only saved payment methods -document - .getElementById("onlyStored") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - onlyStored = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - onlyStored = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// function to show holder name field -document - .getElementById("holderName") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - holderName = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - holderName = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// Funtion to show all payment methods -document - .getElementById("showPayMethod") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - showPayMethod = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - showPayMethod = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// Funtion to hide or show cvc -document - .getElementById("hideCVC") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - hideCVC = true - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - hideCVC = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - -// Funtion for including placeholder data -document - .getElementById("placeholderData") - .parentNode.addEventListener("click", function (event) { - // the value of `this` here is the element the event was fired on. - // In this situation, it's the element with the ID of 'approval'. - if (this.querySelector("input").checked) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - placeholderData = { - holderName: "Jane Doe", - billingAddress: { - street: countrySettings.street, - postalCode: countrySettings.postalCode, - city: countrySettings.city, - country: countrySettings.countryCode, - stateOrProvince: countrySettings.stateOrProvince, - houseNumberOrName: countrySettings.houseNumberOrName, - }, - } - console.log(countrySettings) - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - placeholderData = false - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } - }) - +/** + * Country specific variables + */ const countryVariables = [ { countryCode: "NL", @@ -355,6 +87,200 @@ const countryVariables = [ houseNumberOrName: "Floor 11", }, ] + +/** + * Country dropdown changes the flag image and reloads the dropin with new country values + * Calls /paymentMethods to retrieve available txvariants for that country + * @param {*} el + */ +async function changeSelect(el) { + // let countryPM = getConfiguration(); + console.log(Object.values) + document.getElementById("flag_img").src = flagUrlMap[el.value].src + const country = el.value + countrySettings = getCountryData(country) + let txvariants = await getCountryPM() + console.log(txvariants) + if (txvariants.includes("trustly") === true) { + document.getElementById('trustlyCol').style.display = "" + document.getElementById('trustlyBox').style.display = "" + document.getElementById('trustlyToggle').style.display = "" + } else { + document.getElementById('trustlyCol').style.display = "none" + document.getElementById('trustlyBox').style.display = "none" + document.getElementById('trustlyToggle').style.display = "none" + } + if (txvariants.includes("clearpay") === true) { + document.getElementById('clearpayCol').style.display = "" + document.getElementById('clearpayBox').style.display = "" + document.getElementById('clearpayToggle').style.display = "" + } else { + document.getElementById('clearpayCol').style.display = "none" + document.getElementById('clearpayBox').style.display = "none" + document.getElementById('clearpayToggle').style.display = "none" + } + if ( + document.getElementById("dropin-container") && + document.getElementById("placeholderData").checked == true + ) { + placeholderData = { + holderName: "Jane Doe", + billingAddress: { + street: countrySettings.street, + postalCode: countrySettings.postalCode, + city: countrySettings.city, + country: countrySettings.countryCode, + stateOrProvince: countrySettings.stateOrProvince, + houseNumberOrName: countrySettings.houseNumberOrName, + }, + } + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); + } else if (document.getElementById("dropin-container")) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); + } +} + +/** + * Funtion to toggle first payment method open + */ +document + .getElementById("firstPayBox") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + openFirst = true + } else { + openFirst = false + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); + }) + +// Function to add billing address +document + .getElementById("billAdd") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + billAdd = true + } else { + billAdd = false + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + +// Function to show only saved payment methods +document + .getElementById("onlyStored") + .parentNode.addEventListener("click", async function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + onlyStored = false + } else { + onlyStored = true + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + +// function to show holder name field +document + .getElementById("holderName") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + holderName = true + } else { + holderName = false + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + +// Funtion to show all payment methods +document + .getElementById("showPayMethod") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + showPayMethod = false + } else { + showPayMethod = true + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + +// Funtion to hide or show cvc +document + .getElementById("hideCVC") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + hideCVC = true + } else { + hideCVC = false + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + +// Funtion for including placeholder data +document + .getElementById("placeholderData") + .parentNode.addEventListener("click", function (event) { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (this.querySelector("input").checked) { + placeholderData = { + holderName: "Jane Doe", + billingAddress: { + street: countrySettings.street, + postalCode: countrySettings.postalCode, + city: countrySettings.city, + country: countrySettings.countryCode, + stateOrProvince: countrySettings.stateOrProvince, + houseNumberOrName: countrySettings.houseNumberOrName, + }, + } + } else { + placeholderData = false + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + }) + if (storedCountry) { const selectedCountry = JSON.parse(storedCountry.innerHTML) countrySettings = getCountryData(selectedCountry) @@ -370,117 +296,141 @@ function getCountryData(countrySettings) { ) } +/** + * setting the array of blockedPaymentMethods + */ let blockedPM = {"blockedPaymentMethods": payArray}; +async function getCountryPM() { + let noBlock = {"blockedPaymentMethods": []}; + const mergeData = { + ...countrySettings, + ...noBlock + } + const unblockedResponse = await callServer( + "/api/getPaymentMethods", + mergeData + ) + let payMethodArray = unblockedResponse.paymentMethods + let txvariants = payMethodArray.map(({ type }) => type); + return await txvariants +} + +async function paymentMethods() { + const mergeData = { + ...countrySettings, + ...blockedPM + } + const paymentMethodsResponse = await callServer( + "/api/getPaymentMethods", + mergeData + ) + console.log(paymentMethodsResponse) + return await paymentMethodsResponse +} + +async function getConfiguration() { + const paymentMethodsResponse = await paymentMethods(); + let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2) + console.log(prettyResponse) + let configuration = { + paymentMethodsResponse: paymentMethodsResponse, + clientKey, + locale: countrySettings.locale || "en_NL", + countryCode: countrySettings.countryCode || "NL", + environment: "test", + showPayButton: true, + paymentMethodsConfiguration: { + ideal: { + showImage: true, + }, + card: { + hasHolderName: holderName, + holderNameRequired: true, + hideCVC: hideCVC, + // brands: ['mc','visa','amex'], + name: "Credit or debit card", + data: { + holderName: placeholderData.holderName, + billingAddress: placeholderData.billingAddress, + }, + enableStoreDetails: true, + billingAddressRequired: billAdd, + amount: { + value: 4000, + currency: countrySettings.currency || "EUR", + }, + }, + storedCard: { + hideCVC: hideCVC, + }, + paypal: { + amount: { + currency: countrySettings.currency || "EUR", + value: 4000, + }, + environment: "test", // Change this to "live" when you're ready to accept live PayPal payments + countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production. + showPayButton: true, + merchantId: "AD74FQNVXQY5E", + } + }, + onSubmit: (state, dropin) => { + if (state.isValid) { + handleSubmission( + state, + dropin, + "/api/initiatePayment", + countrySettings, + payArray + ) + } + }, + onAdditionalDetails: (state, dropin) => { + handleSubmission(state, dropin, "/api/submitAdditionalDetails") + } + } + let cloneConfig = Object.assign({}, configuration) + logConfig(cloneConfig) + return await configuration +} + async function initCheckout() { try { - const mergeData = { - ...countrySettings, - ...blockedPM - } - const paymentMethodsResponse = await callServer( - "/api/getPaymentMethods", - mergeData - ) - console.log(mergeData) - let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2) - console.log(prettyResponse) - let configuration = { - paymentMethodsResponse: paymentMethodsResponse, - clientKey, - locale: countrySettings.locale || "en_NL", - countryCode: countrySettings.countryCode || "NL", - environment: "test", - showPayButton: true, - paymentMethodsConfiguration: { - ideal: { - showImage: true, - }, - card: { - hasHolderName: holderName, - holderNameRequired: true, - hideCVC: hideCVC, - // brands: ['mc','visa','amex'], - name: "Credit or debit card", - data: { - holderName: placeholderData.holderName, - billingAddress: placeholderData.billingAddress, - }, - enableStoreDetails: true, - billingAddressRequired: billAdd, - amount: { - value: 4000, - currency: countrySettings.currency || "EUR", - }, - }, - storedCard: { - hideCVC: hideCVC, - }, - paypal: { - amount: { - currency: countrySettings.currency || "EUR", - value: 4000, - }, - //commit: false, - environment: "test", // Change this to "live" when you're ready to accept live PayPal payments - countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production. - showPayButton: true, - merchantId: "AD74FQNVXQY5E", - //subtype: "redirect" - }, - }, - onSubmit: (state, dropin) => { - if (state.isValid) { - handleSubmission( - state, - dropin, - "/api/initiatePayment", - countrySettings, - payArray - ) - } - }, - onAdditionalDetails: (state, dropin) => { - handleSubmission(state, dropin, "/api/submitAdditionalDetails") - }, + let configuration = await getConfiguration() + const checkout = await AdyenCheckout(configuration) + checkout + .create("dropin", { + showRemovePaymentMethodButton: true, + openFirstPaymentMethod: openFirst, + showStoredPaymentMethods: onlyStored, + showPaymentMethods: showPayMethod, onDisableStoredPaymentMethod: ( storedPaymentMethodId, resolve, reject ) => { - // handleSubmission(state, dropin, "/api/disable"); + callServer("/api/disable", { + storedPaymentMethodId: storedPaymentMethodId, + }) + resolve() + reject() }, - } - // cloning configuration object to filter and log - const cloneConfig = Object.assign({}, configuration) - logConfig(cloneConfig) - - const checkout = await AdyenCheckout(configuration) - checkout - .create("dropin", { - showRemovePaymentMethodButton: true, - openFirstPaymentMethod: openFirst, - showStoredPaymentMethods: onlyStored, - showPaymentMethods: showPayMethod, - onDisableStoredPaymentMethod: ( - storedPaymentMethodId, - resolve, - reject - ) => { - callServer("/api/disable", { - storedPaymentMethodId: storedPaymentMethodId, - }) - resolve() - reject() - }, - }) - .mount("#dropin-container") + }) + .mount("#dropin-container") + return await checkout } catch (error) { console.error(error) alert("Error occurred. Look at console for details") } } +async function unmountDropin() { + const checkout = await initCheckout() + checkout.unmount("#dropin-container") +} + + async function unmountContainer() { try { const checkout = await AdyenCheckout(); @@ -492,55 +442,19 @@ async function unmountContainer() { } } - -// logging configuration object to UI -function logConfig(cloneConfig) { - console.log(cloneConfig) - // let filteredConfig = loggedConfig - - delete cloneConfig.paymentMethodsResponse - cloneConfig.clientKey = "***" - cloneConfig.paymentMethodsConfiguration.paypal.merchantId = "***" - - let finalConfig = { configuration: cloneConfig } - let stringConfig = JSON.stringify(finalConfig, null, 2) - - console.log(stringConfig) - - document.getElementById("configCode").innerHTML = - syntaxHighlight(stringConfig) -} - -/*function filterUnimplemented(pm) { - pm.paymentMethods = pm.paymentMethods.filter((it) => - [ - "scheme", - "ideal", - "dotpay", - "giropay", - "sepadirectdebit", - "directEbanking", - "ach", - "alipay", - "klarna_paynow", - "klarna", - "klarna_account", - "paypal", - "boletobancario_santander" - ].includes(it.type) - ); - return pm; -}*/ - -// Event handlers called when the shopper selects the pay button, -// or when additional information is required to complete the payment -async function handleSubmission(state, dropin, url, countrySettings, payArray) { +/** + * @function handleSubmission - Event handlers called when the shopper selects the pay button, or when additional information is required to complete the payment + * @param state - Dropin state data + * @param dropin - Dropin + * @param url - web address + * @param countrySettings - country specific data + */ +async function handleSubmission(state, dropin, url, countrySettings) { try { //keeping the country data for the /payments call const mergedData = { ...state.data, - ...countrySettings, - ...payArray + ...countrySettings } const res = await callServer(url, mergedData) let prettyResponse = JSON.stringify(res, null, 2) @@ -569,7 +483,11 @@ successDiv.style.display = "none" const errorDiv = document.querySelector(".errorDiv") errorDiv.style.display = "none" -// Handles responses sent from your server to the client +/** + * @function handleServerResponse - Handles responses sent from your server to the client + * @param res - API response payload + * @param dropin - Dropin + */ function handleServerResponse(res, dropin) { if (res.action) { dropin.handleAction(res.action) @@ -598,43 +516,262 @@ function handleServerResponse(res, dropin) { } } -// not it use -function restartDropin() { - const currentDiv = document.getElementById("dropin-container") - currentDiv.style.display = "" +// Add txvariants to blockPaymentMethods array on button click +// ------- Cards --------- +/** + * @function blockCard - adds/removes visa, amex and mastercard as txvariants to blockPaymentMethods array + */ +function blockCard() { + const CardState = document.getElementById('showCard').checked; + const oldDiv = document.getElementById("dropin-container") const newDiv = document.createElement("div") - currentDiv.replaceWith(newDiv) + if (CardState == true) { + const filteredPM = payMethods.filter((s) => !s.match("visa") && !s.match("mc") && !s.match("amex")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("visa"); + payMethods.push("mc"); + payMethods.push("amex"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) newDiv.setAttribute("id", "dropin-container") newDiv.setAttribute("class", "payment p-5") - newDiv.style.display = "" - successDiv.style.display = "none" - errorDiv.style.display = "none" initCheckout() } +// -------PayPal--------- +/** + * @function blockPaypal - adds/removes paypal as txvariant to blockPaymentMethods array + */ +function blockPaypal() { + const paypalState = document.getElementById('showPaypal').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (paypalState == true) { + const filteredPM = payMethods.filter((s) => !s.match("paypal")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("paypal"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() +} +// -------Ideal--------- +/** + * @function blockIdeal - adds/removes ideal as txvariant to blockPaymentMethods array + */ +function blockIdeal() { + const idealState = document.getElementById('showIdeal').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (idealState == true) { + const filteredPM = payMethods.filter((s) => !s.match("ideal")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("ideal"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------Klarna--------- +/** + * @function blockKlarna - adds/removes klarna as txvariant to blockPaymentMethods array + */ +function blockKlarna() { + const klarnaState = document.getElementById('showKlarna').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (klarnaState == true) { + const filteredPM = payMethods.filter((s) => !s.match("klarna")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("klarna"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------GooglePay--------- +/** + * @function blockGooglePay - adds/removes paywithgoogle as txvariant to blockPaymentMethods array + */ +function blockGooglePay() { + const GooglePayState = document.getElementById('showGooglePay').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (GooglePayState == true) { + const filteredPM = payMethods.filter((s) => !s.match("paywithgoogle")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("paywithgoogle"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------WeChat--------- +/** + * @function blockWeChat - adds/removes wechatpayQR as txvariant to blockPaymentMethods array + */ +function blockWeChat() { + const WeChatState = document.getElementById('showWeChat').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (WeChatState == true) { + const filteredPM = payMethods.filter((s) => !s.match("wechatpayQR")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("wechatpayQR"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------AliPay--------- +/** + * @function blockAliPay - adds/removes alipay as txvariant to blockPaymentMethods array + */ +function blockAliPay() { + const AliPayState = document.getElementById('showAliPay').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (AliPayState == true) { + const filteredPM = payMethods.filter((s) => !s.match("alipay")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("alipay"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------Paysafecard--------- +/** + * @function blockPaysafecard - adds/removes paysafecard as txvariant to blockPaymentMethods array + */ +function blockPaysafecard() { + const PaysafecardState = document.getElementById('showPaysafecard').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (PaysafecardState == true) { + const filteredPM = payMethods.filter((s) => !s.match("paysafecard")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("paysafecard"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------Clearpay--------- +/** + * @function blockClearpay - adds/removes clearpay as txvariant to blockPaymentMethods array + */ +function blockClearpay() { + const ClearpayState = document.getElementById('showClearpay').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (ClearpayState == true) { + const filteredPM = payMethods.filter((s) => !s.match("clearpay")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("clearpay"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} +// -------Trustly--------- +/** + * @function blockTrustly - adds/removes trustly as txvariant to blockPaymentMethods array + */ +function blockTrustly() { + const TrustlyState = document.getElementById('showTrustly').checked; + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + if (TrustlyState == true) { + const filteredPM = payMethods.filter((s) => !s.match("trustly")); + payMethods = filteredPM; + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } else { + payMethods.push("trustly"); + payArray = Object.values(payMethods); + blockedPM = {"blockedPaymentMethods": payArray}; + } + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout(); +} - - -// define r as root of document for css variables -let r = document.querySelector(":root") - -// Colour picker changes button color +/** + * @function setDynamicCSS - Colour picker that changes button colour + */ function setDynamicCSS() { colorVal = document.getElementById("buttonColorPick").value r.style.setProperty("--background-color", colorVal) updateStyleCode() } -// change page background colour +/** + * @function backgroudColor - Changes page background colour + */ function backgroundColor() { let bgVal = document.getElementById("bgColorPick").value r.style.setProperty("--bg-color", bgVal) } -// change active payment method colour +/** @function dropinColor - Changes active payment method colour */ function dropinColor() { let dropinColor = document.getElementById("dropinColorPick").value r.style.setProperty("--dropin-color", dropinColor) updateStyleCode() } -// change collapsed payment methods' colours +/** @function dropinTabColor - Changes collapsed payment methods' colours */ function dropinTabColor() { let dropinTabColor = document.getElementById("dropinTabColorPick").value r.style.setProperty("--dropin-tab-color", dropinTabColor) @@ -679,424 +816,103 @@ document } }) -// Reset CSS values to default Drop-in -function resetDynamicCSS() { - r.style.setProperty("--background-color", null) - r.style.setProperty("--dropin-width", null) - r.style.setProperty("--body-edges", null) - r.style.setProperty("--selectedBody-edges", null) - r.style.setProperty("--topedges-left", null) - r.style.setProperty("--topedges-right", null) - r.style.setProperty("--bottomedges-left", null) - r.style.setProperty("--bottomedges-right", null) - r.style.setProperty("--button-edges", null) - r.style.setProperty("--bg-color", null) - r.style.setProperty("--dropin-color", null) - r.style.setProperty("--dropin-tab-color", null) - r.style.setProperty("--dropin-font", null) - r.style.setProperty("--text-color", null) - r.style.setProperty("--text-bold", null) - r.style.setProperty("--text-italic", null) - r.style.setProperty("--text-align", null) - r.style.setProperty("--payButton-width", null) - r.style.setProperty("--payments-spacing", null) - r.style.setProperty("--paymentselected-margin", null) - r.style.setProperty("--font-options", null) -} // change dropin container width function dropinWidth() { - let widthValue = document.getElementById("changeWidth").value - let widthpx = widthValue + "px" - r.style.setProperty("--dropin-width", widthpx) - console.log(widthpx) - updateStyleCode() -} -// change pay buttons' width -function payButtonWidth() { - let payWidthValue = document.getElementById("payButtonWidth").value - let payWidthpx = payWidthValue + "px" - r.style.setProperty("--payButton-width", payWidthpx) - updateStyleCode() -} -// change spacing of payment methods tabs -function paymentsSpacing() { - let paymentSpacingValue = document.getElementById("paymentsSpacing").value - let paymentSpacingpx = paymentSpacingValue + "px" - r.style.setProperty("--payments-spacing", paymentSpacingpx) - r.style.setProperty("--paymentselected-margin", paymentSpacingpx) - updateStyleCode() -} -// change font size -function fontWidth() { - let fontValue = document.getElementById("fontSize").value - let fontpx = fontValue + "px" - r.style.setProperty("--dropin-font", fontpx) - updateStyleCode() -} - -// this turns the test card around on copyCVC button click -function turnCard() { - updateCardCopy(); - document.getElementById("card").classList.add("card-visited") -} - -// this turns the card back to front if on reverse and copyPAN or copyExiry button gets clicked -function resetCard() { - updateCardCopy(); - if (document.getElementById("card").classList.contains("card-visited")) { - document.getElementById("card").classList.remove("card-visited") - } -} - -// this updates the button attribute copy text to reflect the current card on UI -function updateCardCopy() { - let panText = document.getElementById('cardNumber').innerText - console.log(panText) - document.getElementById('btn').setAttribute("data-clipboard-text", String(panText)) - let expiryText = document.getElementById('expiry').innerText - document.getElementById('copy-expiry').setAttribute("data-clipboard-text", String(expiryText)) - let cvcText = document.getElementById('cvc').innerText - document.getElementById('copy-cvc').setAttribute("data-clipboard-text", String(cvcText)) -} - -// this is for the drop down to change test cards -function changeTestCard(brandValue) { - updateCardCopy(); - document.getElementById("brand_img").src = - testCardBrandsMap[brandValue.value].src - document.getElementById("cardNumber").innerText = - testCardBrandsMap[brandValue.value].cardNumber - document.getElementById("cvc").innerText = - testCardBrandsMap[brandValue.value].cvc -} -// change text position -function positionText() { - let positionValue = document.getElementById("positionText").value - r.style.setProperty("--text-align", positionValue) - updateStyleCode() -} -// make text bold -function makeBold() { - if (document.getElementById("makeBold").classList.contains("bold-active")) { - document.getElementById("makeBold").classList.remove("bold-active") - r.style.setProperty("--text-bold", null) - updateStyleCode() - } else { - document.getElementById("makeBold").classList.add("bold-active") - r.style.setProperty("--text-bold", "bold") + let widthValue = document.getElementById("changeWidth").value + let widthpx = widthValue + "px" + r.style.setProperty("--dropin-width", widthpx) + console.log(widthpx) updateStyleCode() } -} + // change pay buttons' width + function payButtonWidth() { + let payWidthValue = document.getElementById("payButtonWidth").value + let payWidthpx = payWidthValue + "px" + r.style.setProperty("--payButton-width", payWidthpx) + updateStyleCode() + } + // change spacing of payment methods tabs + function paymentsSpacing() { + let paymentSpacingValue = document.getElementById("paymentsSpacing").value + let paymentSpacingpx = paymentSpacingValue + "px" + r.style.setProperty("--payments-spacing", paymentSpacingpx) + r.style.setProperty("--paymentselected-margin", paymentSpacingpx) + updateStyleCode() + } + // change font size + function fontWidth() { + let fontValue = document.getElementById("fontSize").value + let fontpx = fontValue + "px" + r.style.setProperty("--dropin-font", fontpx) + updateStyleCode() + } + // make text italic function makeItalic() { - if ( - document.getElementById("makeItalic").classList.contains("italic-active") - ) { - document.getElementById("makeItalic").classList.remove("italic-active") + if ( + document.getElementById("makeItalic").classList.contains("italic-active") + ) { + document.getElementById("makeItalic").classList.remove("italic-active") + r.style.setProperty("--text-italic", null) + updateStyleCode() + } else { + document.getElementById("makeItalic").classList.add("italic-active") + r.style.setProperty("--text-italic", "italic") + updateStyleCode() + } + } + + //drop down selector for the different font styles + function changeFont() { + r.style.setProperty("--font-options", null) + let fontValue = document.getElementById("font_select").value + r.style.setProperty("--font-options", fontValue) + updateStyleCode() + } + + +// Reset CSS values to default Drop-in +function resetDynamicCSS() { + r.style.setProperty("--background-color", null) + r.style.setProperty("--dropin-width", null) + r.style.setProperty("--body-edges", null) + r.style.setProperty("--selectedBody-edges", null) + r.style.setProperty("--topedges-left", null) + r.style.setProperty("--topedges-right", null) + r.style.setProperty("--bottomedges-left", null) + r.style.setProperty("--bottomedges-right", null) + r.style.setProperty("--button-edges", null) + r.style.setProperty("--bg-color", null) + r.style.setProperty("--dropin-color", null) + r.style.setProperty("--dropin-tab-color", null) + r.style.setProperty("--dropin-font", null) + r.style.setProperty("--text-color", null) + r.style.setProperty("--text-bold", null) r.style.setProperty("--text-italic", null) - updateStyleCode() - } else { - document.getElementById("makeItalic").classList.add("italic-active") - r.style.setProperty("--text-italic", "italic") - updateStyleCode() + r.style.setProperty("--text-align", null) + r.style.setProperty("--payButton-width", null) + r.style.setProperty("--payments-spacing", null) + r.style.setProperty("--paymentselected-margin", null) + r.style.setProperty("--font-options", null) } -} -//drop down selector for the different font styles -function changeFont() { - r.style.setProperty("--font-options", null) - let fontValue = document.getElementById("font_select").value - r.style.setProperty("--font-options", fontValue) - updateStyleCode() -} +// logging configuration object to UI +function logConfig(cloneConfig) { + console.log(cloneConfig) + // let filteredConfig = loggedConfig -// default toggles for NL -document.getElementById('trustlyCol').style.display = "none" -document.getElementById('trustlyBox').style.display = "none" -document.getElementById('trustlyToggle').style.display = "none" + delete cloneConfig.paymentMethodsResponse + cloneConfig.clientKey = "***" + cloneConfig.paymentMethodsConfiguration.paypal.merchantId = "***" -// Remove toggle from txvariants not applicable for the -function updateToggles(){ - if(countrySettings.countryCode == 'GB' ) { - document.getElementById('trustlyCol').style.display = "" - document.getElementById('trustlyBox').style.display = "" - document.getElementById('trustlyToggle').style.display = "" - } - else if(countrySettings.countryCode == 'NL' ) { - document.getElementById('trustlyCol').style.display = "none" - document.getElementById('trustlyBox').style.display = "none" - document.getElementById('trustlyToggle').style.display = "none" - } - else if (countrySettings.countryCode == 'US' ){ - document.getElementById('trustlyCol').style.display = "none" - document.getElementById('trustlyBox').style.display = "none" - document.getElementById('trustlyToggle').style.display = "none" + let finalConfig = { configuration: cloneConfig } + let stringConfig = JSON.stringify(finalConfig, null, 2) - } -} -// Add txvariants to blockPaymentMethods array on button click -// -------Cards - visa+mastercard+amex --------- -function blockCard() { - const CardState = document.getElementById('showCard').checked; - if (CardState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("visa") && !s.match("mc") && !s.match("amex")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("visa"); - payMethods.push("mc"); - payMethods.push("amex"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------PayPal--------- -function blockPaypal() { - const paypalState = document.getElementById('showPaypal').checked; - if (paypalState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("paypal")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("paypal"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------Ideal--------- -function blockIdeal() { - const idealState = document.getElementById('showIdeal').checked; - if (idealState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("ideal")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("ideal"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------Klarna--------- -function blockKlarna() { - const klarnaState = document.getElementById('showKlarna').checked; - if (klarnaState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("klarna")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("klarna"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------GooglePay--------- -function blockGooglePay() { - const GooglePayState = document.getElementById('showGooglePay').checked; - if (GooglePayState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("paywithgoogle")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("paywithgoogle"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------WeChat--------- -function blockWeChat() { - const WeChatState = document.getElementById('showWeChat').checked; - if (WeChatState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("wechatpayQR")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("wechatpayQR"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------AliPay--------- -function blockAliPay() { - const AliPayState = document.getElementById('showAliPay').checked; - if (AliPayState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("alipay")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("alipay"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------Paysafecard--------- -function blockPaysafecard() { - const PaysafecardState = document.getElementById('showPaysafecard').checked; - if (PaysafecardState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("paysafecard")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("paysafecard"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------Clearpay--------- -function blockClearpay() { - const ClearpayState = document.getElementById('showClearpay').checked; - if (ClearpayState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("clearpay")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("clearpay"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } -} -// -------Trustly--------- -function blockTrustly() { - const TrustlyState = document.getElementById('showTrustly').checked; - if (TrustlyState == true) { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - const filteredPM = payMethods.filter((s) => !s.match("trustly")); - payMethods = filteredPM; - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout(); - } else { - const oldDiv = document.getElementById("dropin-container") - const newDiv = document.createElement("div") - payMethods.push("trustly"); - payArray = Object.values(payMethods); - blockedPM = {"blockedPaymentMethods": payArray}; - oldDiv.replaceWith(newDiv) - newDiv.setAttribute("id", "dropin-container") - newDiv.setAttribute("class", "payment p-5") - initCheckout() - } + console.log(stringConfig) + + document.getElementById("configCode").innerHTML = + syntaxHighlight(stringConfig) } //JSON highlight code styling @@ -1122,7 +938,6 @@ function syntaxHighlight(json) { ) } -// Get css values from current page and print to "Save your creation" function updateStyleCode() { let cssjson = { ".adyen-checkout__payment-method": { @@ -1198,4 +1013,14 @@ function updateStyleCode() { } updateStyleCode() +function restartDropin() { + const oldDiv = document.getElementById("dropin-container") + const newDiv = document.createElement("div") + oldDiv.replaceWith(newDiv) + newDiv.setAttribute("id", "dropin-container") + newDiv.setAttribute("class", "payment p-5") + initCheckout() + successDiv.style.display = "none" +} + initCheckout() diff --git a/app/static/js/test-cards.js b/app/static/js/test-cards.js new file mode 100644 index 0000000..283335d --- /dev/null +++ b/app/static/js/test-cards.js @@ -0,0 +1,74 @@ +const testCardBrandsMap = { + visa: { + src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg", + cardNumber: "4111 1111 1111 1111", + expiry: "03/30", + cvc: "737", + }, + mc: { + src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/mc.svg", + cardNumber: "2222 4107 4036 0010", + expiry: "03/30", + cvc: "737", + }, + amex: { + src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/amex.svg", + cardNumber: "3700 0000 0000 002", + expiry: "03/30", + cvc: "7373", + }, + } + +// this is for the drop down to change test cards +function changeTestCard(brandValue) { + updateCardCopy(); + document.getElementById("brand_img").src = + testCardBrandsMap[brandValue.value].src + document.getElementById("cardNumber").innerText = + testCardBrandsMap[brandValue.value].cardNumber + document.getElementById("cvc").innerText = + testCardBrandsMap[brandValue.value].cvc +} +// change text position +function positionText() { + let positionValue = document.getElementById("positionText").value + r.style.setProperty("--text-align", positionValue) + updateStyleCode() +} +// make text bold +function makeBold() { + if (document.getElementById("makeBold").classList.contains("bold-active")) { + document.getElementById("makeBold").classList.remove("bold-active") + r.style.setProperty("--text-bold", null) + updateStyleCode() + } else { + document.getElementById("makeBold").classList.add("bold-active") + r.style.setProperty("--text-bold", "bold") + updateStyleCode() + } +} + +// this turns the test card around on copyCVC button click +function turnCard() { + updateCardCopy(); + document.getElementById("card").classList.add("card-visited") +} + +// this turns the card back to front if on reverse and copyPAN or copyExiry button gets clicked +function resetCard() { + updateCardCopy(); + if (document.getElementById("card").classList.contains("card-visited")) { + document.getElementById("card").classList.remove("card-visited") + } +} + +// this updates the button attribute copy text to reflect the current card on UI +function updateCardCopy() { + let panText = document.getElementById('cardNumber').innerText + console.log(panText) + document.getElementById('btn').setAttribute("data-clipboard-text", String(panText)) + let expiryText = document.getElementById('expiry').innerText + document.getElementById('copy-expiry').setAttribute("data-clipboard-text", String(expiryText)) + let cvcText = document.getElementById('cvc').innerText + document.getElementById('copy-cvc').setAttribute("data-clipboard-text", String(cvcText)) +} \ No newline at end of file diff --git a/app/templates/component.html b/app/templates/component.html index 7892ca7..167c6e7 100644 --- a/app/templates/component.html +++ b/app/templates/component.html @@ -519,14 +519,14 @@ > -
+
-
+

Clearpay

-
+
+ @@ -1299,13 +1300,9 @@ var clipboard = new Clipboard(".btn") clipboard.on("success", function (e) { console.log(e) - // setTooltip(e.trigger, 'Copied!'); - // hideTooltip(e.trigger); }) clipboard.on("error", function (e) { console.log(e) - // setTooltip(e.trigger, 'Failed!'); - // hideTooltip(e.trigger); }) @@ -1324,53 +1321,8 @@ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" > - - - - + - - -