mirror of
https://github.com/jlengrand/checkoutCreate.git
synced 2026-03-10 08:11:18 +00:00
Merge branch 'main' into ana
This commit is contained in:
anamotaadyen
@@ -15,6 +15,15 @@ body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: var(--main-green) !important;
|
||||
color: var(--main-grey) !important;
|
||||
}
|
||||
|
||||
a,
|
||||
u {
|
||||
text-decoration: none;
|
||||
@@ -47,6 +56,8 @@ a:hover {
|
||||
|
||||
.row {
|
||||
height: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dropIn-UI {
|
||||
@@ -553,6 +564,8 @@ a:hover {
|
||||
padding: 0 0 0 12px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -698,8 +711,10 @@ a:hover {
|
||||
height: 0%;
|
||||
background-color: rgb(6, 6, 46);
|
||||
color: var(--main-grey);
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.test-cards-display {
|
||||
@@ -733,6 +748,7 @@ a:hover {
|
||||
-moz-perspective: 600px;
|
||||
perspective: 600px;
|
||||
background: rgb(6, 6, 46);
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.card__part {
|
||||
@@ -925,13 +941,13 @@ a:hover {
|
||||
--text-italic: normal;
|
||||
--small-text: 12px;
|
||||
--payButton-width: 100%;
|
||||
--payments-spacing: 0px 0;
|
||||
--paymentselected-margin: 8px 0;
|
||||
--selectedBody-edges: 12px;
|
||||
--topedges-left: 12px;
|
||||
--topedges-right: 12px;
|
||||
--bottomedges-left: 12px;
|
||||
--bottomedges-right: 12px;
|
||||
--payments-spacing: 0px 0;
|
||||
--paymentselected-margin: 8px 0;
|
||||
--selectedBody-edges: 12px;
|
||||
--topedges-left: 12px;
|
||||
--topedges-right: 12px;
|
||||
--bottomedges-left: 12px;
|
||||
--bottomedges-right: 12px;
|
||||
}
|
||||
|
||||
.card-visited .card__back {
|
||||
@@ -960,40 +976,39 @@ a:hover {
|
||||
} */
|
||||
|
||||
.adyen-checkout__button.adyen-checkout__button--pay {
|
||||
width: var(--payButton-width) !important;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--background-color) !important;
|
||||
border-radius: var(--button-edges) !important;
|
||||
width: var(--payButton-width) !important;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--background-color) !important;
|
||||
border-radius: var(--button-edges) !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 250px;
|
||||
width: 9rem;
|
||||
/* Full-width */
|
||||
height: 35px;
|
||||
/* Specified height */
|
||||
}
|
||||
|
||||
.adyen-checkout__payment-method {
|
||||
width: var(--dropin-width) !important;
|
||||
font-size: var(--dropin-font) !important;
|
||||
font-family: var(--font-options) !important;
|
||||
text-align: var(--text-align) !important;
|
||||
border-radius: var(--body-edges) !important;
|
||||
border: var(--border-off) !important;
|
||||
background: var(--dropin-tab-color) !important;
|
||||
font-weight: var(--text-bold) !important;
|
||||
margin: var(--payments-spacing) !important;
|
||||
width: var(--dropin-width) !important;
|
||||
font-size: var(--dropin-font) !important;
|
||||
font-family: var(--font-options) !important;
|
||||
text-align: var(--text-align) !important;
|
||||
border-radius: var(--body-edges) !important;
|
||||
border: var(--border-off) !important;
|
||||
background: var(--dropin-tab-color) !important;
|
||||
font-weight: var(--text-bold) !important;
|
||||
margin: var(--payments-spacing) !important;
|
||||
}
|
||||
|
||||
.adyen-checkout__payment-methods-list li:nth-child(2){
|
||||
border-top-left-radius: var(--topedges-left) !important;
|
||||
border-top-right-radius: var(--topedges-right) !important;
|
||||
.adyen-checkout__payment-methods-list li:nth-child(2) {
|
||||
border-top-left-radius: var(--topedges-left) !important;
|
||||
border-top-right-radius: var(--topedges-right) !important;
|
||||
}
|
||||
|
||||
|
||||
.adyen-checkout__payment-methods-list li:last-child {
|
||||
border-bottom-left-radius: var(--bottomedges-left) !important;
|
||||
border-bottom-right-radius: var(--bottomedges-right) !important;
|
||||
@@ -1004,28 +1019,15 @@ a:hover {
|
||||
}
|
||||
|
||||
.adyen-checkout__payment-method--selected {
|
||||
background: var(--dropin-color) !important;
|
||||
margin: var(--paymentselected-margin) !important;
|
||||
border-radius: var(--selectedBody-edges) !important;
|
||||
|
||||
background: var(--dropin-color) !important;
|
||||
margin: var(--paymentselected-margin) !important;
|
||||
border-radius: var(--selectedBody-edges) !important;
|
||||
}
|
||||
|
||||
.adyen-checkout__payment-method__radio {
|
||||
/* Radio button in payment method header */
|
||||
}
|
||||
|
||||
.checkout .col {
|
||||
background: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.adyen-checkout__payment-method__name {
|
||||
font-weight: var(--text-bold) !important;
|
||||
font-style: var(--text-italic) !important;
|
||||
@@ -1117,7 +1119,7 @@ a:hover {
|
||||
|
||||
.form-control-file,
|
||||
.form-control-range {
|
||||
width: 50%;
|
||||
/* width: 50%; */
|
||||
}
|
||||
/*
|
||||
:not(pre)>code[class*=language-], pre[class*=language-] {
|
||||
@@ -1125,18 +1127,60 @@ a:hover {
|
||||
} */
|
||||
|
||||
pre {
|
||||
outline: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
background: #00112c;
|
||||
color: #078F3E;
|
||||
outline: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
background: #00112c;
|
||||
color: #078f3e;
|
||||
}
|
||||
.string {
|
||||
color: white;
|
||||
.string {
|
||||
color: white;
|
||||
}
|
||||
.number {
|
||||
color: #0abf53;
|
||||
}
|
||||
.boolean {
|
||||
color: #0088ff;
|
||||
}
|
||||
.null {
|
||||
color: magenta;
|
||||
}
|
||||
.key {
|
||||
color: #a5afbd;
|
||||
}
|
||||
.number { color: #0abf53; }
|
||||
.boolean { color: #0088FF; }
|
||||
.null { color: magenta; }
|
||||
.key { color: #A5AFBD; }
|
||||
|
||||
.form-control-range::before {
|
||||
background-color: red;
|
||||
color: red;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.panel-collapse .collapse .show {
|
||||
width: 5000px !important;
|
||||
}
|
||||
|
||||
.copyBtnsStyle {
|
||||
font-family: var(--main-font);
|
||||
background: var(--main-text);
|
||||
border-radius: 10px;
|
||||
color: var(--main-grey);
|
||||
font-size: 0.9rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.copyText {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
/* screen width (or the .grid) needs to be at least 500px wide, in order to display the .sidebar, because min-width of 200px is exactly 40% of 500px, so display it when 500px and more, but hide it when less */
|
||||
.config-UI {
|
||||
display: none;
|
||||
}
|
||||
.dropIn-UI {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,6 +15,8 @@
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
|
||||
/>
|
||||
|
||||
<!-- hello -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
@@ -45,8 +47,10 @@
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"
|
||||
/>
|
||||
|
||||
<title>Checkout Create</title>
|
||||
</head>
|
||||
@@ -76,18 +80,31 @@
|
||||
<!-- Hidden status page to show on completion -->
|
||||
<div class="status-container successDiv" id="successDiv">
|
||||
<div class="status">
|
||||
<img src="{{ url_for('static', filename='img/success.svg') }}" class="status-image"/>
|
||||
<img src="{{ url_for('static', filename='img/thank-you.svg') }}" class="status-image-thank-you"/>
|
||||
<p class="status-message">Your order has been successfully placed.</p>
|
||||
<a class="button" onclick="restartDropin()">Return Home</a>
|
||||
<img
|
||||
src="{{ url_for('static', filename='img/success.svg') }}"
|
||||
class="status-image"
|
||||
/>
|
||||
<img
|
||||
src="{{ url_for('static', filename='img/thank-you.svg') }}"
|
||||
class="status-image-thank-you"
|
||||
/>
|
||||
<p class="status-message">
|
||||
Your order has been successfully placed.
|
||||
</p>
|
||||
<a class="button" onclick="restartDropin()">Return Home</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container errorDiv">
|
||||
<div class="status">
|
||||
<p class="status-message">Error!</p>
|
||||
<p class="status-message">Review response in console and refer to <a
|
||||
href="https://docs.adyen.com/development-resources/response-handling">Response handling.</a></p>
|
||||
<a class="button" onclick="restartDropin()">Return Home</a>
|
||||
<p class="status-message">Error!</p>
|
||||
<p class="status-message">
|
||||
Review response in console and refer to
|
||||
<a
|
||||
href="https://docs.adyen.com/development-resources/response-handling"
|
||||
>Response handling.</a
|
||||
>
|
||||
</p>
|
||||
<a class="button" onclick="restartDropin()">Return Home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,7 +144,7 @@
|
||||
</div>
|
||||
<!-- Panel footer start -->
|
||||
<div class="panel-footer">
|
||||
<!-- <div id="card" class="card">
|
||||
<div id="card" class="card p-0 text-center">
|
||||
<div class="card__front card__part">
|
||||
<img
|
||||
class="card__front-square card__square"
|
||||
@@ -161,37 +178,28 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Under card footer -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- load card -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- copy pan -->
|
||||
<div class="col"></div>
|
||||
<p
|
||||
type="button"
|
||||
id="btn"
|
||||
class="btn"
|
||||
toggle="tooltip"
|
||||
data-clipboard-action="copy"
|
||||
data-placement="top"
|
||||
data-clipboard-target="p#cardNumber"
|
||||
onclick="resetCard()"
|
||||
title="Copy to clipboard"
|
||||
<div>
|
||||
<div class="row m-0">
|
||||
<div
|
||||
class="col copyBtnsStyle panCopy mr-1"
|
||||
onclick="copyToClipboard"
|
||||
>
|
||||
copy
|
||||
</p>
|
||||
<!-- copy expiry -->
|
||||
<div class="col">
|
||||
<p>two</p>
|
||||
<p class="copyText">
|
||||
PAN <i class="bi bi-clipboard"></i>
|
||||
</p>
|
||||
</div>
|
||||
<!-- copy cvc -->
|
||||
<div class="col">
|
||||
<p>three</p>
|
||||
<div class="col copyBtnsStyle expiryCopy ml-1 mr-1">
|
||||
<p class="copyText">
|
||||
EXPIRY <i class="bi bi-clipboard"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col copyBtnsStyle cvcCopy ml-1">
|
||||
<p class="copyText">
|
||||
CVC <i class="bi bi-clipboard"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -276,47 +284,42 @@
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Location</p>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- section description -->
|
||||
<div class="col-6 mb-2">
|
||||
<p class="textFonts">
|
||||
Choose your shopper location and language
|
||||
</p>
|
||||
</div>
|
||||
<!-- title -->
|
||||
<div class="col-3 mb-2">
|
||||
<p class="textFonts text-left ml-3">Shopper Location</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 mb-2">
|
||||
<div class="country-selector textFonts">
|
||||
<div
|
||||
class="country-selector__flag"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
id="flag_img"
|
||||
src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
|
||||
alt="Flag icon"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
onchange="changeSelect(this)"
|
||||
id="country_select"
|
||||
class="country-selector__select"
|
||||
aria-label="country"
|
||||
autocomplete="off"
|
||||
>
|
||||
<option value="NL">Netherlands</option>
|
||||
<option value="GB">United Kingdom</option>
|
||||
<option value="US">United States</option>
|
||||
</select>
|
||||
<div class="dropdown-icon" aria-hidden="true">
|
||||
<img
|
||||
src="{{ url_for('static', filename='img/dropdown.svg') }}"
|
||||
alt="Dropdown caret"
|
||||
/>
|
||||
</div>
|
||||
<!-- section description -->
|
||||
<div class="col-6 mb-2">
|
||||
<p class="textFonts">
|
||||
Choose your shopper location and language
|
||||
</p>
|
||||
</div>
|
||||
<!-- title -->
|
||||
<div class="col-3 mb-2">
|
||||
<p class="textFonts text-left ml-3">Shopper Location</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 mb-2">
|
||||
<div class="country-selector textFonts">
|
||||
<div class="country-selector__flag" aria-hidden="true">
|
||||
<img
|
||||
id="flag_img"
|
||||
src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
|
||||
alt="Flag icon"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
onchange="changeSelect(this)"
|
||||
id="country_select"
|
||||
class="country-selector__select"
|
||||
aria-label="country"
|
||||
autocomplete="off"
|
||||
>
|
||||
<option value="NL">Netherlands</option>
|
||||
<option value="GB">United Kingdom</option>
|
||||
<option value="US">United States</option>
|
||||
</select>
|
||||
<div class="dropdown-icon" aria-hidden="true">
|
||||
<img
|
||||
src="{{ url_for('static', filename='img/dropdown.svg') }}"
|
||||
alt="Dropdown caret"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -324,17 +327,16 @@
|
||||
<!-- line - section end -->
|
||||
<hr class="mt-4 mb-4" />
|
||||
|
||||
|
||||
<!-- section for hiding/showing payment methods -->
|
||||
<div class="row mt-3">
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Payment Methods</p>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- section for hiding/showing payment methods -->
|
||||
<div class="row mt-3">
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Payment Methods</p>
|
||||
</div>
|
||||
<!-- section description -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
Choose which payment methods you would like to see at checkout
|
||||
Choose which payment methods you would like to see at
|
||||
checkout
|
||||
</p>
|
||||
</div>
|
||||
<!-- title -->
|
||||
@@ -343,211 +345,204 @@
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="showPaypal" data-toggle="toggle" onchange="showPaypal()" checked>
|
||||
<label class="custom-control-label" for="showPaypal"></label>
|
||||
<div class="custom-control custom-switch text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="showPaypal"
|
||||
data-toggle="toggle"
|
||||
onchange="showPaypal()"
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="showPaypal"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- line - section end -->
|
||||
<hr class="mt-4 mb-4" />
|
||||
<!-- 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">
|
||||
<p class="mb-1 titleFonts">Payment Method Behaviour</p>
|
||||
</div>
|
||||
|
||||
<!-- section titile "Payment Method Behaviour" -->
|
||||
<div class="row mt-3">
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Payment Method Behaviour</p>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
Select how you'd like your payment methods to behave at checkout
|
||||
Select how you'd like your payment methods to behave at
|
||||
checkout
|
||||
</p>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
Select how you'd like your payment methods to behave
|
||||
at checkout
|
||||
</p>
|
||||
</div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Open first payment method
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="firstPayBox"
|
||||
data-toggle="toggle"
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="firstPayBox"
|
||||
></label>
|
||||
</div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Open first payment method
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="firstPayBox"
|
||||
data-toggle="toggle"
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="firstPayBox"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Hide stored payment methods
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="onlyStored"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="onlyStored"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Hide stored payment methods
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="onlyStored"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="onlyStored"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Add billing address
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="billAdd"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="billAdd"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Add billing address
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="billAdd"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="billAdd"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Include card holder name
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="holderName"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="holderName"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Include card holder name
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="holderName"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="holderName"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Show only saved Payment Methods
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="showPayMethod"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="showPayMethod"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Show only saved Payment Methods
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="showPayMethod"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="showPayMethod"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">Hide CVC field</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="hideCVC"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="hideCVC"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">Hide CVC field</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<div class="custom-control custom-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="custom-control-input"
|
||||
id="hideCVC"
|
||||
data-toggle="toggle"
|
||||
/>
|
||||
<label
|
||||
class="custom-control-label"
|
||||
for="hideCVC"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Include placeholder data
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<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"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">
|
||||
Include placeholder data
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-center">
|
||||
<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"
|
||||
></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Theme & Styles content - 2nd tab -->
|
||||
<div
|
||||
@@ -561,7 +556,7 @@
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Fonts</p>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
@@ -646,7 +641,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -670,7 +665,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -709,7 +704,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -728,7 +723,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -748,7 +743,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -777,7 +772,7 @@
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Colour & Style</p>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
@@ -802,7 +797,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -823,7 +818,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -844,7 +839,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -861,7 +856,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -885,7 +880,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -909,7 +904,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -939,7 +934,7 @@
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Dimensions</p>
|
||||
</div>
|
||||
<div class="row container mb-2">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6">
|
||||
<p class="textFonts">
|
||||
@@ -965,9 +960,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row container">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
@@ -977,36 +971,41 @@
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-right">
|
||||
<div class="form-group">
|
||||
<input type="range" class="form-control-range" id="payButtonWidth" min="265" max="665" value="100%" onchange="payButtonWidth(this.value)">
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
class="form-control-range"
|
||||
id="payButtonWidth"
|
||||
min="265"
|
||||
max="665"
|
||||
value="100%"
|
||||
onchange="payButtonWidth(this.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row container">
|
||||
<div class="row container mb-2 p-0">
|
||||
<!-- text -->
|
||||
<div class="col-6"></div>
|
||||
<!-- title -->
|
||||
<div class="col-3">
|
||||
<p class="textFonts text-left ml-3">Payment methods spacing</p>
|
||||
<p class="textFonts text-left ml-3">
|
||||
Payment methods spacing
|
||||
</p>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-right">
|
||||
<div class="form-group">
|
||||
<input type="range" class="form-control-range" id="paymentsSpacing" min="0" max="50" value="0" onchange="paymentsSpacing(this.value)">
|
||||
<input
|
||||
type="range"
|
||||
class="form-control-range"
|
||||
id="paymentsSpacing"
|
||||
min="0"
|
||||
max="50"
|
||||
value="0"
|
||||
onchange="paymentsSpacing(this.value)"
|
||||
/>
|
||||
</div>
|
||||
<!-- toggle -->
|
||||
<div class="col-3 text-left">
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="range"
|
||||
class="form-control-range"
|
||||
id="changeWidth"
|
||||
min="300"
|
||||
max="700"
|
||||
value="500"
|
||||
onchange="dropinWidth(this.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4 mb-4" />
|
||||
@@ -1025,6 +1024,7 @@
|
||||
role="tabpanel"
|
||||
aria-labelledby="save-tab"
|
||||
>
|
||||
<<<<<<< Updated upstream
|
||||
<div class="row mt-3">
|
||||
<div class="col flex-fill section-title">
|
||||
<p class="mb-1 titleFonts">Adyen Configuration</p>
|
||||
@@ -1032,7 +1032,9 @@
|
||||
<div class="row container">
|
||||
<!-- section description -->
|
||||
<div class="col-12 mb-2">
|
||||
<pre id="configCode"><code id="configCode" class="configCode"></code></pre>
|
||||
<pre
|
||||
id="configCode"
|
||||
><code id="configCode" class="configCode"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1043,10 +1045,20 @@
|
||||
<div class="row container">
|
||||
<!-- section description -->
|
||||
<div class="col-12 mb-2">
|
||||
<pre id="cssCode"><code class="css-code" id="cssCode" ></code></pre>
|
||||
<pre
|
||||
id="cssCode"
|
||||
><code class="css-code" id="cssCode" ></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
=======
|
||||
<pre
|
||||
id="configCode"
|
||||
><code id="configCode" class="configCode"></code></pre>
|
||||
<pre
|
||||
id="cssCode"
|
||||
><code class="css-code" id="cssCode" ></code></pre>
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user