diff --git a/pass/public/styles/key/checkout-amount.less b/pass/public/styles/key/checkout-amount.less
index 990b70b1e1fdd49d4e423167f9e61c951300bebf..dba390576aa79a295717f3a83cabffae9f940c7c 100644
--- a/pass/public/styles/key/checkout-amount.less
+++ b/pass/public/styles/key/checkout-amount.less
@@ -19,17 +19,14 @@
text-decoration: none;
color: inherit;
display: grid;
- width: max-content;
grid-template-columns: 7em 3.5em;
grid-template-rows: 2.5em 2em;
- height: max-content;
+ place-items: stretch;
> .checkout-amount {
font-size: 2rem;
font-weight: bold;
line-height: 1;
display: flex;
- width: 100%;
- height: 100%;
align-items: center;
justify-content: center;
border-top-left-radius: 10px;
@@ -38,8 +35,6 @@
border-right: 0;
}
> .checkout-duration {
- width: 100%;
- height: 100%;
border-bottom-left-radius: 10px;
display: flex;
align-items: center;
@@ -60,9 +55,6 @@
border: 1px solid rgb(255, 127, 0);
border-left: 0;
display: flex;
- width: 100%;
- height: 100%;
- align-self: center;
}
}
@media (max-width: @checkout-amount-breakpoint-1) {
diff --git a/pass/public/styles/key/checkout-payment.less b/pass/public/styles/key/checkout-payment.less
index 849baa12fada402335b49f30af7e86736335168b..c2b38ba96180ff554842289765fa15b6db2b6df9 100644
--- a/pass/public/styles/key/checkout-payment.less
+++ b/pass/public/styles/key/checkout-payment.less
@@ -1,7 +1,7 @@
#payment {
margin-bottom: 1rem;
- @payment-group-breakpoint-1: 1050px;
- @payment-group-breakpoint-2: 580px;
+ @payment-group-breakpoint-1: 930px;
+ @payment-group-breakpoint-2: 470px;
> h2 {
margin: 0 0 1rem;
text-align: center;
@@ -30,6 +30,7 @@
border: 1px solid #777;
padding: 1rem;
border-top: 0;
+ place-items: stretch;
> div {
width: 14em;
}
@@ -38,9 +39,10 @@
}
@media (max-width: @payment-group-breakpoint-2) {
grid-template-columns: 1fr;
- > div {
- width: 100%;
- }
+ }
+
+ > div {
+ min-width: 10em;
}
&#paypal-payments {
@@ -48,7 +50,6 @@
display: flex;
border: 1px solid #777;
padding: 1rem;
- width: 10em;
align-items: center;
justify-content: center;
height: 2em;
@@ -71,4 +72,37 @@
text-align: center;
border-bottom: 1px solid @color-main;
}
+ #paypal-payment-card #paypal-card-form {
+ @paypal-card-form-breakpoint-1: 460px;
+ display: grid;
+ grid-template-columns: 1fr 5em 9em;
+ place-items: stretch;
+ gap: 0.5rem;
+ > div {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ > label {
+ font-weight: bold;
+ font-size: 0.8rem;
+ white-space: nowrap;
+ }
+ > div {
+ height: 2em;
+ border: 1px solid #777;
+ border-radius: 5px;
+ }
+ }
+ > button#submit-credit-card {
+ grid-column: span 3;
+ padding: 0.5rem;
+ justify-self: center;
+ }
+ @media (max-width: @paypal-card-form-breakpoint-1) {
+ grid-template-columns: 1fr;
+ > button#submit-credit-card {
+ grid-column: auto;
+ }
+ }
+ }
}
diff --git a/pass/public/styles/key/key.css b/pass/public/styles/key/key.css
index 0d881d3510157e5410ceaf3a020b9ad4862813c1..80b5ee265d461e7630cfcf8317521a0d35fcd0d1 100644
--- a/pass/public/styles/key/key.css
+++ b/pass/public/styles/key/key.css
@@ -1 +1 @@
-#checkout>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#checkout #checkout-amount{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;justify-items:center;align-items:center}#checkout #checkout-amount.single{grid-template-columns:1fr}#checkout #checkout-amount>a{text-decoration:none;color:inherit;display:grid;width:max-content;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;height:max-content}#checkout #checkout-amount>a>.checkout-amount{font-size:2rem;font-weight:bold;line-height:1;display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-top-left-radius:10px;border:1px solid #ff7f00;border-bottom:0;border-right:0}#checkout #checkout-amount>a>.checkout-duration{width:100%;height:100%;border-bottom-left-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid #ff7f00;border-top:0;border-right:0}#checkout #checkout-amount>a>.checkout-cost{grid-row:span 2;justify-content:center;background-color:#ff7f00;color:white;font-size:1.7rem;align-items:center;border-top-right-radius:10px;border-bottom-right-radius:10px;border:1px solid #ff7f00;border-left:0;display:flex;width:100%;height:100%;align-self:center}@media (max-width:800px){#checkout #checkout-amount{grid-template-columns:1fr 1fr}#checkout #checkout-amount.single{grid-template-columns:1fr}}@media (max-width:470px){#checkout #checkout-amount{grid-template-columns:1fr}#checkout #checkout-amount>a{width:100%;grid-template-columns:1fr 3em}}#payment{margin-bottom:1rem}#payment>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#payment>label[for="payment-group-paypal"]{border:1px solid #777;display:block;padding:.5rem;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#f0f0f0;border-bottom-color:#ff7f00;border-bottom-width:2px}#payment>#payment-group-paypal{display:none}#payment>.payment-group{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;justify-items:center;gap:1rem;border:1px solid #777;padding:1rem;border-top:0}#payment>.payment-group>div{width:14em}@media (max-width:1050px){#payment>.payment-group{grid-template-columns:1fr 1fr}}@media (max-width:580px){#payment>.payment-group{grid-template-columns:1fr}#payment>.payment-group>div{width:100%}}#payment>.payment-group#paypal-payments>.funding_source{display:flex;border:1px solid #777;padding:1rem;width:10em;align-items:center;justify-content:center;height:2em;border-radius:5px;gap:.5rem;color:inherit;text-decoration:none}#payment>.payment-group#paypal-payments>.funding_source img{max-width:100%;max-height:100%}#paypal-checkout>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}main{max-width:980px;margin:0 auto;display:grid;row-gap:1rem;padding-right:1rem;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"qr key " "qr setting-url" "qr buttons" "amount charge"}main>#qr{grid-area:qr;justify-self:center}main #key{grid-area:key;font-size:clamp(.9rem, 4.8vw, 1.5rem);font-weight:bold;width:max-content;margin-top:11px;margin-right:1rem}main #setting-url{grid-area:setting-url;align-self:start;display:flex;padding:.5rem 1rem;border-radius:5px}main #setting-url>input{line-height:1.5;padding:.1rem .5rem;border-radius:5px;flex-grow:1}main>#buttons{grid-area:buttons;display:flex;gap:1rem;margin-bottom:17px;justify-content:flex-end}@media (max-width:435px){main>#buttons{display:grid;grid-template-columns:1fr}main>#buttons .button{width:auto}main>#buttons>*{display:grid;justify-items:center;text-align:center}}main>#amount{grid-area:amount;max-width:200px;justify-self:center;display:flex;flex-direction:column;align-items:center}main>#amount>h3{font-size:1.5rem;margin:0}main>#amount>div.amount{font-size:3rem}main>#charge{grid-area:charge}main>#charge>#store>p{line-height:1.5}@media (max-width:770px){main{padding:0 1rem;grid-template-rows:auto auto auto auto auto;grid-template-columns:auto auto;grid-template-areas:"amount qr " "key key" "setting-url setting-url" "buttons buttons " "charge charge "}main>#key{margin:0;justify-self:center}main>#setting-url{text-align:center}main>#buttons{justify-content:center;margin-bottom:0}main>#amount{align-self:center}main>#charge>#store{display:flex;flex-direction:column;align-items:center}}@media (max-width:430px){main{grid-template-rows:auto auto auto auto auto auto;grid-template-columns:auto;grid-template-areas:"qr" "key" "setting-url" "buttons" "amount" "charge"}}
\ No newline at end of file
+#checkout>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#checkout #checkout-amount{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;justify-items:center;align-items:center}#checkout #checkout-amount.single{grid-template-columns:1fr}#checkout #checkout-amount>a{text-decoration:none;color:inherit;display:grid;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;place-items:stretch}#checkout #checkout-amount>a>.checkout-amount{font-size:2rem;font-weight:bold;line-height:1;display:flex;align-items:center;justify-content:center;border-top-left-radius:10px;border:1px solid #ff7f00;border-bottom:0;border-right:0}#checkout #checkout-amount>a>.checkout-duration{border-bottom-left-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid #ff7f00;border-top:0;border-right:0}#checkout #checkout-amount>a>.checkout-cost{grid-row:span 2;justify-content:center;background-color:#ff7f00;color:white;font-size:1.7rem;align-items:center;border-top-right-radius:10px;border-bottom-right-radius:10px;border:1px solid #ff7f00;border-left:0;display:flex}@media (max-width:800px){#checkout #checkout-amount{grid-template-columns:1fr 1fr}#checkout #checkout-amount.single{grid-template-columns:1fr}}@media (max-width:470px){#checkout #checkout-amount{grid-template-columns:1fr}#checkout #checkout-amount>a{width:100%;grid-template-columns:1fr 3em}}#payment{margin-bottom:1rem}#payment>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#payment>label[for="payment-group-paypal"]{border:1px solid #777;display:block;padding:.5rem;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#f0f0f0;border-bottom-color:#ff7f00;border-bottom-width:2px}#payment>#payment-group-paypal{display:none}#payment>.payment-group{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;justify-items:center;gap:1rem;border:1px solid #777;padding:1rem;border-top:0;place-items:stretch}#payment>.payment-group>div{width:14em}@media (max-width:930px){#payment>.payment-group{grid-template-columns:1fr 1fr}}@media (max-width:470px){#payment>.payment-group{grid-template-columns:1fr}}#payment>.payment-group>div{min-width:10em}#payment>.payment-group#paypal-payments>.funding_source{display:flex;border:1px solid #777;padding:1rem;align-items:center;justify-content:center;height:2em;border-radius:5px;gap:.5rem;color:inherit;text-decoration:none}#payment>.payment-group#paypal-payments>.funding_source img{max-width:100%;max-height:100%}#paypal-checkout>h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#paypal-checkout #paypal-payment-card #paypal-card-form{display:grid;grid-template-columns:1fr 5em 9em;place-items:stretch;gap:.5rem}#paypal-checkout #paypal-payment-card #paypal-card-form>div{display:flex;flex-direction:column;gap:.5rem}#paypal-checkout #paypal-payment-card #paypal-card-form>div>label{font-weight:bold;font-size:.8rem;white-space:nowrap}#paypal-checkout #paypal-payment-card #paypal-card-form>div>div{height:2em;border:1px solid #777;border-radius:5px}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card{grid-column:span 3;padding:.5rem;justify-self:center}@media (max-width:460px){#paypal-checkout #paypal-payment-card #paypal-card-form{grid-template-columns:1fr}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card{grid-column:auto}}main{max-width:980px;margin:0 auto;display:grid;row-gap:1rem;padding-right:1rem;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"qr key " "qr setting-url" "qr buttons" "amount charge"}main>#qr{grid-area:qr;justify-self:center}main #key{grid-area:key;font-size:clamp(.9rem, 4.8vw, 1.5rem);font-weight:bold;width:max-content;margin-top:11px;margin-right:1rem}main #setting-url{grid-area:setting-url;align-self:start;display:flex;padding:.5rem 1rem;border-radius:5px}main #setting-url>input{line-height:1.5;padding:.1rem .5rem;border-radius:5px;flex-grow:1}main>#buttons{grid-area:buttons;display:flex;gap:1rem;margin-bottom:17px;justify-content:flex-end}@media (max-width:435px){main>#buttons{display:grid;grid-template-columns:1fr}main>#buttons .button{width:auto}main>#buttons>*{display:grid;justify-items:center;text-align:center}}main>#amount{grid-area:amount;max-width:200px;justify-self:center;display:flex;flex-direction:column;align-items:center}main>#amount>h3{font-size:1.5rem;margin:0}main>#amount>div.amount{font-size:3rem}main>#charge{grid-area:charge}main>#charge>#store>p{line-height:1.5}@media (max-width:770px){main{padding:0 1rem;grid-template-rows:auto auto auto auto auto;grid-template-columns:auto auto;grid-template-areas:"amount qr " "key key" "setting-url setting-url" "buttons buttons " "charge charge "}main>#key{margin:0;justify-self:center}main>#setting-url{text-align:center}main>#buttons{justify-content:center;margin-bottom:0}main>#amount{align-self:center}main>#charge>#store{display:flex;flex-direction:column;align-items:center}}@media (max-width:430px){main{grid-template-rows:auto auto auto auto auto auto;grid-template-columns:auto;grid-template-areas:"qr" "key" "setting-url" "buttons" "amount" "charge"}}
\ No newline at end of file
diff --git a/pass/resources/js/checkout_paypal.js b/pass/resources/js/checkout_paypal.js
index 23e584658e6759017e93a7efc2c5bac3a813ee3e..c4c5a2c9f528d9c856899745b64a8847b2dec107 100644
--- a/pass/resources/js/checkout_paypal.js
+++ b/pass/resources/js/checkout_paypal.js
@@ -37,34 +37,24 @@ function initialize_paypal_payments() {
.then((paypal) => {
console.log(paypal.HostedFields.isEligible() + "test");
if (funding_source === "card") {
- let number = document.createElement("div");
- number.type = "text";
- number.id = "cc-number";
- let cvv = document.createElement("div");
- cvv.type = "text";
- cvv.id = "cc-cvv";
- let expiration = document.createElement("div");
- expiration.type = "text";
- expiration.id = "cc-expiration";
-
- let container = document.getElementById("paypal-payment-fields");
- container.append(number);
- container.append(cvv);
- container.append(expiration);
-
paypal.HostedFields.render({
- styles: {},
+ styles: {
+ input: {
+ padding: "0 .5rem",
+ "font-family": "Liberation Sans",
+ },
+ },
fields: {
number: {
- selector: "#cc-number",
+ selector: "#card-number",
placeholder: "4111 1111 1111 1111",
},
cvv: {
- selector: "#cc-cvv",
+ selector: "#cvv",
placeholder: "123",
},
expirationDate: {
- selector: "#cc-expiration",
+ selector: "#expiration-date",
placeholder: "MM/YY",
},
},
diff --git a/pass/views/key.ejs b/pass/views/key.ejs
index 08b0a21d03ac5309cad53fb9f7b142f00ae40161..5dbbd63ebec325f9a4ea05f7b9dc8e7ca2ef50ac 100644
--- a/pass/views/key.ejs
+++ b/pass/views/key.ejs
@@ -138,8 +138,30 @@
<input type="hidden" name="paypal-client-token" value="<%= checkout.paypal.client_token %>">
<%_ } _%>
<p class="hidden">Die gewählte Zahlungsart ist in Ihrer Region nicht verfügbar.</p>
+ <%_ if(typeof checkout.paypal.funding_source !== undefined) { _%>
+ <%_ if(checkout.paypal.funding_source === "card") { _%>
+ <div id="paypal-payment-card">
+ <form id="paypal-card-form">
+ <div>
+ <label for="card-number">Kartennummer</label>
+ <div id="card-number" class="card_field"></div>
+ </div>
+ <div>
+ <label for="expiration-date">Gültig bis</label>
+ <div id="expiration-date" class="card_field"></div>
+ </div>
+ <div>
+ <label for="cvv">Sicherheitscode (CVV)</label>
+ <div id="cvv" class="card_field"></div>
+ </div>
+ <button type="submit" id="submit-credit-card" class="button">Jetzt bezahlen</button>
+ </form>
+ </div>
+ <%_ }else { _%>
<div id="paypal-payment-fields"></div>
<div id="paypal-payment-button"></div>
+ <%_ } _%>
+ <%_ } _%>
</div>
<%_ } _%>
<%_ } _%>