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 #51 from adyen-examples/test

Browse Source 
updating latest commits for alpha-1.1.0
This commit is contained in:
anamotaadyen
2022-11-02 14:45:59 +00:00
committed by GitHub
parent 2c11a9265f e584e68d21
commit 8da9be9680
4 changed files with 247 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/main/payments.py
View File

@@ -140,6 +140,7 @@ def sanatizeRequest(payments_request):
del payments_request['houseNumberOrName']
del payments_request['postalCode']
del payments_request['street']
del payments_request['stateOrProvince']

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

@@ -367,9 +367,25 @@ a:hover {
margin-right: 24px;
}
/* resest button start */
.resetStyle {
color: #fff;
justify-content: center;
background: #00112c !important;
border-radius: 6px !important;
border: none;
width: 110px;
height: 30px;
}
.resetStyle:focus {
outline-color: #36bf52;
}
/* reset button end */
.country-selector {
align-items: center;
background: #e5eaef;
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
display: flex;
@@ -377,9 +393,10 @@ a:hover {
margin: 0;
outline: none;
padding: 0 0 0 12px;
position: relative;
position: absolute;
font-size: var(--small-text);
width: 10px;
bottom:0px;
}
@media (min-width: 768px) {
@@ -395,6 +412,7 @@ a:hover {
}
.country-selector__select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -425,7 +443,7 @@ a:hover {
/* font selector styling */
.font-selector {
align-items: center;
background: #e5eaef;
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
display: flex;
@@ -433,8 +451,9 @@ a:hover {
margin: auto 0 auto auto;
outline: none;
padding: 0 0 0 12px;
position: relative;
position: absolute;
width: 100%;
bottom: 0px;
}
@media (min-width: 768px) {
@@ -451,7 +470,7 @@ a:hover {
border: 0;
cursor: pointer;
flex: 1;
position: relative;
height: 100%;
margin: 0 -12px 0 -42px;
outline: none;
@@ -477,7 +496,7 @@ a:hover {
/* text align selector styling */
.text-alignment {
align-items: center;
background: #e5eaef;
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
display: flex;
@@ -485,10 +504,23 @@ a:hover {
margin: auto 0 auto auto;
outline: none;
padding: 0 0 0 12px;
position: relative;
position: absolute;
width: 100%;
bottom: 0px;
}
/* .left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
} */
@media (min-width: 768px) {
.text-alignment {
width: 200px;
@@ -496,6 +528,7 @@ a:hover {
}
.textalign-selector__select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -523,8 +556,8 @@ a:hover {
}
.italicImage img {
width: 20px;
height: 20px;
width: 15px;
height: 15px;
}
.italicImage .btn {
@@ -533,15 +566,19 @@ a:hover {
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 0.4cm 0.6cm;
border: none;
border: var(--italic-selected);
cursor: pointer;
border-radius: 0px;
border-radius: 50%;
width: 25px;
height:25px;
box-shadow: none;
top: 12.5px;
}
.boldImage img {
width: 20px;
height: 20px;
width: 15px;
height: 15px;
}
.boldImage .btn {
@@ -550,10 +587,13 @@ a:hover {
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 0.4cm 0.6cm;
border: none;
border: var(--bold-selected);
cursor: pointer;
border-radius: 0px;
border-radius: 50%;
width: 25px;
height:25px;
box-shadow: none;
top: 12.5px;
}
/* Test card selector*/
@@ -632,6 +672,7 @@ a:hover {
#payment-page .checkout {
margin-top: 100px;
background: var(--bg-color) !important;
margin-bottom: 100px;
}
#payment-page .settings {
@@ -662,6 +703,7 @@ a:hover {
height: 100vh;
}
/* Adyen Components */
.payment {
width: 100%;
@@ -931,16 +973,15 @@ a:hover {
:root {
--background-color: #00112c;
--font-options: "Segoe UI", sans-serif, Helvetica, Arial;
--background-color: #00112c;
--dropin-width: 500px;
--dropin-font: 17px;
--button-edges: 10px;
--body-edges: 0px;
--border-off: 1px solid #e6e9eb;
--active-background: #f7f8f9;
--bg-color: white;
--bg-color: #ffffff;
--dropin-color: #f7f8f9;
--dropin-tab-color: white;
--dropin-tab-color: #ffffff;
--main-green: #0abf53;
--main-grey: #f3f5f9;
--main-text: #00112c;
@@ -958,6 +999,7 @@ a:hover {
--topedges-right: 12px;
--bottomedges-left: 12px;
--bottomedges-right: 12px;
/* --text-color: #00112c; */
}
.card-visited .card__back {
@@ -1079,7 +1121,8 @@ a:hover {
border-radius: 20px;
height: 25px;
width: 25px;
border: 2px solid #36bf52;
border: 1px solid #36bf52;
background-color: #36bf52;
outline: none;
-webkit-appearance: none;
}

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

@@ -1,34 +1,40 @@
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")
// let country = "GB";
let countrySettings = "NL"
// Used to retrieve country value from url
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
*
*/
* @param {HTMLHtmlElement} r - Identifies root of document for css variables
* @param {boolean} openFirst - Status of "Open first payment method" toggle
* @param {boolean} billAdd - Status of "Add billing address" toggle
* @param {boolean} onlyStored - Status of "Add card holder name" toggle
* @param {boolean} holderName - Status of "Show only stored payment methods" toggle
* @param {boolean} showPayMethod - Status of "Show stored payment methods" toggle
* @param {boolean} hideCVC - Status of "Hide CVC field" toggle
* @param {boolean} placeholderData - Status of "Include placeholder data" toggle
* @param {Array} instantArray - Instant Payment Methods "Enable" toggle - populate array if active = true
* @param {Array} payMethods - Payment methods included in the array will be "blocked"
* @param {Array} payArray - Payment methods values to include in the blockedPaymentMethods array
* @param {string} countrySettings - Value of the currently selected shopper's country
*
*/
let r = document.querySelector(":root")
let openFirst = true
let billAdd = false
let onlyStored = true
let onlyStored = false
let holderName = false
let showPayMethod = true
let hideCVC = false
let placeholderData = false
let instantArray = []
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"
@@ -91,7 +97,7 @@ const countryVariables = [
/**
* 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
* @param {*} el
*/
async function changeSelect(el) {
// let countryPM = getConfiguration();
@@ -193,9 +199,9 @@ document
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
if (this.querySelector("input").checked) {
onlyStored = false
} else {
onlyStored = true
} else {
onlyStored = false
}
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
@@ -285,10 +291,6 @@ if (storedCountry) {
const selectedCountry = JSON.parse(storedCountry.innerHTML)
countrySettings = getCountryData(selectedCountry)
}
if (countryURL) {
const selectedCountry = countryURL
countrySettings = getCountryData(selectedCountry)
}
function getCountryData(countrySettings) {
return countryVariables.find(
@@ -416,6 +418,7 @@ async function initCheckout() {
resolve()
reject()
},
instantPaymentTypes: instantArray
})
.mount("#dropin-container")
return await checkout
@@ -425,6 +428,22 @@ async function initCheckout() {
}
}
function showInstantPay(){
const instantPayState = document.getElementById('instantPay').checked;
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
if (instantPayState == true) {
instantArray = ['paywithgoogle']
} else {
instantArray = []
}
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
}
async function unmountDropin() {
const checkout = await initCheckout()
checkout.unmount("#dropin-container")
@@ -771,6 +790,38 @@ function dropinColor() {
r.style.setProperty("--dropin-color", dropinColor)
updateStyleCode()
}
/**
* @function updateColorPickers - Gets current colour value to show on colour pickers
*/
function updateColorPickers() {
// font color
let fontColorInput = document.getElementById("textColorPick")
let fontColor = getComputedStyle(r).getPropertyValue("--text-color")
let fontColorNoSpace = fontColor.replace(/\s/g, '');
fontColorInput.value = fontColorNoSpace
// website background
let bgColorInput = document.getElementById("bgColorPick")
let bgColor = getComputedStyle(r).getPropertyValue("--bg-color")
let bgColorNoSpace = bgColor.replace(/\s/g, '');
bgColorInput.value = bgColorNoSpace
// active payment method background
let activeColorInput = document.getElementById("dropinColorPick")
let activeColor = getComputedStyle(r).getPropertyValue("--dropin-color")
let activeColorNoSpace = activeColor.replace(/\s/g, '');
activeColorInput.value = activeColorNoSpace
// collapsed payment methods
let tabColorInput = document.getElementById("dropinTabColorPick")
let tabColor = getComputedStyle(r).getPropertyValue("--dropin-tab-color")
let tabColorNoSpace = tabColor.replace(/\s/g, '');
tabColorInput.value = tabColorNoSpace
// pay button
let buttonColorInput = document.getElementById("buttonColorPick")
let buttonColor = getComputedStyle(r).getPropertyValue("--background-color")
let buttonColorNoSpace = buttonColor.replace(/\s/g, '');
buttonColorInput.value = buttonColorNoSpace
//
}
// console.log(tabColorNoSpace.constructor)
/** @function dropinTabColor - Changes collapsed payment methods' colours */
function dropinTabColor() {
let dropinTabColor = document.getElementById("dropinTabColorPick").value
@@ -855,14 +906,34 @@ function makeItalic() {
) {
document.getElementById("makeItalic").classList.remove("italic-active")
r.style.setProperty("--text-italic", null)
r.style.setProperty("--italic-selected", null)
updateStyleCode()
} else {
document.getElementById("makeItalic").classList.add("italic-active")
r.style.setProperty("--text-italic", "italic")
r.style.setProperty("--italic-selected", "1px solid #36bf52")
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)
r.style.setProperty("--bold-selected", null)
updateStyleCode()
} else {
document.getElementById("makeBold").classList.add("bold-active")
r.style.setProperty("--text-bold", "bold")
r.style.setProperty("--bold-selected", "1px solid #36bf52")
updateStyleCode()
}
}
//drop down selector for the different font styles
function changeFont() {
r.style.setProperty("--font-options", null)
@@ -874,7 +945,7 @@ function makeItalic() {
// Reset CSS values to default Drop-in
function resetDynamicCSS() {
r.style.setProperty("--background-color", null)
r.style.setProperty("--background-color", '#00112c')
r.style.setProperty("--dropin-width", null)
r.style.setProperty("--body-edges", null)
r.style.setProperty("--selectedBody-edges", null)
@@ -883,11 +954,11 @@ function resetDynamicCSS() {
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("--bg-color", '#ffffff')
r.style.setProperty("--dropin-color", '#f7f8f9')
r.style.setProperty("--dropin-tab-color", '#ffffff')
r.style.setProperty("--dropin-font", null)
r.style.setProperty("--text-color", null)
r.style.setProperty("--text-color", '#00112c')
r.style.setProperty("--text-bold", null)
r.style.setProperty("--text-italic", null)
r.style.setProperty("--text-align", null)
@@ -895,6 +966,9 @@ function resetDynamicCSS() {
r.style.setProperty("--payments-spacing", null)
r.style.setProperty("--paymentselected-margin", null)
r.style.setProperty("--font-options", null)
r.style.setProperty("--bold-selected", null)
r.style.setProperty("--italic-selected", null)
updateColorPickers()
}
// logging configuration object to UI
@@ -1023,4 +1097,6 @@ function restartDropin() {
successDiv.style.display = "none"
}
updateColorPickers()
initCheckout()

96
app/templates/component.html
View File

@@ -29,7 +29,7 @@
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Engagement&family=Lato:ital@1&family=Roboto+Condensed:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Engagement&family=PT+Sans+Caption&family=Roboto+Condensed:wght@300&display=swap');
</style>
<!-- local CSS -->
@@ -570,6 +570,45 @@
<!-- line - section end -->
<hr class="mt-4 mb-4" />
<!-- section titile "Instant Payment Methods" -->
<div class="row mt-3">
<div class="col flex-fill section-title">
<p class="mb-1 titleFonts">Instant Payment Methods</p>
</div>
<!-- text -->
<div class="col-6">
<p class="textFonts">
Show instant payment methods at the top
</p>
</div>
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">
Enable
</p>
</div>
<!-- toggle -->
<div class="col-3 text-center">
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="instantPay"
data-toggle="toggle"
onchange="showInstantPay()"
/>
<label
class="custom-control-label"
for="instantPay"
></label>
</div>
</div>
</div>
<!-- line - section end -->
<hr class="mt-4 mb-4" />
<!-- section titile "Payment Method Behaviour" -->
<div class="row mt-3">
<div class="col flex-fill section-title">
@@ -611,7 +650,7 @@
<!-- title -->
<div class="col-3">
<p class="textFonts text-left ml-3">
Hide stored payment methods
Show stored payment methods
</p>
</div>
<!-- toggle -->
@@ -784,10 +823,9 @@
autocomplete="off"
>
<option
value="Segoe UI, sans-serif, Helvetica, Arial"
value="Segoe UI, sans-serif"
style="
font-family: 'Segoe UI', sans-serif, Helvetica,
Arial;
font-family: 'Segoe UI', sans-serif;
"
>
Segoe UI
@@ -802,23 +840,43 @@
</option>
<option
value="Engagement, cursive"
style="font-family: 'Engagement', cursive"
style="font-family: 'Engagement', cursive;"
>
Engagement
</option>
<option
value="Lato, sans-serif"
style="font-family: 'Lato', sans-serif"
value="Verdana, sans-serif"
style="font-family: 'Verdana', sans-serif;"
>
Lato
Verdana
</option>
<option
value="Courier New, monospace"
style="font-family: 'Courier New', monospace;"
>
Courier New
</option>
<option
value="'Trebuchet MS, sans-serif"
style="font-family: 'Trebuchet MS', sans-serif;"
>
Trebuchet MS
</option>
<option
value="Times New Roman, Times, serif"
value="Tahoma, sans-serif"
style="
font-family: 'Times New Roman', Times, serif;
font-family: 'Tahoma', sans-serif;
"
>
Times New Roman
Tahoma
</option>
<option
value="PT Sans Caption, sans-serif"
style="
font-family: 'PT Sans Caption', sans-serif;
"
>
PT Sans Caption
</option>
<option
value="Arial, Helvetica, sans-serif"
@@ -829,10 +887,9 @@
Arial
</option>
<option
value="Lucida Console, 'Courier New', monospace"
value="Lucida Console, monospace"
style="
font-family: 'Lucida Console', 'Courier New',
monospace;
font-family: 'Lucida Console', monospace;
"
>
Lucida
@@ -890,14 +947,15 @@
<option
selected
value="left"
style="text-align: left"
>
Left
</option>
<option value="center" style="text-align: center">
<option value="center"
>
Center
</option>
<option value="right" style="text-align: right">
<option value="right"
>
Right
</option>
</select>
@@ -1216,7 +1274,7 @@
<hr class="mt-4 mb-4" />
<div>
<button type="button" onclick="resetDynamicCSS()">
<button type="button" class="resetStyle" onclick="resetDynamicCSS()">
Reset Style
</button>
</div>