Mirrors/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-09-20 16:31:33 +02:00
Code Issues Releases Activity

Stripe (CC): Add spinner for form processing

Browse Source
This commit is contained in:
Benjamin Beganović 2020-08-24 08:25:12 +02:00
parent f8c1a0c031
commit e518b3ca8d
3 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/clients/payments/process.js vendored
View File

@ -34,7 +34,11 @@ class ProcessStripePayment {
}
completePaymentUsingToken() {
let payNowButton = document.getElementById("pay-now-with-token");
let payNowButton = document.getElementById('pay-now-with-token');
this.payNowButton = payNowButton;
payNowButton.querySelector('svg').classList.remove('hidden');
payNowButton.disabled = true;
this.stripe
.handleCardPayment(payNowButton.dataset.secret, {
@ -82,6 +86,8 @@ class ProcessStripePayment {
tokenBillingCheckbox.checked;
}
this.payNowButton.querySelector('svg').classList.add('hidden');
document.getElementById("server-response").submit();
}
@ -91,6 +97,9 @@ class ProcessStripePayment {
errors.textContent = "";
errors.textContent = message;
errors.hidden = false;
this.payNowButton.querySelector('svg').classList.add('hidden');
this.payNowButton.disabled = false;
}
handle() {

4
resources/sass/components/buttons.scss vendored
View File

@ -2,6 +2,10 @@
@apply rounded py-3 px-4 text-sm leading-4 transition duration-150 ease-in-out font-semibold;
}
button:disabled {
@apply opacity-50 cursor-not-allowed;
}
.button-primary {
@apply bg-blue-500 text-white;

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

@ -47,7 +47,11 @@
data-secret="{{ $intent->client_secret }}"
data-token="{{ $token->token }}"
id="pay-now-with-token"
class="button button-primary">
class="button button-primary inline-flex items-center">
<svg class="hidden animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
{{ ctrans('texts.pay_now') }}
</button>
</div>