diff --git a/pass/public/styles/key/checkout-payment.less b/pass/public/styles/key/checkout-payment.less
index d31ebbc92f63f85f07f78009116c78f9b7f42475..11f13dfdc35d6095b73f0622fa11984625fe3533 100644
--- a/pass/public/styles/key/checkout-payment.less
+++ b/pass/public/styles/key/checkout-payment.less
@@ -86,7 +86,8 @@
#paypal-payment-card #paypal-card-form {
@paypal-card-form-breakpoint-1: 920px;
display: grid;
- grid-template-columns: 1fr 5em 9em;
+ grid-template-columns: 1fr 5em;
+ grid-template-rows: 1fr auto auto;
place-items: stretch;
gap: 0.5rem;
> div {
@@ -97,15 +98,28 @@
font-weight: bold;
font-size: 0.8rem;
white-space: nowrap;
+ &.error {
+ color: red;
+ line-height: 1;
+ &::before {
+ font-size: initial;
+ }
+ }
}
> div {
height: 2.3rem;
border: 1px solid #777;
border-radius: 5px;
}
+ &.card-holder-name {
+ grid-column: span 2;
+ input {
+ padding: 0.5rem;
+ }
+ }
}
> button#submit-credit-card {
- grid-column: span 3;
+ grid-column: span 2;
padding: 0.5rem;
justify-self: center;
display: flex;
diff --git a/pass/public/styles/key/key.css b/pass/public/styles/key/key.css
index 3ac3cab441ea2b25d83c18b29d2b12e0c79762f3..3a8f1729dbe148f43f608af1e1e91f36ee5dbc91 100644
--- a/pass/public/styles/key/key.css
+++ b/pass/public/styles/key/key.css
@@ -1 +1 @@
-#checkout-amount-template{text-decoration:none;color:inherit;display:grid;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;place-items:stretch}#checkout-amount-template>.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-amount-template>.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-amount-template>.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}#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>#loading_paypal_funding_source{display:flex;align-items:center;justify-content:center;gap:1rem;color:#777;padding:2rem 0}#paypal-checkout>#loading_paypal_funding_source img{width:2rem}#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:2.3rem;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;display:flex;white-space:nowrap;align-items:center;line-height:1;gap:.5rem}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card>img{display:none}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card.loading>img{display:block}@media (max-width:920px){#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"}}h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#summary{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:3rem}#summary>.checkout-amount{text-decoration:none;color:inherit;display:grid;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;place-items:stretch}#summary>.checkout-amount>.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}#summary>.checkout-amount>.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}#summary>.checkout-amount>.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}#summary>.funding_source{height:4.5rem;width:11rem;display:grid;place-content:center;place-items:center;border:1px solid #777;border-radius:10px;color:inherit;text-decoration:none;gap:.5rem}#summary>.funding_source img{max-width:70%;max-height:100%}@media (max-width:430px){#summary{flex-direction:column}}
\ No newline at end of file
+#checkout-amount-template{text-decoration:none;color:inherit;display:grid;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;place-items:stretch}#checkout-amount-template>.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-amount-template>.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-amount-template>.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}#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>#loading_paypal_funding_source{display:flex;align-items:center;justify-content:center;gap:1rem;color:#777;padding:2rem 0}#paypal-checkout>#loading_paypal_funding_source img{width:2rem}#paypal-checkout #paypal-payment-card #paypal-card-form{display:grid;grid-template-columns:1fr 5em;grid-template-rows:1fr auto auto;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>label.error{color:red;line-height:1}#paypal-checkout #paypal-payment-card #paypal-card-form>div>label.error::before{font-size:initial}#paypal-checkout #paypal-payment-card #paypal-card-form>div>div{height:2.3rem;border:1px solid #777;border-radius:5px}#paypal-checkout #paypal-payment-card #paypal-card-form>div.card-holder-name{grid-column:span 2}#paypal-checkout #paypal-payment-card #paypal-card-form>div.card-holder-name input{padding:.5rem}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card{grid-column:span 2;padding:.5rem;justify-self:center;display:flex;white-space:nowrap;align-items:center;line-height:1;gap:.5rem}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card>img{display:none}#paypal-checkout #paypal-payment-card #paypal-card-form>button#submit-credit-card.loading>img{display:block}@media (max-width:920px){#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"}}h2{margin:0 0 1rem;text-align:center;border-bottom:1px solid #ff7f00}#summary{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:3rem}#summary>.checkout-amount{text-decoration:none;color:inherit;display:grid;grid-template-columns:7em 3.5em;grid-template-rows:2.5em 2em;place-items:stretch}#summary>.checkout-amount>.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}#summary>.checkout-amount>.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}#summary>.checkout-amount>.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}#summary>.funding_source{height:4.5rem;width:11rem;display:grid;place-content:center;place-items:center;border:1px solid #777;border-radius:10px;color:inherit;text-decoration:none;gap:.5rem}#summary>.funding_source img{max-width:70%;max-height:100%}@media (max-width:430px){#summary{flex-direction:column}}
\ No newline at end of file
diff --git a/pass/resources/js/checkout_paypal.js b/pass/resources/js/checkout_paypal.js
index 7c059920c7cac25335060abd094a6428fd6b56be..7e9890b8b511cb876bee34c8b58340c5305a74c9 100644
--- a/pass/resources/js/checkout_paypal.js
+++ b/pass/resources/js/checkout_paypal.js
@@ -54,98 +54,7 @@ function initialize_paypal_payments() {
return;
}
if (funding_source === "card") {
- // Show the Form
- document
- .getElementById("loading_paypal_funding_source")
- .classList.add("hidden");
- document
- .getElementById("paypal-payment-card")
- .classList.remove("hidden");
- paypal.HostedFields.render({
- styles: {
- input: {
- padding: "0 .5rem",
- "font-family": "Liberation Sans",
- },
- },
- fields: {
- number: {
- selector: "#card-number",
- placeholder: "4111 1111 1111 1111",
- },
- cvv: {
- selector: "#cvv",
- placeholder: "123",
- },
- expirationDate: {
- selector: "#expiration-date",
- placeholder: "MM/YY",
- },
- },
- createOrder: checkout_data.createOrder,
- onError: (error) => {
- console.log("error");
- console.error(error);
- },
- }).then((cardFields) => {
- document
- .getElementById("paypal-card-form")
- .addEventListener("submit", (e) => {
- e.preventDefault();
-
- // Hide all errors
- document
- .querySelectorAll("#paypal-card-errors > p")
- .forEach((element) => {
- element.classList.add("hidden");
- });
- // Disable Button
- let submit_button = document.getElementById("submit-credit-card");
- submit_button.disabled = true;
- submit_button.classList.add("loading");
-
- cardFields
- .submit({
- cardholderName:
- document.getElementById("card-holder-name").value,
- contingencies: ["SCA_ALWAYS"],
- })
- .then((payload) => {
- console.log(payload);
- if (payload.liabilityShift === "POSSIBLE") {
- checkout_data.onApprove().catch((reason) => {
- console.log("Fehlgeschlagen");
- });
- }
- // Enable Button
- submit_button.disabled = undefined;
- submit_button.classList.remove("loading");
- })
- .catch((reason) => {
- reason.details.forEach((detail) => {
- console.log(detail);
- if (detail.issue === "CARD_TYPE_NOT_SUPPORTED") {
- document
- .getElementById("paypal-card-errors-invalid-card")
- .classList.remove("hidden");
- } else if (detail.issue === "VALIDATION_ERROR") {
- let error = document.getElementById(
- "paypal-card-errors-validation"
- );
- error.textContent = detail.description;
- error.classList.remove("hidden");
- } else if (detail.issue === "CARD_EXPIRED") {
- document
- .getElementById("paypal-card-errors-expired")
- .classList.remove("hidden");
- }
- // Enable Button
- submit_button.disabled = undefined;
- submit_button.classList.remove("loading");
- });
- });
- });
- });
+ loadCardPayment(checkout_data);
} else if (funding_source === "paypal") {
paypal
.Buttons(get_paypal_checkout_data(null))
@@ -161,47 +70,6 @@ function initialize_paypal_payments() {
let button_data = get_paypal_checkout_data(funding_source);
paypal.Buttons(button_data).render("#paypal-payment-button");
}
- return;
- console.log(paypal.FUNDING);
- Object.values(paypal.FUNDING).forEach((fundingSource) => {
- let mark = paypal.Marks({
- fundingSource: fundingSource,
- });
- let funding_source_element = document.createElement("div");
- funding_source_element.classList.add("funding_source");
- funding_source_element.id = fundingSource;
- if (mark.isEligible()) {
- document
- .getElementById("paypal-payments")
- .appendChild(funding_source_element);
- mark.render("#" + fundingSource);
- }
- });
- paypal.getFundingSources().forEach((fundingSource) => {
- /*console.log(fundingSource);
- let funding_source_element = document.createElement("div");
- funding_source_element.classList.add("funding_source");
- funding_source_element.id = fundingSource;
- document
- .getElementById("paypal-payments")
- .appendChild(funding_source_element);
- paypal.Marks().render("#paypal-payments");*/
- });
- /*
- paypal.getFundingSources().forEach((fundingSource) => {
- let button = paypal.Buttons(get_paypal_checkout_data(fundingSource));
- if (button.isEligible()) {
- console.log("eligible");
- let funding_source_element = document.createElement("div");
- funding_source_element.classList.add("funding_source");
- funding_source_element.id = fundingSource;
- document
- .getElementById("paypal-payments")
- .appendChild(funding_source_element);
- button.render("#" + fundingSource);
- }
- });
- */
})
.catch((err) => {
// ToDo Handle error
@@ -260,7 +128,15 @@ function get_paypal_checkout_data(funding_source) {
order_id: document.getElementById("paypal-checkout").dataset.order_id,
}),
})
- .then((response) => response.json())
+ .then((response) => {
+ if (response.status !== 200) {
+ return response.json().then((json_response) => {
+ throw json_response;
+ });
+ } else {
+ return response.json();
+ }
+ })
.then((orderData) => {
if (typeof orderData.redirect_url !== "undefined") {
document.location.href = orderData.redirect_url;
@@ -300,4 +176,118 @@ function cancelPayment(order_id) {
});
}
+function loadCardPayment(checkout_data) {
+ // Show the Form
+ document
+ .getElementById("loading_paypal_funding_source")
+ .classList.add("hidden");
+ document.getElementById("paypal-payment-card").classList.remove("hidden");
+ paypal.HostedFields.render({
+ styles: {
+ input: {
+ padding: "0 .5rem",
+ "font-family": "Liberation Sans",
+ },
+ },
+ fields: {
+ number: {
+ selector: "#card-number",
+ placeholder: "4111 1111 1111 1111",
+ },
+ expirationDate: {
+ selector: "#expiration-date",
+ placeholder: "MM/YY",
+ },
+ },
+ createOrder: checkout_data.createOrder,
+ }).then((cardFields) => {
+ document
+ .getElementById("paypal-card-form")
+ .addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ // Hide all errors
+ document
+ .querySelectorAll("#paypal-card-errors > p")
+ .forEach((element) => {
+ element.classList.add("hidden");
+ });
+ document
+ .querySelectorAll("#paypal-card-form label")
+ .forEach((element) => {
+ element.classList.remove("error");
+ });
+ // Disable Button
+ let submit_button = document.getElementById("submit-credit-card");
+ submit_button.disabled = true;
+ submit_button.classList.add("loading");
+
+ let cardfield_data = {
+ contingencies: ["SCA_ALWAYS"],
+ };
+ if (document.getElementById("card-holder-name")) {
+ cardfield_data.cardholderName =
+ document.getElementById("card-holder-name").value;
+ }
+
+ cardFields
+ .submit(cardfield_data)
+ .then((payload) => {
+ checkout_data.onApprove().catch((reason) => {
+ let payment_failed = false;
+ reason.errors.forEach((error) => {
+ if (error.type && error.type === "PAYPAL_CARD_3D_ERROR") {
+ payment_failed = true;
+ document
+ .getElementById("paypal-card-errors-3d")
+ .classList.remove("hidden");
+ } else if (
+ error.type &&
+ error.type === "PAYMENT_NOT_COMPLETED_ERROR"
+ ) {
+ payment_failed = true;
+ document
+ .getElementById("paypal-card-errors-generic")
+ .classList.remove("hidden");
+ } else {
+ // Capture was not yet possible ToDo redirect user to Order
+ // There is a chance that webhooks will capture the payment
+ console.error(reason);
+ console.log("Fehlgeschlagen");
+ }
+ });
+ });
+ // Enable Button
+ submit_button.disabled = undefined;
+ submit_button.classList.remove("loading");
+ })
+ .catch((reason) => {
+ reason.details.forEach((detail) => {
+ console.log(detail);
+ if (detail.issue === "CARD_TYPE_NOT_SUPPORTED") {
+ document
+ .getElementById("paypal-card-errors-invalid-card")
+ .classList.remove("hidden");
+ } else if (detail.issue === "CARD_EXPIRED") {
+ document
+ .getElementById("paypal-card-errors-expired")
+ .classList.remove("hidden");
+ } else if (detail.field === "/payment_source/card/expiry") {
+ document
+ .querySelector("#paypal-card-form label[for=expiration-date]")
+ .classList.add("error");
+ } else if (detail.field === "/payment_source/card/number") {
+ document
+ .querySelector("#paypal-card-form label[for=card-number]")
+ .classList.add("error");
+ }
+ // Enable Button
+ submit_button.disabled = undefined;
+ submit_button.classList.remove("loading");
+ });
+ });
+ });
+ });
+}
+
module.exports = initialize_paypal_payments;
diff --git a/pass/routes/checkout/paypal.js b/pass/routes/checkout/paypal.js
index 01e01adedbece02c3bfe9e6b1f2a828f213a9ace..77469daaf0f98b6b7988f4218d2fc52d68a0b8be 100644
--- a/pass/routes/checkout/paypal.js
+++ b/pass/routes/checkout/paypal.js
@@ -10,6 +10,7 @@ const CLIENT_ID = config.get(
);
const APP_SECRET = config.get(`payments.paypal.${process.env.NODE_ENV}.secret`);
const base = config.get(`payments.paypal.${process.env.NODE_ENV}.base`);
+const webhook_redis_key = "checkout_paypal_webhook_id";
router.use("/", async (req, res, next) => {
if (req.data && req.data.checkout) {
@@ -114,6 +115,40 @@ router.post("/:funding_source/order/cancel", async (req, res) => {
}); // Deletes a order but only if the payment is not yet completed
});
+// We need to make sure that a card payment was authorized with 3-DS.
+// All other PayPal captures will be handled in the next capture rotue
+router.use("/card/order/capture", async (req, res, next) => {
+ Order.LOAD_ORDER_FROM_ID(req.body.order_id).then(
+ /**
+ * @param {Order} loaded_order
+ */
+
+ (loaded_order) => {
+ let payment_method_link = loaded_order.getPaymentMethodLink();
+ getOrderDetails(payment_method_link.order_id)
+ .then((order_details) => {
+ // A successful 3D Authentication by the user will result in liability_shift: POSSIBLE for the authentication result
+ // Make sure the parameter is set for the order:
+ if (
+ order_details.payment_source.card.authentication_result
+ .liability_shift !== "POSSIBLE"
+ ) {
+ console.log(JSON.stringify(order_details));
+ throw "3D Authentication was not successful";
+ } else {
+ next("route");
+ }
+ })
+ .catch((reason) => {
+ console.error(reason);
+ res.status(400).json({
+ errors: [{ type: "PAYPAL_CARD_3D_ERROR" }],
+ });
+ });
+ }
+ );
+});
+
// capture payment & store order information or fullfill order
router.post("/:funding_source/order/capture", async (req, res) => {
//res.status(200).json({ test: "test" });
@@ -138,10 +173,13 @@ router.post("/:funding_source/order/capture", async (req, res) => {
});
})
.catch((reason) => {
- console.error(reason);
- res
- .status(400)
- .json({ errors: [{ msg: "Couldn't capture the payment" }] });
+ if (reason === "PAYMENT_NOT_COMPLETED_ERROR") {
+ res.status(400).json({ errors: [{ type: reason }] });
+ } else {
+ res
+ .status(400)
+ .json({ errors: [{ msg: "Couldn't capture the payment" }] });
+ }
});
}
);
@@ -166,9 +204,7 @@ router.post("/webhook", async (req, res) => {
transmission_sig: req.headers["paypal-transmission-sig"],
transmission_time: req.headers["paypal-transmission-time"],
webhook_event: req.body,
- webhook_id: config.get(
- `payments.paypal.${process.env.NODE_ENV}.webhook_id`
- ),
+ webhook_id: await getWebhookId(),
}),
})
.then((response) => {
@@ -405,7 +441,7 @@ async function capturePayment(order) {
"COMPLETED"
) {
console.error(JSON.stringify(response_data));
- throw "Couldn't create Payment";
+ throw "PAYMENT_NOT_COMPLETED_ERROR";
}
return order.setPaymentMethodLink({
name: "paypal",
@@ -416,6 +452,33 @@ async function capturePayment(order) {
});
}
+async function getOrderDetails(order_id) {
+ let url = `${base}/v2/checkout/orders/${order_id}`;
+ return generateAccessToken()
+ .then((access_token) =>
+ fetch(url, {
+ headers: {
+ Authorization: `Bearer ${access_token}`,
+ },
+ })
+ )
+ .then((response) => {
+ if (response.status == 200) {
+ return response.json();
+ } else {
+ throw "Couldn't retrieve Order";
+ }
+ });
+}
+
+async function getWebhookId() {
+ let Redis = require("ioredis");
+ let redis_client = new Redis({
+ host: config.get("redis.host"),
+ });
+ return redis_client.get(webhook_redis_key);
+}
+
async function verifyWebhook() {
let domain = config.get("app.url").replace(/\/+$/, "");
@@ -428,8 +491,7 @@ async function verifyWebhook() {
let redis_client = new Redis({
host: config.get("redis.host"),
});
- let webhook_already_registered_key = "paypal_webhook_registered";
- if (await redis_client.get(webhook_already_registered_key)) {
+ if (await redis_client.get(webhook_redis_key)) {
return;
}
const accessToken = await generateAccessToken();
@@ -442,11 +504,37 @@ async function verifyWebhook() {
})
.then((response) => response.json())
.then((webhooks) => {
- webhooks.webhooks.forEach((webhook) => {
+ let webhook_id = undefined;
+ webhooks.webhooks.forEach(async (webhook) => {
if (webhook.url.startsWith(domain)) {
- throw "WEBHOOK_ALREADY_REGISTERED"; // Webhook already registered
+ webhook_id = webhook.id;
+ } else if (webhook.url.match(/^https:\/\/.*\.ngrok\.io/)) {
+ // Another ngrok development webhook. Delete it.
+ let promises = [];
+ webhook.links.forEach((link) => {
+ if (link.rel === "delete") {
+ promises.push(
+ fetch(link.href, {
+ method: link.method,
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ })
+ );
+ }
+ });
+ await Promise.all(promises);
}
});
+ if (webhook_id !== undefined) {
+ return redis_client.set(webhook_redis_key, webhook_id).then(() => {
+ throw "WEBHOOK_ALREADY_REGISTERED"; // Webhook already registered
+ });
+ } else {
+ // Webhook does not yet exist
+ console.log("Webhook does not yet exist");
+ return true;
+ }
})
.then(async () => {
// Webhook does not exist yet
@@ -465,19 +553,23 @@ async function verifyWebhook() {
],
url: domain + "/webhooks/paypal/webhook",
}),
- }).then((response) => {
- if (response.status !== 201) {
- return Promise.reject(response);
- }
- redis_client.set(webhook_already_registered_key, true);
- });
+ })
+ .then((response) => {
+ if (response.status !== 201) {
+ return Promise.reject(response);
+ } else {
+ return response.json();
+ }
+ })
+ .then((response_data) => {
+ console.log(JSON.stringify(response_data));
+ redis_client.set(webhook_redis_key, response_data.id);
+ });
})
.catch((reason) => {
if (reason !== "WEBHOOK_ALREADY_REGISTERED") {
- console.warning("Could not register Webhook for PayPal.");
- console.warning(reason);
- } else {
- redis_client.set(webhook_already_registered_key, true);
+ console.error("Could not register Webhook for PayPal.");
+ console.error(reason);
}
});
}
diff --git a/pass/views/key.ejs b/pass/views/key.ejs
index 6f68fb85f3425daaffe05172f7d6085cc841a387..0c9583186c8f562705de8ddecc0f5e20993a64d9 100644
--- a/pass/views/key.ejs
+++ b/pass/views/key.ejs
@@ -162,10 +162,11 @@
<%_ if(checkout.payment.paypal.funding_source === "card") { _%>
<div id="paypal-payment-card" class="hidden">
<div id="paypal-card-errors">
+ <p id="paypal-card-errors-generic" class="error hidden">Zahlung fehlgeschlagen</p>
<p id="paypal-card-errors-invalid-card" class="error hidden">Diese Karte wird leider nicht unterstützt</p>
<p id="paypal-card-errors-expired" class="error hidden">Diese Karte ist abgelaufen</p>
- <p id="paypal-card-errors-validation" class="error hidden"></p>
<p id="paypal-card-errors-rejected" class="error hidden">Ihre Zahlung wurde von der Bank abgelehnt.</p>
+ <p id="paypal-card-errors-3d" class="error hidden">3D Authentifizierung fehlgeschlagen</p>
</div>
<form id="paypal-card-form">
<div>
@@ -176,14 +177,12 @@
<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>
- <div>
- <label for="card-holder-name">Name</label>
+ <%_ if(process.env.NODE_ENV === "development") { _%>
+ <div class="card-holder-name">
+ <label for="card-holder-name">Name (Entfällt im Produktivbetrieb)</label>
<input type="text" id="card-holder-name" class="card_field" autocomplete="off" placeholder="Name"/>
</div>
+ <%_ } _%>
<button type="submit" id="submit-credit-card" class="button"><img src="/images/loader.gif" alt="Loading symbol"> <span>Jetzt bezahlen</span></button>
</form>
</div>