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

working dynamic css

Browse Source
This commit is contained in:
anamotaadyen
2022-10-06 16:59:35 +01:00
parent da747a7183
commit 5d6a208a77
3 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/static/css/application.css
View File

@@ -623,5 +623,24 @@ a:hover {
-moz-transform: rotateY(0deg);
}
/* :root {
--back-rotate : rotateY(0deg);
--back-tran: rotateY(0deg);
--front-rotate: rotateY(180deg);
--front-tran: rotateY(180deg);
} */
:root {
--background-color: purple;
}
.test {
background: var(--background-color);
}
.adyen-checkout__button {
background: var(--background-color) !important;
}
/* Copy button */

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

@@ -72,12 +72,14 @@ function changeSelect(el) {
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()
}
}
@@ -108,6 +110,7 @@ document.getElementById('firstPayBox').parentNode.addEventListener('click', func
openFirst = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -116,6 +119,7 @@ document.getElementById('firstPayBox').parentNode.addEventListener('click', func
openFirst = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -130,6 +134,7 @@ document.getElementById('billAdd').parentNode.addEventListener('click', function
billAdd = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -138,6 +143,7 @@ document.getElementById('billAdd').parentNode.addEventListener('click', function
billAdd = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -153,6 +159,7 @@ document.getElementById('onlyStored').parentNode.addEventListener('click', funct
onlyStored = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -161,6 +168,7 @@ document.getElementById('onlyStored').parentNode.addEventListener('click', funct
onlyStored = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -175,6 +183,7 @@ document.getElementById('holderName').parentNode.addEventListener('click', funct
holderName = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -183,6 +192,7 @@ document.getElementById('holderName').parentNode.addEventListener('click', funct
holderName = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -198,6 +208,7 @@ document.getElementById('showPayMethod').parentNode.addEventListener('click', fu
showPayMethod = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -206,6 +217,7 @@ document.getElementById('showPayMethod').parentNode.addEventListener('click', fu
showPayMethod = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -220,6 +232,7 @@ document.getElementById('hideCVC').parentNode.addEventListener('click', function
hideCVC = true
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -228,6 +241,7 @@ document.getElementById('hideCVC').parentNode.addEventListener('click', function
hideCVC = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -253,6 +267,7 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
console.log (countrySettings)
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
else {
@@ -261,6 +276,7 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
placeholderData = false
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
})
@@ -476,17 +492,25 @@ function handleServerResponse(res, dropin) {
// Test cards JS
function copyToClipboard() {
// Get the text field
var copyPAN = document.getElementById("cardNumber");
let copyPAN = document.getElementById('cardNumber').textContent;
console.log(copyPAN)
// Select the text field
copyPAN.select();
copyPAN.setSelectionRange(0, 99999); // For mobile devices
// copyPAN.select();
// copyPAN.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
navigator.clipboard.write(copyPAN);
// Alert the copied text
alert("Copied the text: " + copyText.value);
alert("Copied the text: " + copyPAN);
}
let r = document.querySelector(':root');
function setDynamicCSS () {
r.style.setProperty('--background-color', 'green');
}
function resetDynamicCSS () {
r.style.setProperty('--background-color', null);
}
initCheckout();

9
app/templates/component.html
View File

@@ -43,7 +43,7 @@
<div id="payment-page" class="row">
<div class="checkout col">
<div id="dropin-container" class="payment">
<div id="dropin-container" class="payment p-5">
<!-- Component will be rendered here -->
</div>
</div>
@@ -92,8 +92,11 @@
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="placeholderData" data-toggle="toggle">
<label class="custom-control-label" for="placeholderData">Include placeholder data</label>
<label class="custom-control-label test" for="placeholderData">Include placeholder data</label>
</div>
<button type="button" onclick="setDynamicCSS()">change</button>
<input type="color" name="" id="" onchange="setDynamicCSS()">
<button type="button" onclick="resetDynamicCSS()">reset</button>
</div>
</div>
<div class="card">
@@ -121,7 +124,7 @@
</div>
</div>
</div>
<button type="button" class="btn btn-info btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard()">Copy</button>
<button type="button" class="btn btn-info btn-clipboard" toggle="tooltip" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard('cardNumber')" title="Copy to clipboard">Copy</button>
<!-- Adyen JS from TEST environment (change to live for production)-->
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.js"
integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"