Skip to content

Commit

Permalink
Merge pull request #70 from adyen-examples/test
Browse files Browse the repository at this point in the history 
making payment methods toggles dynamic
  • Loading branch information
@anamotaadyen
anamotaadyen authored Nov 15, 2022
2 parents 4e29c88 + fadc4d8 commit 402eb31
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 58 deletions.
156 changes: 124 additions & 32 deletions app/static/js/adyen-implementation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,6 @@ let payMethods =[];
let payArray = Object.values(payMethods);
let countrySettings = "NL"

/**
* 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")
Expand All @@ -60,6 +49,7 @@ const flagUrlMap = {
src: "https://ca-test.adyen.com/ca/adl/img/flags/us.svg"
}
}

/**
* Country specific variables
*/
Expand Down Expand Up @@ -94,37 +84,137 @@ const countryVariables = [
},
]

/**
* @param {Array} PMnames - maps txvariant to display name of Payment Method
*/
const PMnames = [
{tx: "paypal", txname: "Paypal"},
{tx: "ideal", txname: "Ideal"},
{tx: "klarna", txname: "Klarna"},
{tx: "alipay", txname: "AliPay"},
{tx: "paywithgoogle", txname: "GooglePay"},
{tx: "wechatpayQR", txname: "WeChat"},
{tx: "paysafecard", txname: "Paysafecard"},
{tx: "clearpay", txname: "Clearpay"},
{tx: "trustly", txname: "Trustly"},
]

async function onLoad() {
getToggles();
}

function setAttributes(el, options) {
Object.keys(options).forEach(function(attr) {
el.setAttribute(attr, options[attr]);
})
}

/**
* @function createToggles - creates toggles to enable/disable payment methods according to /paymentMethods response
* @param {string} tx - txvariant
* @param {string} PMname - Payment Method name
*/
async function createToggles(tx, PMname){
// create first column div and set attributes
let column = document.createElement("div")
setAttributes(column,{
"id": `${tx}Col`,
"class": "col-6"
})
// create second column div and set attributes
let boxPM = document.createElement("div")
setAttributes(boxPM, {
"id": `${tx}Box`,
"class": "col-3"
})
// print Payment Method title
let titlePM = document.createElement("p")
titlePM.setAttribute("class", "textFonts text-left ml-3")
let textPM = document.createTextNode(PMname[0].txname)
// put text inside <p>
titlePM.appendChild(textPM);
// put <p> inside <div>
boxPM.appendChild(titlePM)
// create toggle div and set attributes
let toggleDiv = document.createElement("div")
setAttributes(toggleDiv, {
"id": `${tx}Toggle`,
"class": "col-3"
})
// create switch
let toggleSwitch = document.createElement("div")
toggleSwitch.setAttribute("class", "custom-control custom-switch text-center")
// create toggle input
let toggleInput = document.createElement("input")
setAttributes(toggleInput, {
"class": "custom-control-input",
"type": "checkbox",
"data-toggle": "toggle",
"id": `show${PMname[0].txname}`,
"onchange": `block${PMname[0].txname}()`,
"checked": true
})
// create label
let toggleLabel = document.createElement("label")
setAttributes(toggleLabel, {
"class": "custom-control-label",
"for": `show${PMname[0].txname}`
})
// put switch <div> inside the toggle <div>
toggleDiv.appendChild(toggleSwitch)
// put <input> and <label> inside <div>
toggleSwitch.appendChild(toggleInput)
toggleSwitch.appendChild(toggleLabel)
// put all created divs inside parent div
parentPM.appendChild(column)
parentPM.appendChild(boxPM)
parentPM.appendChild(toggleDiv)
}

/**
* @function getToggles - updates toggles for enable/disable payment methods
* @param {HTMLHtmlElement} parentPM - parent div for payment methods section
* @param {Array} children - all children under parentPM
* @param {Array} ids - IDs of children
*/
async function getToggles(){
const parentPM = document.getElementById('parentPM')
const children = Array.from(parentPM.children)
// get IDs of children divs
const ids = children.map(element => {
return element.id
})
// loop through div IDs for toggles existing on the page and remove all but Card
const filteredIds = ids.filter((s) => !s.match("schemeTitle") && !s.match("schemeCol") && !s.match("schemeBox") && !s.match("schemeToggle"))
filteredIds.forEach(function (item) {
let divId = document.getElementById(item);
divId.remove();
});
// call /paymentMethods with no filter to get txvariants for that country
let txvariants = await getCountryPM()
// loop through each value of response array - but do not count scheme/cards
txvariants.filter(function(tx) {
return tx != 'scheme';
}).forEach( tx =>{
let PMname = PMnames.filter(obj =>{
return obj.tx === tx
})
createToggles(tx, PMname);
})
}

/**
* 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(el)
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"
}
getToggles();
if (
document.getElementById("dropin-container") &&
document.getElementById("placeholderData").checked == true
Expand Down Expand Up @@ -1102,3 +1192,5 @@ function restartDropin() {
updateColorPickers()

initCheckout()

onLoad()
52 changes: 26 additions & 26 deletions app/templates/component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,23 +326,23 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
<hr class="mt-4 mb-4" />

<!-- section for hiding/showing payment methods -->
<div class="row mt-3">
<div class="col flex-fill section-title">
<div id="parentPM" class="row mt-3">
<div id="schemeTitle" class="col flex-fill section-title">
<p class="mb-1 titleFonts">Payment Methods</p>
</div>
<!-- section description -->
<div class="col-6">
<div id="schemeCol" class="col-6">
<p class="textFonts">
Choose which payment methods you would like to see at
checkout
</p>
</div>
<!-- title -->
<div class="col-3">
<div id="schemeBox" class="col-3">
<p class="textFonts text-left ml-3">Card</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="schemeToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -358,14 +358,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="paypalCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="paypalBox" class="col-3">
<p class="textFonts text-left ml-3">Paypal</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="paypalToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -381,14 +381,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="idealCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="idealBox" class="col-3">
<p class="textFonts text-left ml-3">Ideal</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="idealToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -404,14 +404,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="klarnaCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="klarnaBox" class="col-3">
<p class="textFonts text-left ml-3">Klarna</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="klarnaToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -427,14 +427,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="alipayCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="alipayBox" class="col-3">
<p class="textFonts text-left ml-3">AliPay</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="alipayToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -450,14 +450,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="paywithgoogleCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="paywithgoogleBox" class="col-3">
<p class="textFonts text-left ml-3">GooglePay</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="paywithgoogleToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -473,14 +473,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="wechatpayQRCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="wechatpayQRBox" class="col-3">
<p class="textFonts text-left ml-3">WeChat</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="wechatpayQRToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand All @@ -496,14 +496,14 @@ <h4 class="config-Title">Design Your Own Checkout</h4>
></label>
</div>
</div>
<div class="col-6">
<div id="paysafecardCol" class="col-6">
</div>
<!-- title -->
<div class="col-3">
<div id="paysafecardBox" class="col-3">
<p class="textFonts text-left ml-3">Paysafecard</p>
</div>
<!-- toggle -->
<div class="col-3">
<div id="paysafecardToggle" class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
Expand Down

0 comments on commit 402eb31

Please sign in to comment.