jlengrand/checkoutCreate
1
0
Fork 0
mirror of https://github.com/jlengrand/checkoutCreate.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #39 from b-leech/ana

Browse Source 
payment methods via API
This commit is contained in:
anamotaadyen
2022-10-19 17:30:42 +01:00
committed by GitHub
parent df23b7d183 d03a6587ae
commit 09906576a9
5 changed files with 368 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/app.py
View File

@@ -29,10 +29,9 @@ def create_app():
@app.route('/api/getPaymentMethods', methods=['GET', 'POST'])
def get_payment_methods():
request_data = request.get_json()
print (request_data)
print ("request_data:\n" + str(request_data))
locale_data = request_data
payMethodsFE = request.get_json()
return adyen_payment_methods(payMethodsFE, locale_data)
return adyen_payment_methods(locale_data)
@app.route('/api/initiatePayment', methods=['POST'])

4
app/main/paymentMethods.py
View File

@@ -10,7 +10,7 @@ Should have a payment state on your server from which you can fetch information
'''
def adyen_payment_methods(locale_data, payMethodsFE):
def adyen_payment_methods(locale_data):
adyen = Adyen.Adyen()
adyen.payment.client.xapikey = get_adyen_api_key()
adyen.payment.client.platform = "test" # change to live for production
@@ -23,7 +23,7 @@ def adyen_payment_methods(locale_data, payMethodsFE):
payment_methods_request['shopperReference'] = "UniqueReference"
payment_methods_request['channel'] = "Web"
payment_methods_request['merchantAccount'] = "CheckoutCreateDemo"
payment_methods_request['blockedPaymentMethods'] = []
payment_methods_request['blockedPaymentMethods'] = locale_data['blockedPaymentMethods']

5
app/main/payments.py
View File

@@ -29,6 +29,8 @@ 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"}
@@ -141,6 +143,9 @@ def sanatizeRequest(payments_request):
del payments_request['houseNumberOrName']
del payments_request['postalCode']
del payments_request['street']
del payments_request['0']
del payments_request['1']
# loaded = json.loads(payments_request)

483
app/static/js/adyen-implementation.js
View File

@@ -1,5 +1,6 @@
const clientKey = JSON.parse(document.getElementById("client-key").innerHTML)
const storedCountry = document.getElementById("country-code")
const currentPM = document.getElementById("pay-methods")
// let country = "GB";
let countrySettings = "NL"
@@ -8,6 +9,9 @@ const urlCountryParams = new URLSearchParams(window.location.search)
const countryURL = urlCountryParams.get("country")
console.log(countryURL)
let payMethods =[];
let payArray = Object.values(payMethods);
// global configuration variables
let openFirst = true
let billAdd = false
@@ -63,6 +67,20 @@ const testCardBrandsMap = {
},
}
// 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) {
@@ -92,13 +110,15 @@ function changeSelect(el) {
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
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()
}
}
@@ -350,16 +370,21 @@ function getCountryData(countrySettings) {
)
}
let blockedPM = {"blockedPaymentMethods": payArray};
async function initCheckout() {
try {
const mergeData = {
...countrySettings,
...blockedPM
}
const paymentMethodsResponse = await callServer(
"/api/getPaymentMethods",
countrySettings
mergeData
)
console.log(countrySettings)
console.log(mergeData)
let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
console.log(prettyResponse)
console.log(openFirst)
let configuration = {
paymentMethodsResponse: paymentMethodsResponse,
clientKey,
@@ -410,7 +435,8 @@ async function initCheckout() {
state,
dropin,
"/api/initiatePayment",
countrySettings
countrySettings,
payArray
)
}
},
@@ -455,6 +481,18 @@ async function initCheckout() {
}
}
async function unmountContainer() {
try {
const checkout = await AdyenCheckout();
checkout
.unmount("#dropin-container")
} catch (error) {
console.error(error)
alert("Error occurred. Look at console for details")
}
}
// logging configuration object to UI
function logConfig(cloneConfig) {
console.log(cloneConfig)
@@ -496,12 +534,13 @@ function logConfig(cloneConfig) {
// 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) {
async function handleSubmission(state, dropin, url, countrySettings, payArray) {
try {
//keeping the country data for the /payments call
const mergedData = {
...state.data,
...countrySettings,
...payArray
}
const res = await callServer(url, mergedData)
let prettyResponse = JSON.stringify(res, null, 2)
@@ -559,6 +598,7 @@ function handleServerResponse(res, dropin) {
}
}
// not it use
function restartDropin() {
const currentDiv = document.getElementById("dropin-container")
currentDiv.style.display = ""
@@ -569,29 +609,12 @@ function restartDropin() {
newDiv.style.display = ""
successDiv.style.display = "none"
errorDiv.style.display = "none"
// oldDiv = newDiv
initCheckout()
}
// Test cards JS - NOT IN USE
function copyToClipboard() {
// Get the text field
let copyPAN = document.getElementById("cardNumber").textContent
console.log(copyPAN)
// Select the text field
// copyPAN.select();
// copyPAN.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.write(copyPAN)
// Alert the copied text
alert("Copied the text: " + copyPAN)
}
// define r as root of document for css variables
let r = document.querySelector(":root")
// Colour picker changes button color
@@ -600,37 +623,37 @@ function setDynamicCSS() {
r.style.setProperty("--background-color", colorVal)
updateStyleCode()
}
// change page background colour
function backgroundColor() {
let bgVal = document.getElementById("bgColorPick").value
r.style.setProperty("--bg-color", bgVal)
}
// change 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() {
let dropinTabColor = document.getElementById("dropinTabColorPick").value
r.style.setProperty("--dropin-tab-color", dropinTabColor)
updateStyleCode()
}
// change text colour
function textColor() {
let textColor = document.getElementById("textColorPick").value
r.style.setProperty("--text-color", textColor)
updateStyleCode()
}
// change pay buttons' edges (staright to round)
function buttonEdges() {
let edgeValue = document.getElementById("buttonEdges").value
let pixelVal = edgeValue + "px"
r.style.setProperty("--button-edges", pixelVal)
updateStyleCode()
}
// change Drop-in's edges (straight to round)
function bodyEdges() {
let bodyEdgeValue = document.getElementById("bodyEdges").value
let bodyPixelVal = bodyEdgeValue + "px"
@@ -643,7 +666,7 @@ function bodyEdges() {
updateStyleCode()
}
// Funtion to remove borders
// Function to remove borders
document
.getElementById("noBorder")
.parentNode.addEventListener("click", function (event) {
@@ -656,6 +679,7 @@ document
}
})
// Reset CSS values to default Drop-in
function resetDynamicCSS() {
r.style.setProperty("--background-color", null)
r.style.setProperty("--dropin-width", null)
@@ -679,7 +703,7 @@ function resetDynamicCSS() {
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"
@@ -687,14 +711,14 @@ function dropinWidth() {
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"
@@ -702,7 +726,7 @@ function paymentsSpacing() {
r.style.setProperty("--paymentselected-margin", paymentSpacingpx)
updateStyleCode()
}
// change font size
function fontWidth() {
let fontValue = document.getElementById("fontSize").value
let fontpx = fontValue + "px"
@@ -714,7 +738,6 @@ function fontWidth() {
function turnCard() {
updateCardCopy();
document.getElementById("card").classList.add("card-visited")
// cardDiv.setAttribute("class", "card-visited")
}
// this turns the card back to front if on reverse and copyPAN or copyExiry button gets clicked
@@ -746,13 +769,13 @@ function changeTestCard(brandValue) {
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")
@@ -765,7 +788,7 @@ function makeBold() {
}
}
//makie text italic
// make text italic
function makeItalic() {
if (
document.getElementById("makeItalic").classList.contains("italic-active")
@@ -779,152 +802,304 @@ function makeItalic() {
updateStyleCode()
}
}
// document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event);
//drop down selector for the different font styles
//document.getElementById("font_select").parentNode.addEventListener('change', function() {
function changeFont() {
r.style.setProperty("--font-options", null)
let fontValue = document.getElementById("font_select").value
r.style.setProperty("--font-options", fontValue)
updateStyleCode()
}
// document.getElementById('placeholderData').parentNode.addEventListener('click', function (event) {
//hiding payment methods functions
// function showPaypal() {
// const paypalState = document.getElementById('showPaypal').checked;
// const paypalBox = document.querySelector('.adyen-checkout__payment-method--paypal')
// if (paypalState == true) {
// paypalBox.style.display = ""
// } else {
// paypalBox.style.display = "none"
// }
// }
let payMethods =[
"paypal"
]
// attempt to add txvariant to blockPaymentMethods array on button click
function blockPaypal() {
const paypalState = document.getElementById('showPaypal').checked;
// const paypalBox = document.querySelector('.adyen-checkout__payment-method--paypal')
if (paypalState == true) {
payMethods.splice("paypal");
} else {
payMethods.push("paypal");
}
}
// default toggles for NL
document.getElementById('trustlyCol').style.display = "none"
document.getElementById('trustlyBox').style.display = "none"
document.getElementById('trustlyToggle').style.display = "none"
// 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"
// interim solution to hide payment methods - USE ONLY AT THE END - breaks on dropin reload
function showPaypal() {
const paypalState = document.getElementById("showPaypal").checked
const paypalBox = document.querySelector(
".adyen-checkout__payment-method--paypal"
)
if (paypalState == true) {
paypalBox.style.display = ""
} else {
paypalBox.style.display = "none"
}
}
function showIdeal() {
const idealState = document.getElementById("showIdeal").checked
const idealBox = document.querySelector(
".adyen-checkout__payment-method--ideal"
)
// 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) {
idealBox.style.display = ""
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 {
idealBox.style.display = "none"
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()
}
}
function showKlarna() {
const klarnaState = document.getElementById("showKlarna").checked
const klarnaBox = document.querySelector(
".adyen-checkout__payment-method--klarna"
)
// -------Klarna---------
function blockKlarna() {
const klarnaState = document.getElementById('showKlarna').checked;
if (klarnaState == true) {
klarnaBox.style.display = ""
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 {
klarnaBox.style.display = "none"
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()
}
}
function showGooglePay() {
const googlepayState = document.getElementById("showGooglePay").checked
const googlepayBox = document.querySelector(
".adyen-checkout__payment-method--paywithgoogle"
)
if (googlepayState == true) {
googlepayBox.style.display = ""
// -------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 {
googlepayBox.style.display = "none"
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()
}
}
function showWeChat() {
const weChatState = document.getElementById("showWeChat").checked
const weChatBox = document.querySelector(
".adyen-checkout__payment-method--wechatpayQR"
)
if (weChatState == true) {
weChatBox.style.display = ""
// -------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 {
weChatBox.style.display = "none"
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()
}
}
function showAliPay() {
const alipayState = document.getElementById("showAliPay").checked
const alipayBox = document.querySelector(
".adyen-checkout__payment-method--alipay"
)
if (alipayState == true) {
alipayBox.style.display = ""
// -------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 {
alipayBox.style.display = "none"
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()
}
}
function showPaysafecard() {
const paysafecardState = document.getElementById("showPaysafecard").checked
const paysafecardBox = document.querySelector(
".adyen-checkout__payment-method--paysafecard"
)
if (paysafecardState == true) {
paysafecardBox.style.display = ""
// -------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 {
paysafecardBox.style.display = "none"
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()
}
}
function showClearpay() {
const clearpayState = document.getElementById("showClearpay").checked
const clearpayBox = document.querySelector(
".adyen-checkout__payment-method--clearpay"
)
if (clearpayState == true) {
clearpayBox.style.display = ""
// -------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 {
clearpayBox.style.display = "none"
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()
}
}
function showTrustly() {
const trustlyState = document.getElementById("showTrustly").checked
const trustlyBox = document.querySelector(
".adyen-checkout__payment-method--trustly"
)
if (trustlyState == true) {
trustlyBox.style.display = ""
// -------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 {
trustlyBox.style.display = "none"
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()
}
}
//JSON highlight code styling
function syntaxHighlight(json) {
json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
return json.replace(
@@ -947,19 +1122,7 @@ function syntaxHighlight(json) {
)
}
// // CSS printing
// // let styledDiv = document.getElementsByClassName('adyen-checkout__payment-method');
// const cloneCSS = Object.assign({}, oldDiv)
// let cssCode = styledDiv.style
// document.getElementById("cssCode").innerHTML = syntaxHighlight(cssCode);
// let divContent = document.querySelector('dropin-container')
// let cssCode = window.getComputedStyle(divContent).display;
// let stringCSS = JSON.stringify(cssCode, null, 2);
// document.getElementById("cssCode").innerHTML = stringCSS;
// let paymentCont = document.getElementById('dropin-container');
// console.log(window.getComputedStyle(paymentCont, null));
// Get css values from current page and print to "Save your creation"
function updateStyleCode() {
let cssjson = {
".adyen-checkout__payment-method": {
@@ -1020,7 +1183,7 @@ function updateStyleCode() {
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
"font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
color: getComputedStyle(r).getPropertyValue("--text-color"),
},
}
}
var styleStr = ""
for (var i in cssjson) {

49
app/templates/component.html
View File

@@ -338,6 +338,29 @@
</p>
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Card</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showCard"
data-toggle="toggle"
onchange="blockCard()"
checked
/>
<label
class="custom-control-label"
for="showCard"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Paypal</p>
</div>
@@ -349,7 +372,7 @@
class="custom-control-input"
id="showPaypal"
data-toggle="toggle"
onchange="showPaypal()"
onchange="blockPaypal()"
checked
/>
<label
@@ -372,7 +395,7 @@
class="custom-control-input"
id="showIdeal"
data-toggle="toggle"
onchange="showIdeal()"
onchange="blockIdeal()"
checked
/>
<label
@@ -395,7 +418,7 @@
class="custom-control-input"
id="showKlarna"
data-toggle="toggle"
onchange="showKlarna()"
onchange="blockKlarna()"
checked
/>
<label
@@ -418,7 +441,7 @@
class="custom-control-input"
id="showAliPay"
data-toggle="toggle"
onchange="showAliPay()"
onchange="blockAliPay()"
checked
/>
<label
@@ -441,7 +464,7 @@
class="custom-control-input"
id="showGooglePay"
data-toggle="toggle"
onchange="showGooglePay()"
onchange="blockGooglePay()"
checked
/>
<label
@@ -464,7 +487,7 @@
class="custom-control-input"
id="showWeChat"
data-toggle="toggle"
onchange="showWeChat()"
onchange="blockWeChat()"
checked
/>
<label
@@ -487,7 +510,7 @@
class="custom-control-input"
id="showPaysafecard"
data-toggle="toggle"
onchange="showPaysafecard()"
onchange="blockPaysafecard()"
checked
/>
<label
@@ -510,7 +533,7 @@
class="custom-control-input"
id="showClearpay"
data-toggle="toggle"
onchange="showClearpay()"
onchange="blockClearpay()"
checked
/>
<label
@@ -519,21 +542,21 @@
></label>
</div>
</div>
<div class="col-6">
<div id="trustlyCol" class="col-6" display="none">
</div>
<!-- title -->
<div class="col-3">
<div id="trustlyBox" class="col-3" display="none">
<p class="textFonts text-left ml-3">Trustly</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="trustlyToggle" class="col-3" display="none">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showTrustly"
data-toggle="toggle"
onchange="showTrustly()"
onchange="blockTrustly()"
checked
/>
<label
@@ -1255,7 +1278,7 @@
{{ countryCode|default("NL")|tojson }}
</script>
<script id="pay-methods" type="application/json">
{{ payMethodsFE|default("")|tojson}}
{{ payArray|default("")|tojson}}
</script>
<!-- local JS -->