Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor context passing between methods and Livewire (#65)

Browse Source 
* 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
This commit is contained in:
Benjamin Beganović 2024-07-10 01:55:36 +02:00
parent 8d4ab0cd69
commit a4592d666b
16 changed files with 266 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/PaymentDrivers/CheckoutCom/CreditCard.php
View File

@ -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 = [

19
app/PaymentDrivers/CheckoutComPaymentDriver.php
View File

@ -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();
}
}

20
app/PaymentDrivers/Stripe/BrowserPay.php
View File

@ -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';
}
}

20
app/PaymentDrivers/Stripe/CreditCard.php
View File

@ -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();

25
app/PaymentDrivers/StripePaymentDriver.php
View File

@ -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
}
}

9
public/build/assets/checkout-credit-card-8a04938c.js vendored
View File

@ -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();

9
public/build/assets/checkout-credit-card-ba005c24.js vendored Normal file
View File

@ -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());

6
public/build/assets/stripe-alipay-00a4a19f.js → public/build/assets/stripe-alipay-010d5388.js vendored
View File

@ -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()});

4
public/build/assets/stripe-credit-card-c690d3d4.js → public/build/assets/stripe-credit-card-ce33996a.js vendored
View File

@ -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()});

9
public/build/assets/wait-d71d9fed.js vendored Normal file
View File

@ -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};

15
public/build/manifest.json
View File

@ -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"
},

78
resources/js/clients/payments/checkout-credit-card.js vendored
View File

@ -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()
);

73
resources/js/clients/payments/stripe-alipay.js vendored
View File

@ -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();
});

4
resources/js/clients/payments/stripe-browserpay.js vendored
View File

@ -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())

104
resources/js/clients/payments/stripe-credit-card.js vendored
View File

@ -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());
});
})
});

297
resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php
View File

@ -1,297 +0,0 @@
<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden py-5 bg-white sm:gap-4">
@if($stripe_account_id)
<meta name="stripe-account-id" content="{{ $stripe_account_id }}">
<meta name="stripe-publishable-key" content="{{ config('ninja.ninja_stripe_publishable_key') }}">
@else
<meta name="stripe-publishable-key" content="{{ $company_gateway->getPublishableKey() }}">
@endif
<meta name="stripe-secret" content="{{ $client_secret }}">
<meta name="only-authorization" content="">
<meta name="client-postal-code" content="{{ $client->postal_code ?? '' }}">
<meta name="stripe-require-postal-code" content="{{ $company_gateway->require_postal_code }}">
<form action="{{ route('client.payments.response') }}" method="post" id="server-response">
@csrf
<input type="hidden" name="gateway_response">
<input type="hidden" name="store_card" value="{{ $token_billing_string }}">
<input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
<input type="hidden" name="company_gateway_id" value="{{ $company_gateway->id }}">
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
<input type="hidden" name="token">
</form>
<div class="alert alert-failure mb-4" hidden id="errors"></div>
@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')])
<ul class="list-none">
@if(count($tokens) > 0)
@foreach($tokens as $token)
<li class="py-2 hover:text-white hover:bg-blue-600">
<label class="mr-4">
<input
type="radio"
data-token="{{ $token->token }}"
name="payment-type"
class="form-check-input text-indigo-600 rounded-full cursor-pointer toggle-payment-with-token toggle-payment-with-token"/>
<span class="ml-1 cursor-pointer">**** {{ $token->meta?->last4 }}</span>
</label>
</li>
@endforeach
@endisset
<li class="py-2 hover:text-white hover:bg-blue-600">
<label>
<input
type="radio"
id="toggle-payment-with-credit-card"
class="form-check-input text-indigo-600 rounded-full cursor-pointer"
name="payment-type"
checked/>
<span class="ml-1 cursor-pointer">{{ __('texts.new_card') }}</span>
</label>
</li>
</ul>
@endcomponent
@include('portal.ninja2020.gateways.stripe.includes.card_widget')
@include('portal.ninja2020.gateways.includes.pay_now')
@assets
<script src="https://js.stripe.com/v3/"></script>
@endassets
@script
<script>
const publishableKey =
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 ?? '';
const stripeConnect =
document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
var cardElement;
var stripe;
var elements;
function setupStripe() {
if (stripeConnect) {
stripe = Stripe(publishableKey, {
stripeAccount: stripeConnect,
});
}
else {
stripe = Stripe(publishableKey);
}
elements = stripe.elements();
}
function createElement() {
cardElement = elements.create('card', {
hidePostalCode: document.querySelector('meta[name=stripe-require-postal-code]')?.content === "0",
value: {
postalCode: document.querySelector('meta[name=client-postal-code]').content,
},
hideIcon: false,
});
}
function mountCardElement() {
cardElement.mount('#card-element');
}
function completePaymentUsingToken() {
let token = document.querySelector('input[name=token]').value;
let payNowButton = document.getElementById('pay-now');
payNowButton = payNowButton;
payNowButton.disabled = true;
payNowButton.querySelector('svg').classList.remove('hidden');
payNowButton.querySelector('span').classList.add('hidden');
stripe
.handleCardPayment(secret, {
payment_method: token,
})
.then((result) => {
if (result.error) {
return handleFailure(result.error.message);
}
return handleSuccess(result);
});
}
function completePaymentWithoutToken() {
let payNowButton = document.getElementById('pay-now');
payNowButton = payNowButton;
payNowButton.disabled = true;
payNowButton.querySelector('svg').classList.remove('hidden');
payNowButton.querySelector('span').classList.add('hidden');
let cardHolderName = document.getElementById('cardholder-name');
stripe
.handleCardPayment(secret, cardElement, {
payment_method_data: {
billing_details: { name: cardHolderName.value },
},
})
.then((result) => {
if (result.error) {
return handleFailure(result.error.message);
}
return handleSuccess(result);
});
}
function handleSuccess(result) {
document.querySelector(
'input[name="gateway_response"]'
).value = JSON.stringify(result.paymentIntent);
let tokenBillingCheckbox = document.querySelector(
'input[name="token-billing-checkbox"]:checked'
);
if (tokenBillingCheckbox) {
document.querySelector('input[name="store_card"]').value =
tokenBillingCheckbox.value;
}
document.getElementById('server-response').submit();
}
function handleFailure(message) {
let payNowButton = document.getElementById('pay-now');
let errors = document.getElementById('errors');
errors.textContent = '';
errors.textContent = message;
errors.hidden = false;
payNowButton.disabled = false;
payNowButton.querySelector('svg').classList.add('hidden');
payNowButton.querySelector('span').classList.remove('hidden');
}
function handleAuthorization() {
let cardHolderName = document.getElementById('cardholder-name');
let payNowButton = document.getElementById('authorize-card');
payNowButton = payNowButton;
payNowButton.disabled = true;
payNowButton.querySelector('svg').classList.remove('hidden');
payNowButton.querySelector('span').classList.add('hidden');
stripe
.handleCardSetup(secret, cardElement, {
payment_method_data: {
billing_details: { name: cardHolderName.value },
},
})
.then((result) => {
if (result.error) {
return handleFailure(result.error.message);
}
return handleSuccessfulAuthorization(result);
});
}
function handleSuccessfulAuthorization(result) {
document.getElementById('gateway_response').value = JSON.stringify(
result.setupIntent
);
document.getElementById('server_response').submit();
}
setupStripe();
if (onlyAuthorization) {
createElement();
mountCardElement();
document
.getElementById('authorize-card')
.addEventListener('click', () => {
return 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;
}));
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 = "";
});
createElement();
mountCardElement();
document
.getElementById('pay-now')
.addEventListener('click', () => {
try {
let tokenInput = document.querySelector('input[name=token]');
if (tokenInput.value) {
return completePaymentUsingToken();
}
return completePaymentWithoutToken();
} catch (error) {
console.log(error.message);
}
});
}
</script>
@endscript
</div>