From a4592d666b62a672c393ba29640ce89326e2acc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= Date: Wed, 10 Jul 2024 01:55:36 +0200 Subject: [PATCH] Refactor context passing between methods and Livewire (#65) * checkout.com credit card payment for livewire * implement interface for livewire view * livewire method interface * implement interfaces * assets production build * checkout.com: credit card * stripe: credit card * lift up logic from process payment component * update stripe payment view logic * wait fn for mounting existing JS * credit card: simplify data passing * stripe: browser pay * stripe cc: remove getData * stripe: cc * stripe: alipay * checkout :cc * stripe: apple pay * stripe: browser pay * assets production build --- app/PaymentDrivers/CheckoutCom/CreditCard.php | 21 +- .../CheckoutComPaymentDriver.php | 19 +- app/PaymentDrivers/Stripe/BrowserPay.php | 20 +- app/PaymentDrivers/Stripe/CreditCard.php | 20 +- app/PaymentDrivers/StripePaymentDriver.php | 25 +- .../assets/checkout-credit-card-8a04938c.js | 9 - .../assets/checkout-credit-card-ba005c24.js | 9 + ...-00a4a19f.js => stripe-alipay-010d5388.js} | 6 +- ...d3d4.js => stripe-credit-card-ce33996a.js} | 4 +- public/build/assets/wait-d71d9fed.js | 9 + public/build/manifest.json | 15 +- .../clients/payments/checkout-credit-card.js | 78 +++-- .../js/clients/payments/stripe-alipay.js | 73 +++-- .../js/clients/payments/stripe-browserpay.js | 4 +- .../js/clients/payments/stripe-credit-card.js | 104 +++--- .../stripe/credit_card/livewire_pay.blade.php | 297 ------------------ 16 files changed, 266 insertions(+), 447 deletions(-) delete mode 100644 public/build/assets/checkout-credit-card-8a04938c.js create mode 100644 public/build/assets/checkout-credit-card-ba005c24.js rename public/build/assets/{stripe-alipay-00a4a19f.js => stripe-alipay-010d5388.js} (64%) rename public/build/assets/{stripe-credit-card-c690d3d4.js => stripe-credit-card-ce33996a.js} (83%) create mode 100644 public/build/assets/wait-d71d9fed.js delete mode 100644 resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php diff --git a/app/PaymentDrivers/CheckoutCom/CreditCard.php b/app/PaymentDrivers/CheckoutCom/CreditCard.php index c19acab18e6d..5598825568ca 100644 --- a/app/PaymentDrivers/CheckoutCom/CreditCard.php +++ b/app/PaymentDrivers/CheckoutCom/CreditCard.php @@ -19,6 +19,7 @@ use App\Models\ClientGatewayToken; use App\Models\GatewayType; use App\Models\SystemLog; use App\PaymentDrivers\CheckoutComPaymentDriver; +use App\PaymentDrivers\Common\LivewireMethodInterface; use App\PaymentDrivers\Common\MethodInterface; use App\Utils\Traits\MakesHash; use Checkout\CheckoutApiException; @@ -32,7 +33,7 @@ use Illuminate\Contracts\View\Factory; use Illuminate\Http\Request; use Illuminate\View\View; -class CreditCard implements MethodInterface +class CreditCard implements MethodInterface, LivewireMethodInterface { use Utilities; use MakesHash; @@ -140,7 +141,7 @@ class CreditCard implements MethodInterface } } - public function paymentView($data) + private function paymentData(array $data): array { $data['gateway'] = $this->checkout; $data['company_gateway'] = $this->checkout->company_gateway; @@ -150,9 +151,25 @@ class CreditCard implements MethodInterface $data['raw_value'] = $data['total']['amount_with_fee']; $data['customer_email'] = $this->checkout->client->present()->email(); + return $data; + } + + public function paymentView($data, $livewire = false) + { + $data = $this->paymentData($data); + + if ($livewire) { + return render('gateways.checkout.credit_card.pay_livewire', $data); + } + return render('gateways.checkout.credit_card.pay', $data); } + public function livewirePaymentView(): string + { + return 'gateways.checkout.credit_card.livewire_pay'; + } + public function paymentResponse(PaymentResponseRequest $request) { $state = [ diff --git a/app/PaymentDrivers/CheckoutComPaymentDriver.php b/app/PaymentDrivers/CheckoutComPaymentDriver.php index 12dd66244f8d..4f936ec14f47 100644 --- a/app/PaymentDrivers/CheckoutComPaymentDriver.php +++ b/app/PaymentDrivers/CheckoutComPaymentDriver.php @@ -12,6 +12,7 @@ namespace App\PaymentDrivers; +use App\PaymentDrivers\Common\LivewireMethodInterface; use Exception; use App\Models\Company; use App\Models\Invoice; @@ -45,7 +46,7 @@ use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest; use Checkout\Payments\Previous\PaymentRequest as PreviousPaymentRequest; use Checkout\Payments\Previous\Source\RequestIdSource as SourceRequestIdSource; -class CheckoutComPaymentDriver extends BaseDriver +class CheckoutComPaymentDriver extends BaseDriver implements LivewireMethodInterface { use SystemLogTrait; use Utilities; @@ -189,6 +190,17 @@ class CheckoutComPaymentDriver extends BaseDriver return $this->payment_method->paymentView($data); } + /** + * Process payment view for the Livewire payments. + * + * @param array $data + * @return array + */ + public function processPaymentViewData(array $data): array + { + return $this->payment_method->paymentData($data); + } + /** * Process the payment response * @@ -619,4 +631,9 @@ class CheckoutComPaymentDriver extends BaseDriver }); } + + public function livewirePaymentView(): string + { + return $this->payment_method->livewirePaymentView(); + } } diff --git a/app/PaymentDrivers/Stripe/BrowserPay.php b/app/PaymentDrivers/Stripe/BrowserPay.php index 09d71fcdb17c..47e75f0c1639 100644 --- a/app/PaymentDrivers/Stripe/BrowserPay.php +++ b/app/PaymentDrivers/Stripe/BrowserPay.php @@ -19,6 +19,7 @@ use App\Models\GatewayType; use App\Models\Payment; use App\Models\PaymentType; use App\Models\SystemLog; +use App\PaymentDrivers\Common\LivewireMethodInterface; use App\PaymentDrivers\Common\MethodInterface; use App\PaymentDrivers\StripePaymentDriver; use App\Utils\Ninja; @@ -29,7 +30,7 @@ use Stripe\ApplePayDomain; use Stripe\Exception\ApiErrorException; use Stripe\PaymentIntent; -class BrowserPay implements MethodInterface +class BrowserPay implements MethodInterface, LivewireMethodInterface { protected StripePaymentDriver $stripe; @@ -63,8 +64,9 @@ class BrowserPay implements MethodInterface { return redirect()->route('client.payment_methods.index'); } + - public function paymentView(array $data): View + public function paymentData(array $data): array { $payment_intent_data = [ 'amount' => $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency()), @@ -93,6 +95,13 @@ class BrowserPay implements MethodInterface 'requestPayerEmail' => true, ]; + return $data; + } + + public function paymentView(array $data): View + { + $data = $this->paymentData($data); + return render('gateways.stripe.browser_pay.pay', $data); } @@ -231,4 +240,11 @@ class BrowserPay implements MethodInterface return str_replace(['https://', '/public'], '', $domain); } + /** + * @inheritDoc + */ + public function livewirePaymentView(): string + { + return 'gateways.stripe.browser_pay.pay_livewire'; + } } diff --git a/app/PaymentDrivers/Stripe/CreditCard.php b/app/PaymentDrivers/Stripe/CreditCard.php index 4f9d565a7fed..76c8c08e6444 100644 --- a/app/PaymentDrivers/Stripe/CreditCard.php +++ b/app/PaymentDrivers/Stripe/CreditCard.php @@ -19,12 +19,13 @@ use App\Models\GatewayType; use App\Models\Payment; use App\Models\PaymentType; use App\Models\SystemLog; +use App\PaymentDrivers\Common\LivewireMethodInterface; use App\PaymentDrivers\Stripe\Jobs\UpdateCustomer; use App\PaymentDrivers\StripePaymentDriver; use Stripe\PaymentIntent; use Stripe\PaymentMethod; -class CreditCard +class CreditCard implements LivewireMethodInterface { public $stripe; @@ -57,16 +58,8 @@ class CreditCard return redirect()->route('client.payment_methods.index'); } - public function paymentData(array $data) + public function paymentData(array $data): array { - $data = $this->getData($data); - - return $data; - } - - private function getData(array $data): array - { - $description = $this->stripe->getDescription(false); $payment_intent_data = [ @@ -90,11 +83,16 @@ class CreditCard public function paymentView(array $data) { - $data = $this->getData($data); + $data = $this->paymentData($data); return render('gateways.stripe.credit_card.pay', $data); } + public function livewirePaymentView(): string + { + return 'gateways.stripe.credit_card.pay_livewire'; + } + public function paymentResponse(PaymentResponseRequest $request) { $this->stripe->init(); diff --git a/app/PaymentDrivers/StripePaymentDriver.php b/app/PaymentDrivers/StripePaymentDriver.php index 7ec32c7111dd..6f82d262d0dd 100644 --- a/app/PaymentDrivers/StripePaymentDriver.php +++ b/app/PaymentDrivers/StripePaymentDriver.php @@ -421,7 +421,29 @@ class StripePaymentDriver extends BaseDriver public function processPaymentViewData(array $data): array { - return $this->payment_method->paymentData($data); + $data = $this->payment_method->paymentData($data); + + $data['stripe_account_id'] = $this->company_gateway->getConfigField('account_id'); + + if (array_key_exists('intent', $data)) { + $data['client_secret'] = $data['intent']->client_secret; + } + + unset($data['intent']); + + $token_billing_string = 'true'; + + if($this->company_gateway->token_billing == 'off' || $this->company_gateway->token_billing == 'optin') { + $token_billing_string = 'false'; + } + + if (isset($data['pre_payment']) && $data['pre_payment'] == '1' && isset($data['is_recurring']) && $data['is_recurring'] == '1') { + $token_billing_string = 'true'; + } + + $data['token_billing_string'] = $token_billing_string; + + return $data; } public function processPaymentResponse($request) @@ -1027,3 +1049,4 @@ class StripePaymentDriver extends BaseDriver } } + diff --git a/public/build/assets/checkout-credit-card-8a04938c.js b/public/build/assets/checkout-credit-card-8a04938c.js deleted file mode 100644 index 0125ca29bec6..000000000000 --- a/public/build/assets/checkout-credit-card-8a04938c.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Invoice Ninja (https://invoiceninja.com) - * - * @link https://github.com/invoiceninja/invoiceninja source repository - * - * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) - * - * @license https://www.elastic.co/licensing/elastic-license - */class o{constructor(){this.tokens=[]}mountFrames(){console.log("Mount checkout frames..")}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",a=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),a.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}new o().handle(); diff --git a/public/build/assets/checkout-credit-card-ba005c24.js b/public/build/assets/checkout-credit-card-ba005c24.js new file mode 100644 index 000000000000..0b28ba71e3e1 --- /dev/null +++ b/public/build/assets/checkout-credit-card-ba005c24.js @@ -0,0 +1,9 @@ +import{w as o}from"./wait-d71d9fed.js";/** + * Invoice Ninja (https://invoiceninja.com) + * + * @link https://github.com/invoiceninja/invoiceninja source repository + * + * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) + * + * @license https://www.elastic.co/licensing/elastic-license + */class s{constructor(){this.tokens=[]}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",a=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),a.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}o("#checkout-credit-card-payment").then(()=>new s().handle()); diff --git a/public/build/assets/stripe-alipay-00a4a19f.js b/public/build/assets/stripe-alipay-010d5388.js similarity index 64% rename from public/build/assets/stripe-alipay-00a4a19f.js rename to public/build/assets/stripe-alipay-010d5388.js index 1aa7a164b732..0c8522442897 100644 --- a/public/build/assets/stripe-alipay-00a4a19f.js +++ b/public/build/assets/stripe-alipay-010d5388.js @@ -1,9 +1,9 @@ -var i=Object.defineProperty;var c=(n,e,t)=>e in n?i(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var r=(n,e,t)=>(c(n,typeof e!="symbol"?e+"":e,t),t);/** +var i=Object.defineProperty;var o=(n,e,t)=>e in n?i(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var s=(n,e,t)=>(o(n,typeof e!="symbol"?e+"":e,t),t);/** * Invoice Ninja (https://invoiceninja.com) * * @link https://github.com/invoiceninja/invoiceninja source repository * * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * - * @license https://www.elastic.co/licensing/elastic-license - */class a{constructor(e,t){r(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));this.key=e,this.stripeConnect=t,this.errors=document.getElementById("errors")}async handle(){document.getElementById("pay-now").addEventListener("click",async e=>{document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden");const{error:t}=await this.stripe.confirmAlipayPayment(document.querySelector("meta[name=ci_intent]").content,{return_url:`${document.querySelector("meta[name=return_url]").content}`});document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),t&&(this.errors.textContent="",this.errors.textContent=result.error.message,this.errors.hidden=!1)})}}var s;const d=((s=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:s.content)??"";var o;const l=((o=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:o.content)??"";new a(d,l).setupStripe().handle(); + * @license https://www.elastic.co/licensing/elastic-license + */class c{constructor(e,t){s(this,"setupStripe",()=>(this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this));this.key=e,this.stripeConnect=t,this.errors=document.getElementById("errors")}async handle(){document.getElementById("pay-now").addEventListener("click",async e=>{document.getElementById("pay-now").disabled=!0,document.querySelector("#pay-now > svg").classList.add("hidden"),document.querySelector("#pay-now > span").classList.remove("hidden");const{error:t}=await this.stripe.confirmAlipayPayment(document.querySelector("meta[name=ci_intent]").content,{return_url:`${document.querySelector("meta[name=return_url]").content}`});document.getElementById("pay-now").disabled=!1,document.querySelector("#pay-now > svg").classList.remove("hidden"),document.querySelector("#pay-now > span").classList.add("hidden"),t&&(this.errors.textContent="",this.errors.textContent=result.error.message,this.errors.hidden=!1)})}}wait("#stripe-alipay-payment").then(()=>{var t,r;const n=((t=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:t.content)??"",e=((r=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:r.content)??"";new c(n,e).setupStripe().handle()}); diff --git a/public/build/assets/stripe-credit-card-c690d3d4.js b/public/build/assets/stripe-credit-card-ce33996a.js similarity index 83% rename from public/build/assets/stripe-credit-card-c690d3d4.js rename to public/build/assets/stripe-credit-card-ce33996a.js index 4174085eb4a0..2b636374f5fd 100644 --- a/public/build/assets/stripe-credit-card-c690d3d4.js +++ b/public/build/assets/stripe-credit-card-ce33996a.js @@ -1,4 +1,4 @@ -/** +import{w as l}from"./wait-d71d9fed.js";/** * Invoice Ninja (https://invoiceninja.com) * * @link https://github.com/invoiceninja/invoiceninja source repository @@ -6,4 +6,4 @@ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * * @license https://www.elastic.co/licensing/elastic-license - */class l{constructor(e,t,n,o){this.key=e,this.secret=t,this.onlyAuthorization=n,this.stripeConnect=o}setupStripe(){return this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this.elements=this.stripe.elements(),this}createElement(){var e;return this.cardElement=this.elements.create("card",{hidePostalCode:((e=document.querySelector("meta[name=stripe-require-postal-code]"))==null?void 0:e.content)==="0",value:{postalCode:document.querySelector("meta[name=client-postal-code]").content},hideIcon:!1}),this}mountCardElement(){return this.cardElement.mount("#card-element"),this}completePaymentUsingToken(){let e=document.querySelector("input[name=token]").value,t=document.getElementById("pay-now");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardPayment(this.secret,{payment_method:e}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n))}completePaymentWithoutToken(){let e=document.getElementById("pay-now");this.payNowButton=e,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden");let t=document.getElementById("cardholder-name");this.stripe.handleCardPayment(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:t.value}}}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n))}handleSuccess(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);let t=document.querySelector('input[name="token-billing-checkbox"]:checked');t&&(document.querySelector('input[name="store_card"]').value=t.value),document.getElementById("server-response").submit()}handleFailure(e){let t=document.getElementById("errors");t.textContent="",t.textContent=e,t.hidden=!1,this.payNowButton.disabled=!1,this.payNowButton.querySelector("svg").classList.add("hidden"),this.payNowButton.querySelector("span").classList.remove("hidden")}handleAuthorization(){let e=document.getElementById("cardholder-name"),t=document.getElementById("authorize-card");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardSetup(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:e.value}}}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccessfulAuthorization(n))}handleSuccessfulAuthorization(e){document.getElementById("gateway_response").value=JSON.stringify(e.setupIntent),document.getElementById("server_response").submit()}handle(){this.setupStripe(),this.onlyAuthorization?(this.createElement().mountCardElement(),document.getElementById("authorize-card").addEventListener("click",()=>this.handleAuthorization())):(Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(e=>e.addEventListener("click",t=>{document.getElementById("stripe--payment-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token})),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",e=>{document.getElementById("stripe--payment-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value=""}),this.createElement().mountCardElement(),document.getElementById("pay-now").addEventListener("click",()=>{try{return document.querySelector("input[name=token]").value?this.completePaymentUsingToken():this.completePaymentWithoutToken()}catch(e){console.log(e.message)}}))}}Livewire.hook("component.init",()=>{var a,i,s,d;console.log("running now");const r=((a=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:a.content)??"",e=((i=document.querySelector('meta[name="stripe-secret"]'))==null?void 0:i.content)??"",t=((s=document.querySelector('meta[name="only-authorization"]'))==null?void 0:s.content)??"",n=((d=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:d.content)??"";let o=new l(r,e,t,n);o.handle(),document.addEventListener("livewire:init",()=>{Livewire.on("passed-required-fields-check",()=>o.handle())})}); + */class c{constructor(e,t,n,r){this.key=e,this.secret=t,this.onlyAuthorization=n,this.stripeConnect=r}setupStripe(){return this.stripeConnect?this.stripe=Stripe(this.key,{stripeAccount:this.stripeConnect}):this.stripe=Stripe(this.key),this.elements=this.stripe.elements(),this}createElement(){var e;return this.cardElement=this.elements.create("card",{hidePostalCode:((e=document.querySelector("meta[name=stripe-require-postal-code]"))==null?void 0:e.content)==="0",value:{postalCode:document.querySelector("meta[name=client-postal-code]").content},hideIcon:!1}),this}mountCardElement(){return this.cardElement.mount("#card-element"),this}completePaymentUsingToken(){let e=document.querySelector("input[name=token]").value,t=document.getElementById("pay-now");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardPayment(this.secret,{payment_method:e}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n))}completePaymentWithoutToken(){let e=document.getElementById("pay-now");this.payNowButton=e,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden");let t=document.getElementById("cardholder-name");this.stripe.handleCardPayment(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:t.value}}}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccess(n))}handleSuccess(e){document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.paymentIntent);let t=document.querySelector('input[name="token-billing-checkbox"]:checked');t&&(document.querySelector('input[name="store_card"]').value=t.value),document.getElementById("server-response").submit()}handleFailure(e){let t=document.getElementById("errors");t.textContent="",t.textContent=e,t.hidden=!1,this.payNowButton.disabled=!1,this.payNowButton.querySelector("svg").classList.add("hidden"),this.payNowButton.querySelector("span").classList.remove("hidden")}handleAuthorization(){let e=document.getElementById("cardholder-name"),t=document.getElementById("authorize-card");this.payNowButton=t,this.payNowButton.disabled=!0,this.payNowButton.querySelector("svg").classList.remove("hidden"),this.payNowButton.querySelector("span").classList.add("hidden"),this.stripe.handleCardSetup(this.secret,this.cardElement,{payment_method_data:{billing_details:{name:e.value}}}).then(n=>n.error?this.handleFailure(n.error.message):this.handleSuccessfulAuthorization(n))}handleSuccessfulAuthorization(e){document.getElementById("gateway_response").value=JSON.stringify(e.setupIntent),document.getElementById("server_response").submit()}handle(){this.setupStripe(),this.onlyAuthorization?(this.createElement().mountCardElement(),document.getElementById("authorize-card").addEventListener("click",()=>this.handleAuthorization())):(Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(e=>e.addEventListener("click",t=>{document.getElementById("stripe--payment-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token})),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",e=>{document.getElementById("stripe--payment-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value=""}),this.createElement().mountCardElement(),document.getElementById("pay-now").addEventListener("click",()=>{try{return document.querySelector("input[name=token]").value?this.completePaymentUsingToken():this.completePaymentWithoutToken()}catch(e){console.log(e.message)}}))}}l("#stripe-credit-card-payment").then(()=>{var a,s,i,d;const o=((a=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:a.content)??"",e=((s=document.querySelector('meta[name="stripe-secret"]'))==null?void 0:s.content)??"",t=((i=document.querySelector('meta[name="only-authorization"]'))==null?void 0:i.content)??"",n=((d=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:d.content)??"";new c(o,e,t,n).handle()}); diff --git a/public/build/assets/wait-d71d9fed.js b/public/build/assets/wait-d71d9fed.js new file mode 100644 index 000000000000..1bc4888178d9 --- /dev/null +++ b/public/build/assets/wait-d71d9fed.js @@ -0,0 +1,9 @@ +/** + * Invoice Ninja (https://invoiceninja.com). + * + * @link https://github.com/invoiceninja/invoiceninja source repository + * + * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com) + * + * @license https://www.elastic.co/licensing/elastic-license + */function i(...e){return new Promise(t=>{if(!e.length){t([]);return}const r=e.map(n=>document.querySelector(n)).filter(Boolean);if(r.length===e.length){t(r);return}const o=new MutationObserver(()=>{const n=e.map(u=>document.querySelector(u)).filter(Boolean);n.length===e.length&&(o.disconnect(),t(n))});o.observe(document.body,{childList:!0,subtree:!0})})}export{i as w}; diff --git a/public/build/manifest.json b/public/build/manifest.json index 9c2de4865405..c1112662b1e7 100644 --- a/public/build/manifest.json +++ b/public/build/manifest.json @@ -8,6 +8,9 @@ "__commonjsHelpers-725317a4.js" ] }, + "_wait-d71d9fed.js": { + "file": "assets/wait-d71d9fed.js" + }, "resources/js/app.js": { "file": "assets/app-e0713224.js", "imports": [ @@ -71,7 +74,10 @@ "src": "resources/js/clients/payments/braintree-paypal.js" }, "resources/js/clients/payments/checkout-credit-card.js": { - "file": "assets/checkout-credit-card-8a04938c.js", + "file": "assets/checkout-credit-card-ba005c24.js", + "imports": [ + "_wait-d71d9fed.js" + ], "isEntry": true, "src": "resources/js/clients/payments/checkout-credit-card.js" }, @@ -121,7 +127,7 @@ "src": "resources/js/clients/payments/stripe-acss.js" }, "resources/js/clients/payments/stripe-alipay.js": { - "file": "assets/stripe-alipay-00a4a19f.js", + "file": "assets/stripe-alipay-010d5388.js", "isEntry": true, "src": "resources/js/clients/payments/stripe-alipay.js" }, @@ -146,7 +152,10 @@ "src": "resources/js/clients/payments/stripe-browserpay.js" }, "resources/js/clients/payments/stripe-credit-card.js": { - "file": "assets/stripe-credit-card-c690d3d4.js", + "file": "assets/stripe-credit-card-ce33996a.js", + "imports": [ + "_wait-d71d9fed.js" + ], "isEntry": true, "src": "resources/js/clients/payments/stripe-credit-card.js" }, diff --git a/resources/js/clients/payments/checkout-credit-card.js b/resources/js/clients/payments/checkout-credit-card.js index bb32fa7337ce..ea0a6df7d7bd 100644 --- a/resources/js/clients/payments/checkout-credit-card.js +++ b/resources/js/clients/payments/checkout-credit-card.js @@ -5,64 +5,70 @@ * * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * - * @license https://www.elastic.co/licensing/elastic-license + * @license https://www.elastic.co/licensing/elastic-license */ +import { wait } from '../wait'; + class CheckoutCreditCard { constructor() { this.tokens = []; } - mountFrames() { - console.log('Mount checkout frames..'); - } - handlePaymentUsingToken(e) { document.getElementById('checkout--container').classList.add('hidden'); - document.getElementById('pay-now-with-token--container').classList.remove('hidden'); + document + .getElementById('pay-now-with-token--container') + .classList.remove('hidden'); document.getElementById('save-card--container').style.display = 'none'; - document - .querySelector('input[name=token]') - .value = e.target.dataset.token; + document.querySelector('input[name=token]').value = + e.target.dataset.token; } handlePaymentUsingCreditCard(e) { - document.getElementById('checkout--container').classList.remove('hidden'); - document.getElementById('pay-now-with-token--container').classList.add('hidden'); + document + .getElementById('checkout--container') + .classList.remove('hidden'); + document + .getElementById('pay-now-with-token--container') + .classList.add('hidden'); document.getElementById('save-card--container').style.display = 'grid'; - document - .querySelector('input[name=token]') - .value = ''; + document.querySelector('input[name=token]').value = ''; const payButton = document.getElementById('pay-button'); - - const publicKey = document.querySelector('meta[name="public-key"]').content ?? ''; + + const publicKey = + document.querySelector('meta[name="public-key"]').content ?? ''; const form = document.getElementById('payment-form'); Frames.init(publicKey); - Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED, function (event) { - payButton.disabled = !Frames.isCardValid(); - }); + Frames.addEventHandler( + Frames.Events.CARD_VALIDATION_CHANGED, + function (event) { + payButton.disabled = !Frames.isCardValid(); + } + ); - Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, function (event) { - payButton.disabled = false; - }); + Frames.addEventHandler( + Frames.Events.CARD_TOKENIZATION_FAILED, + function (event) { + payButton.disabled = false; + } + ); Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, function (event) { payButton.disabled = true; - document.querySelector( - 'input[name="gateway_response"]' - ).value = JSON.stringify(event); + document.querySelector('input[name="gateway_response"]').value = + JSON.stringify(event); - document.querySelector( - 'input[name="store_card"]' - ).value = document.querySelector( - 'input[name=token-billing-checkbox]:checked' - ).value; + document.querySelector('input[name="store_card"]').value = + document.querySelector( + 'input[name=token-billing-checkbox]:checked' + ).value; document.getElementById('server-response').submit(); }); @@ -87,9 +93,11 @@ class CheckoutCreditCard { handle() { this.handlePaymentUsingCreditCard(); - Array - .from(document.getElementsByClassName('toggle-payment-with-token')) - .forEach((element) => element.addEventListener('click', this.handlePaymentUsingToken)); + Array.from( + document.getElementsByClassName('toggle-payment-with-token') + ).forEach((element) => + element.addEventListener('click', this.handlePaymentUsingToken) + ); document .getElementById('toggle-payment-with-credit-card') @@ -101,4 +109,6 @@ class CheckoutCreditCard { } } -new CheckoutCreditCard().handle(); +wait('#checkout-credit-card-payment').then(() => + new CheckoutCreditCard().handle() +); diff --git a/resources/js/clients/payments/stripe-alipay.js b/resources/js/clients/payments/stripe-alipay.js index 9b902a7dee35..a806b4c06da8 100644 --- a/resources/js/clients/payments/stripe-alipay.js +++ b/resources/js/clients/payments/stripe-alipay.js @@ -5,7 +5,7 @@ * * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * - * @license https://www.elastic.co/licensing/elastic-license + * @license https://www.elastic.co/licensing/elastic-license */ class ProcessAlipay { @@ -17,57 +17,66 @@ class ProcessAlipay { } setupStripe = () => { + if (this.stripeConnect) { + // this.stripe.stripeAccount = this.stripeConnect; - if (this.stripeConnect){ - // this.stripe.stripeAccount = this.stripeConnect; - - this.stripe = Stripe(this.key, { - stripeAccount: this.stripeConnect, - }); - - } - else { + this.stripe = Stripe(this.key, { + stripeAccount: this.stripeConnect, + }); + } else { this.stripe = Stripe(this.key); } - return this; }; async handle() { + document + .getElementById('pay-now') + .addEventListener('click', async (e) => { + document.getElementById('pay-now').disabled = true; + document + .querySelector('#pay-now > svg') + .classList.add('hidden'); + document + .querySelector('#pay-now > span') + .classList.remove('hidden'); - document.getElementById('pay-now').addEventListener('click', async (e) => { - document.getElementById('pay-now').disabled = true; - document.querySelector('#pay-now > svg').classList.add('hidden'); - document.querySelector('#pay-now > span').classList.remove('hidden'); - - const { error } = await this.stripe.confirmAlipayPayment(document.querySelector('meta[name=ci_intent]').content, { - // Return URL where the customer should be redirected after the authorization - return_url: `${document.querySelector('meta[name=return_url]').content}`, - }); + const { error } = await this.stripe.confirmAlipayPayment( + document.querySelector('meta[name=ci_intent]').content, + { + // Return URL where the customer should be redirected after the authorization + return_url: `${ + document.querySelector('meta[name=return_url]') + .content + }`, + } + ); document.getElementById('pay-now').disabled = false; - document.querySelector('#pay-now > svg').classList.remove('hidden'); - document.querySelector('#pay-now > span').classList.add('hidden'); + document + .querySelector('#pay-now > svg') + .classList.remove('hidden'); + document + .querySelector('#pay-now > span') + .classList.add('hidden'); if (error) { - this.errors.textContent = ''; this.errors.textContent = result.error.message; this.errors.hidden = false; - } }); - } } -const publishableKey = document.querySelector( - 'meta[name="stripe-publishable-key"]' -)?.content ?? ''; +wait('#stripe-alipay-payment').then(() => { + const publishableKey = + document.querySelector('meta[name="stripe-publishable-key"]') + ?.content ?? ''; -const stripeConnect = document.querySelector( - 'meta[name="stripe-account-id"]' -)?.content ?? ''; + const stripeConnect = + document.querySelector('meta[name="stripe-account-id"]')?.content ?? ''; -new ProcessAlipay(publishableKey, stripeConnect).setupStripe().handle(); + new ProcessAlipay(publishableKey, stripeConnect).setupStripe().handle(); +}); diff --git a/resources/js/clients/payments/stripe-browserpay.js b/resources/js/clients/payments/stripe-browserpay.js index dff741ddc63a..afdec08afb42 100644 --- a/resources/js/clients/payments/stripe-browserpay.js +++ b/resources/js/clients/payments/stripe-browserpay.js @@ -8,6 +8,8 @@ * @license https://www.elastic.co/licensing/elastic-license */ +import { wait } from '../wait'; + class StripeBrowserPay { constructor() { this.clientSecret = document.querySelector( @@ -142,4 +144,4 @@ class StripeBrowserPay { } } -new StripeBrowserPay().handle(); +wait('#stripe-browserpay-payment').then(() => new StripeBrowserPay().handle()) diff --git a/resources/js/clients/payments/stripe-credit-card.js b/resources/js/clients/payments/stripe-credit-card.js index cf330538d896..659067200fbe 100644 --- a/resources/js/clients/payments/stripe-credit-card.js +++ b/resources/js/clients/payments/stripe-credit-card.js @@ -8,6 +8,8 @@ * @license https://www.elastic.co/licensing/elastic-license */ +import { wait } from '../wait'; + class StripeCreditCard { constructor(key, secret, onlyAuthorization, stripeConnect) { this.key = key; @@ -17,15 +19,11 @@ class StripeCreditCard { } setupStripe() { - if (this.stripeConnect) { - this.stripe = Stripe(this.key, { stripeAccount: this.stripeConnect, }); - - } - else { + } else { this.stripe = Stripe(this.key); } @@ -36,9 +34,13 @@ class StripeCreditCard { createElement() { this.cardElement = this.elements.create('card', { - hidePostalCode: document.querySelector('meta[name=stripe-require-postal-code]')?.content === "0", + hidePostalCode: + document.querySelector('meta[name=stripe-require-postal-code]') + ?.content === '0', value: { - postalCode: document.querySelector('meta[name=client-postal-code]').content, + postalCode: document.querySelector( + 'meta[name=client-postal-code]' + ).content, }, hideIcon: false, }); @@ -103,9 +105,8 @@ class StripeCreditCard { } handleSuccess(result) { - document.querySelector( - 'input[name="gateway_response"]' - ).value = JSON.stringify(result.paymentIntent); + document.querySelector('input[name="gateway_response"]').value = + JSON.stringify(result.paymentIntent); let tokenBillingCheckbox = document.querySelector( 'input[name="token-billing-checkbox"]:checked' @@ -177,69 +178,74 @@ class StripeCreditCard { return this.handleAuthorization(); }); } else { - Array - .from(document.getElementsByClassName('toggle-payment-with-token')) - .forEach((element) => element.addEventListener('click', (element) => { - document.getElementById('stripe--payment-container').classList.add('hidden'); - document.getElementById('save-card--container').style.display = 'none'; - document.querySelector('input[name=token]').value = element.target.dataset.token; - })); + Array.from( + document.getElementsByClassName('toggle-payment-with-token') + ).forEach((element) => + element.addEventListener('click', (element) => { + document + .getElementById('stripe--payment-container') + .classList.add('hidden'); + document.getElementById( + 'save-card--container' + ).style.display = 'none'; + document.querySelector('input[name=token]').value = + element.target.dataset.token; + }) + ); document .getElementById('toggle-payment-with-credit-card') .addEventListener('click', (element) => { - document.getElementById('stripe--payment-container').classList.remove('hidden'); - document.getElementById('save-card--container').style.display = 'grid'; - document.querySelector('input[name=token]').value = ""; + document + .getElementById('stripe--payment-container') + .classList.remove('hidden'); + document.getElementById( + 'save-card--container' + ).style.display = 'grid'; + document.querySelector('input[name=token]').value = ''; }); this.createElement().mountCardElement(); - document - .getElementById('pay-now') - .addEventListener('click', () => { + document.getElementById('pay-now').addEventListener('click', () => { + try { + let tokenInput = + document.querySelector('input[name=token]'); - try { - let tokenInput = document.querySelector('input[name=token]'); - - if (tokenInput.value) { - return this.completePaymentUsingToken(); - } - - return this.completePaymentWithoutToken(); - } catch (error) { - console.log(error.message); + if (tokenInput.value) { + return this.completePaymentUsingToken(); } - }); + return this.completePaymentWithoutToken(); + } catch (error) { + console.log(error.message); + } + }); } } } - -Livewire.hook('component.init', () => { - - console.log("running now"); - +wait('#stripe-credit-card-payment').then(() => { const publishableKey = - document.querySelector('meta[name="stripe-publishable-key"]')?.content ?? ''; + document.querySelector('meta[name="stripe-publishable-key"]') + ?.content ?? ''; const secret = document.querySelector('meta[name="stripe-secret"]')?.content ?? ''; const onlyAuthorization = - document.querySelector('meta[name="only-authorization"]')?.content ?? ''; + document.querySelector('meta[name="only-authorization"]')?.content ?? + ''; const stripeConnect = document.querySelector('meta[name="stripe-account-id"]')?.content ?? ''; - let s = new StripeCreditCard(publishableKey, secret, onlyAuthorization, stripeConnect); + let s = new StripeCreditCard( + publishableKey, + secret, + onlyAuthorization, + stripeConnect + ); s.handle(); - - document.addEventListener('livewire:init', () => { - - Livewire.on('passed-required-fields-check', () => s.handle()); - - }); -}) \ No newline at end of file +}); diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php deleted file mode 100644 index c48f186b45c6..000000000000 --- a/resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php +++ /dev/null @@ -1,297 +0,0 @@ -
- @if($stripe_account_id) - - - @else - - @endif - - - - - - -
- @csrf - - - - - - - - -
- - - - @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')]) - {{ ctrans('texts.credit_card') }} - @endcomponent - - @include('portal.ninja2020.gateways.includes.payment_details') - - @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')]) - - - @endcomponent - - @include('portal.ninja2020.gateways.stripe.includes.card_widget') - @include('portal.ninja2020.gateways.includes.pay_now') - - - @assets - - @endassets - - @script - - @endscript -
\ No newline at end of file