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 #38 from b-leech/ana

Browse Source 
show payment methods with css
This commit is contained in:
anamotaadyen
2022-10-11 10:31:53 +01:00
committed by GitHub
parent 554252791b f4f6c22c13
commit 2f2baf8143
2 changed files with 291 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,6 +63,7 @@ const testCardBrandsMap = {
},
}
// 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
@@ -572,7 +573,7 @@ function restartDropin() {
initCheckout()
}
// Test cards JS
// Test cards JS - NOT IN USE
function copyToClipboard() {
// Get the text field
let copyPAN = document.getElementById("cardNumber").textContent
@@ -709,17 +710,14 @@ function fontWidth() {
updateStyleCode()
}
// Copy to clipboard function
// function copyToClipboard(e) {
// const cb = navigator.clipboard;
// cb.writeText(e.target.innerText)
// }
// this turns the test card around on copyCVC button click
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
function resetCard() {
updateCardCopy();
if (document.getElementById("card").classList.contains("card-visited")) {
@@ -727,6 +725,7 @@ function resetCard() {
}
}
// 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)
@@ -737,6 +736,7 @@ function updateCardCopy() {
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 =
@@ -803,7 +803,7 @@ function changeFont() {
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')
@@ -813,6 +813,8 @@ function blockPaypal() {
payMethods.push("paypal");
}
}
// 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(
@@ -825,6 +827,102 @@ function showPaypal() {
}
}
function showIdeal() {
const idealState = document.getElementById("showIdeal").checked
const idealBox = document.querySelector(
".adyen-checkout__payment-method--ideal"
)
if (idealState == true) {
idealBox.style.display = ""
} else {
idealBox.style.display = "none"
}
}
function showKlarna() {
const klarnaState = document.getElementById("showKlarna").checked
const klarnaBox = document.querySelector(
".adyen-checkout__payment-method--klarna"
)
if (klarnaState == true) {
klarnaBox.style.display = ""
} else {
klarnaBox.style.display = "none"
}
}
function showGooglePay() {
const googlepayState = document.getElementById("showGooglePay").checked
const googlepayBox = document.querySelector(
".adyen-checkout__payment-method--paywithgoogle"
)
if (googlepayState == true) {
googlepayBox.style.display = ""
} else {
googlepayBox.style.display = "none"
}
}
function showWeChat() {
const weChatState = document.getElementById("showWeChat").checked
const weChatBox = document.querySelector(
".adyen-checkout__payment-method--wechatpayQR"
)
if (weChatState == true) {
weChatBox.style.display = ""
} else {
weChatBox.style.display = "none"
}
}
function showAliPay() {
const alipayState = document.getElementById("showAliPay").checked
const alipayBox = document.querySelector(
".adyen-checkout__payment-method--alipay"
)
if (alipayState == true) {
alipayBox.style.display = ""
} else {
alipayBox.style.display = "none"
}
}
function showPaysafecard() {
const paysafecardState = document.getElementById("showPaysafecard").checked
const paysafecardBox = document.querySelector(
".adyen-checkout__payment-method--paysafecard"
)
if (paysafecardState == true) {
paysafecardBox.style.display = ""
} else {
paysafecardBox.style.display = "none"
}
}
function showClearpay() {
const clearpayState = document.getElementById("showClearpay").checked
const clearpayBox = document.querySelector(
".adyen-checkout__payment-method--clearpay"
)
if (clearpayState == true) {
clearpayBox.style.display = ""
} else {
clearpayBox.style.display = "none"
}
}
function showTrustly() {
const trustlyState = document.getElementById("showTrustly").checked
const trustlyBox = document.querySelector(
".adyen-checkout__payment-method--trustly"
)
if (trustlyState == true) {
trustlyBox.style.display = ""
} else {
trustlyBox.style.display = "none"
}
}
//JSON highlight code styling
function syntaxHighlight(json) {

185
app/templates/component.html
View File

@@ -358,6 +358,191 @@
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Ideal</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showIdeal"
data-toggle="toggle"
onchange="showIdeal()"
checked
/>
<label
class="custom-control-label"
for="showIdeal"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Klarna</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showKlarna"
data-toggle="toggle"
onchange="showKlarna()"
checked
/>
<label
class="custom-control-label"
for="showKlarna"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">AliPay</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showAliPay"
data-toggle="toggle"
onchange="showAliPay()"
checked
/>
<label
class="custom-control-label"
for="showAliPay"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">GooglePay</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showGooglePay"
data-toggle="toggle"
onchange="showGooglePay()"
checked
/>
<label
class="custom-control-label"
for="showGooglePay"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">WeChat</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showWeChat"
data-toggle="toggle"
onchange="showWeChat()"
checked
/>
<label
class="custom-control-label"
for="showWeChat"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Paysafecard</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showPaysafecard"
data-toggle="toggle"
onchange="showPaysafecard()"
checked
/>
<label
class="custom-control-label"
for="showPaysafecard"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Clearpay</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showClearpay"
data-toggle="toggle"
onchange="showClearpay()"
checked
/>
<label
class="custom-control-label"
for="showClearpay"
></label>
</div>
</div>
<div class="col-6">
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">Trustly</p>
</div>
<!-- toggle -->
<div class="col-3">
<div class="custom-control custom-switch text-center">
<input
type="checkbox"
class="custom-control-input"
id="showTrustly"
data-toggle="toggle"
onchange="showTrustly()"
checked
/>
<label
class="custom-control-label"
for="showTrustly"
></label>
</div>
</div>
</div>
<!-- line - section end -->
<hr class="mt-4 mb-4" />