From 8268dc332b29fa70a09cf98c075e9d50a8ec85cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= Date: Mon, 2 Sep 2024 23:03:28 +0200 Subject: [PATCH] Braintree: Show loader on PayPal when redirecting (#96) * add spinner * show spinner on successful run * assets rebuild --- ...ntree-paypal-16e2f577.js => braintree-paypal-f78ad64b.js} | 4 ++-- public/build/manifest.json | 2 +- resources/js/clients/payments/braintree-paypal.js | 3 +++ .../portal/ninja2020/gateways/braintree/paypal/pay.blade.php | 5 +++++ .../gateways/braintree/paypal/pay_livewire.blade.php | 5 +++++ 5 files changed, 16 insertions(+), 3 deletions(-) rename public/build/assets/{braintree-paypal-16e2f577.js => braintree-paypal-f78ad64b.js} (69%) diff --git a/public/build/assets/braintree-paypal-16e2f577.js b/public/build/assets/braintree-paypal-f78ad64b.js similarity index 69% rename from public/build/assets/braintree-paypal-16e2f577.js rename to public/build/assets/braintree-paypal-f78ad64b.js index d2a70b6d643e..98e40ff55193 100644 --- a/public/build/assets/braintree-paypal-16e2f577.js +++ b/public/build/assets/braintree-paypal-f78ad64b.js @@ -1,4 +1,4 @@ -import{i as l,w as s}from"./wait-8f4ae121.js";/** +import{i as s,w as u}from"./wait-8f4ae121.js";/** * Invoice Ninja (https://invoiceninja.com). * * @link https://github.com/invoiceninja/invoiceninja source repository @@ -6,4 +6,4 @@ import{i as l,w as s}from"./wait-8f4ae121.js";/** * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * * @license https://www.elastic.co/licensing/elastic-license - */class a{initBraintreeDataCollector(){window.braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content},function(e,t){window.braintree.dataCollector.create({client:t,paypal:!0},function(n,o){n||(document.querySelector("input[name=client-data]").value=o.deviceData)})})}static getPaymentDetails(){return{flow:"vault"}}static handleErrorMessage(e){let t=document.getElementById("errors");t.innerText=e,t.hidden=!1}handlePaymentWithToken(){Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",n=>{document.getElementById("paypal-button").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=n.target.dataset.token,document.getElementById("pay-now-with-token").classList.remove("hidden"),document.getElementById("pay-now").classList.add("hidden")}));let e=document.getElementById("pay-now-with-token");e.addEventListener("click",t=>{e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()})}handle(){this.initBraintreeDataCollector(),this.handlePaymentWithToken(),braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content}).then(function(e){return braintree.paypalCheckout.create({client:e})}).then(function(e){return e.loadPayPalSDK({vault:!0}).then(function(t){return paypal.Buttons({fundingSource:paypal.FUNDING.PAYPAL,createBillingAgreement:function(){return t.createPayment(a.getPaymentDetails())},onApprove:function(n,o){return t.tokenizePayment(n).then(function(c){let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.querySelector("input[name=gateway_response]").value=JSON.stringify(c),document.getElementById("server-response").submit()})},onCancel:function(n){},onError:function(n){console.log(n.message),a.handleErrorMessage(n.message)}}).render("#paypal-button")})}).catch(function(e){console.log(e.message),a.handleErrorMessage(e.message)})}}function i(){new a().handle()}l()?i():s("#braintree-paypal-payment").then(()=>i()); + */class a{initBraintreeDataCollector(){window.braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content},function(e,t){window.braintree.dataCollector.create({client:t,paypal:!0},function(n,o){n||(document.querySelector("input[name=client-data]").value=o.deviceData)})})}static getPaymentDetails(){return{flow:"vault"}}static handleErrorMessage(e){let t=document.getElementById("errors");t.innerText=e,t.hidden=!1}handlePaymentWithToken(){Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",n=>{document.getElementById("paypal-button").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=n.target.dataset.token,document.getElementById("pay-now-with-token").classList.remove("hidden"),document.getElementById("pay-now").classList.add("hidden")}));let e=document.getElementById("pay-now-with-token");e.addEventListener("click",t=>{e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()})}handle(){this.initBraintreeDataCollector(),this.handlePaymentWithToken(),braintree.client.create({authorization:document.querySelector("meta[name=client-token]").content}).then(function(e){return braintree.paypalCheckout.create({client:e})}).then(function(e){return e.loadPayPalSDK({vault:!0}).then(function(t){return paypal.Buttons({fundingSource:paypal.FUNDING.PAYPAL,createBillingAgreement:function(){return t.createPayment(a.getPaymentDetails())},onApprove:function(n,o){return t.tokenizePayment(n).then(function(d){var i,c;(i=document.querySelector("#paypal-button"))==null||i.classList.add("hidden"),(c=document.querySelector("#paypal-spinner"))==null||c.classList.remove("hidden");let r=document.querySelector('input[name="token-billing-checkbox"]:checked');r&&(document.querySelector('input[name="store_card"]').value=r.value),document.querySelector("input[name=gateway_response]").value=JSON.stringify(d),document.getElementById("server-response").submit()})},onCancel:function(n){},onError:function(n){console.log(n.message),a.handleErrorMessage(n.message)}}).render("#paypal-button")})}).catch(function(e){console.log(e.message),a.handleErrorMessage(e.message)})}}function l(){new a().handle()}s()?l():u("#braintree-paypal-payment").then(()=>l()); diff --git a/public/build/manifest.json b/public/build/manifest.json index b9a0289b07f3..fb581ec4cd75 100644 --- a/public/build/manifest.json +++ b/public/build/manifest.json @@ -83,7 +83,7 @@ "src": "resources/js/clients/payments/braintree-credit-card.js" }, "resources/js/clients/payments/braintree-paypal.js": { - "file": "assets/braintree-paypal-16e2f577.js", + "file": "assets/braintree-paypal-f78ad64b.js", "imports": [ "_wait-8f4ae121.js" ], diff --git a/resources/js/clients/payments/braintree-paypal.js b/resources/js/clients/payments/braintree-paypal.js index 40cabce5ae0b..4f0a4965fd5b 100644 --- a/resources/js/clients/payments/braintree-paypal.js +++ b/resources/js/clients/payments/braintree-paypal.js @@ -88,6 +88,9 @@ class BraintreePayPal { onApprove: function (data, actions) { return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) { + document.querySelector('#paypal-button')?.classList.add('hidden'); + document.querySelector('#paypal-spinner')?.classList.remove('hidden'); + let tokenBillingCheckbox = document.querySelector( 'input[name="token-billing-checkbox"]:checked' ); diff --git a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php index bbc1b6b0398c..b1ee5eadb370 100644 --- a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php +++ b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php @@ -60,6 +60,11 @@ @component('portal.ninja2020.components.general.card-element-single')
+ + @endcomponent @include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token', 'class' => 'hidden']) diff --git a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay_livewire.blade.php b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay_livewire.blade.php index ac4ac9690c31..a1d4962918bc 100644 --- a/resources/views/portal/ninja2020/gateways/braintree/paypal/pay_livewire.blade.php +++ b/resources/views/portal/ninja2020/gateways/braintree/paypal/pay_livewire.blade.php @@ -53,6 +53,11 @@ @component('portal.ninja2020.components.general.card-element-single')
+ + @endcomponent @include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token', 'class' => 'hidden'])