Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-06-23 20:00:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

working on payment flow

Browse Source
This commit is contained in:
David Bomba 2024-07-01 07:44:03 +10:00
parent c7cc0e084f
commit a83cb0c3b2
4 changed files with 43 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/build/assets/stripe-credit-card-75322a3b.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 l{constructor(e,t,n,d){this.key=e,this.secret=t,this.onlyAuthorization=n,this.stripeConnect=d}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)}}))}}var o;const c=((o=document.querySelector('meta[name="stripe-publishable-key"]'))==null?void 0:o.content)??"";var r;const u=((r=document.querySelector('meta[name="stripe-secret"]'))==null?void 0:r.content)??"";var a;const m=((a=document.querySelector('meta[name="only-authorization"]'))==null?void 0:a.content)??"";var s;const h=((s=document.querySelector('meta[name="stripe-account-id"]'))==null?void 0:s.content)??"";let i=new l(c,u,m,h);i.handle();document.addEventListener("livewire:init",()=>{Livewire.on("passed-required-fields-check",()=>i.handle())});

2
public/build/manifest.json
View File

@ -146,7 +146,7 @@
"src": "resources/js/clients/payments/stripe-browserpay.js" "src": "resources/js/clients/payments/stripe-browserpay.js"
}, },
"resources/js/clients/payments/stripe-credit-card.js": { "resources/js/clients/payments/stripe-credit-card.js": {
"file": "assets/stripe-credit-card-75322a3b.js", "file": "assets/stripe-credit-card-c690d3d4.js",
"isEntry": true, "isEntry": true,
"src": "resources/js/clients/payments/stripe-credit-card.js" "src": "resources/js/clients/payments/stripe-credit-card.js"
}, },

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

@ -5,7 +5,7 @@
* *
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * @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 StripeCreditCard { class StripeCreditCard {
@ -18,17 +18,17 @@ class StripeCreditCard {
setupStripe() { setupStripe() {
if (this.stripeConnect){ if (this.stripeConnect) {
this.stripe = Stripe(this.key, { this.stripe = Stripe(this.key, {
stripeAccount: this.stripeConnect, stripeAccount: this.stripeConnect,
}); });
} }
else { else {
this.stripe = Stripe(this.key); this.stripe = Stripe(this.key);
} }
this.elements = this.stripe.elements(); this.elements = this.stripe.elements();
return this; return this;
@ -90,7 +90,7 @@ class StripeCreditCard {
this.stripe this.stripe
.handleCardPayment(this.secret, this.cardElement, { .handleCardPayment(this.secret, this.cardElement, {
payment_method_data: { payment_method_data: {
billing_details: {name: cardHolderName.value}, billing_details: { name: cardHolderName.value },
}, },
}) })
.then((result) => { .then((result) => {
@ -145,7 +145,7 @@ class StripeCreditCard {
this.stripe this.stripe
.handleCardSetup(this.secret, this.cardElement, { .handleCardSetup(this.secret, this.cardElement, {
payment_method_data: { payment_method_data: {
billing_details: {name: cardHolderName.value}, billing_details: { name: cardHolderName.value },
}, },
}) })
.then((result) => { .then((result) => {
@ -199,41 +199,47 @@ class StripeCreditCard {
.getElementById('pay-now') .getElementById('pay-now')
.addEventListener('click', () => { .addEventListener('click', () => {
try { try {
let tokenInput = document.querySelector('input[name=token]'); let tokenInput = document.querySelector('input[name=token]');
if (tokenInput.value) { if (tokenInput.value) {
return this.completePaymentUsingToken(); return this.completePaymentUsingToken();
}
return this.completePaymentWithoutToken();
} catch (error) {
console.log(error.message);
} }
return this.completePaymentWithoutToken();
}catch(error){
console.log(error.message);
}
}); });
} }
} }
} }
const publishableKey =
document.querySelector('meta[name="stripe-publishable-key"]')?.content ?? '';
const secret = Livewire.hook('component.init', () => {
document.querySelector('meta[name="stripe-secret"]')?.content ?? '';
const onlyAuthorization = console.log("running now");
document.querySelector('meta[name="only-authorization"]')?.content ?? '';
const stripeConnect = const publishableKey =
document.querySelector('meta[name="stripe-account-id"]')?.content ?? ''; document.querySelector('meta[name="stripe-publishable-key"]')?.content ?? '';
let s = new StripeCreditCard(publishableKey, secret, onlyAuthorization, stripeConnect); const secret =
document.querySelector('meta[name="stripe-secret"]')?.content ?? '';
s.handle(); const onlyAuthorization =
document.querySelector('meta[name="only-authorization"]')?.content ?? '';
document.addEventListener('livewire:init', () => { const stripeConnect =
document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
Livewire.on('passed-required-fields-check', () => s.handle()); let s = new StripeCreditCard(publishableKey, secret, onlyAuthorization, stripeConnect);
}); s.handle();
document.addEventListener('livewire:init', () => {
Livewire.on('passed-required-fields-check', () => s.handle());
});
})

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

@ -1,23 +1,5 @@
<style>
.spinner {
/* Simple spinner styling */
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
<div> <div>
@if($stripe_account_id) @if($stripe_account_id)
<meta name="stripe-account-id" content="{{ $stripe_account_id }}"> <meta name="stripe-account-id" content="{{ $stripe_account_id }}">
<meta name="stripe-publishable-key" content="{{ config('ninja.ninja_stripe_publishable_key') }}"> <meta name="stripe-publishable-key" content="{{ config('ninja.ninja_stripe_publishable_key') }}">
@ -85,10 +67,11 @@
@include('portal.ninja2020.gateways.stripe.includes.card_widget') @include('portal.ninja2020.gateways.stripe.includes.card_widget')
@include('portal.ninja2020.gateways.includes.pay_now') @include('portal.ninja2020.gateways.includes.pay_now')
@script @assets
<script src="https://js.stripe.com/v3/"></script> <script src="https://js.stripe.com/v3/"></script>
@endassets
@vite('resources/js/clients/payments/stripe-credit-card.js') @vite('resources/js/clients/payments/stripe-credit-card.js')
@endscript
</div> </div>