Stripe: Pay with credit card

This commit is contained in:
Benjamin Beganović 2020-09-29 12:46:28 +02:00
parent 72f915ef0a
commit 58a3cc69a9
2 changed files with 19 additions and 12 deletions

View File

@ -39,7 +39,8 @@ class ProcessStripePayment {
this.payNowButton = payNowButton;
this.payNowButton.disabled = true;
processingOverlay(true);
this.payNowButton.querySelector('svg').classList.remove('hidden');
this.payNowButton.querySelector('span').classList.add('hidden');
this.stripe
.handleCardPayment(payNowButton.dataset.secret, {
@ -57,11 +58,14 @@ class ProcessStripePayment {
completePaymentWithoutToken() {
let payNowButton = document.getElementById('pay-now');
this.payNowButton = payNowButton;
this.payNowButton.disabled = true;
this.payNowButton.querySelector('svg').classList.remove('hidden');
this.payNowButton.querySelector('span').classList.add('hidden');
let cardHolderName = document.getElementById('cardholder-name');
processingOverlay(true);
this.stripe
.handleCardPayment(payNowButton.dataset.secret, this.cardElement, {
payment_method_data: {
@ -82,8 +86,6 @@ class ProcessStripePayment {
}
handleSuccess(result) {
processingOverlay(false);
document.querySelector(
'input[name="gateway_response"]'
).value = JSON.stringify(result.paymentIntent);
@ -107,8 +109,9 @@ class ProcessStripePayment {
errors.textContent = message;
errors.hidden = false;
processingOverlay(false);
this.payNowButton.disabled = false;
this.payNowButton.querySelector('svg').classList.add('hidden');
this.payNowButton.querySelector('span').classList.remove('hidden');
}
handle() {

View File

@ -69,11 +69,11 @@
data-token="{{ $token->token }}"
id="pay-now-with-token"
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') }}
<svg class="animate-spin h-5 w-5 text-white hidden" 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>
<span>{{ __('texts.save') }}</span>
</button>
</div>
@else
@ -131,7 +131,11 @@
id="pay-now"
data-secret="{{ $intent->client_secret }}"
class="button button-primary">
{{ ctrans('texts.pay_now') }}
<svg class="animate-spin h-5 w-5 text-white hidden" 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>
<span>{{ __('texts.save') }}</span>
</button>
</div>
@endif