stripe: pay with credit card token & credit

This commit is contained in:
Benjamin Beganović 2020-10-20 15:19:21 +02:00
parent 6ae18dac6f
commit 9420f23081
6 changed files with 43 additions and 20 deletions

View File

@ -44,8 +44,8 @@ class StripeCreditCard {
this.payNowButton.querySelector('span').classList.add('hidden');
this.stripe
.handleCardPayment(payNowButton.dataset.secret, {
payment_method: payNowButton.dataset.token,
.handleCardPayment(this.secret, {
payment_method: this.token,
})
.then((result) => {
if (result.error) {
@ -114,7 +114,7 @@ class StripeCreditCard {
handle() {
this.setupStripe();
if (this.usingToken) {
if (this.token) {
document
.getElementById('pay-now-with-token')
.addEventListener('click', () => {
@ -122,7 +122,7 @@ class StripeCreditCard {
});
}
if (!this.usingToken) {
if (!this.token) {
this.createElement().mountCardElement();
document.getElementById('pay-now').addEventListener('click', () => {

View File

@ -3287,4 +3287,6 @@ return [
'credit_message' => 'To view your credit for :amount, click the link below.',
'store_for_future_use' => 'Store for future use',
'pay_with_credit' => 'Pay with credit',
];

View File

@ -1,9 +1,13 @@
<div class="bg-white px-4 py-5 flex justify-end">
<button type="button" id="{{ $id ?? 'pay-now' }}" class="button button-primary bg-primary">
<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.pay_now') }}</span>
<button
@isset($form) form="{{ $form }}" @endisset
type="{{ $type ?? 'button' }}"
id="{{ $id ?? 'pay-now' }}"
class="button button-primary bg-primary">
<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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
</button>
</div>

View File

@ -2,7 +2,7 @@
@section('gateway_head')
<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
<meta name="stripe-token" content="{{ $token }}">
<meta name="stripe-token" content="{{ $token->token }}">
<meta name="stripe-secret" content="{{ $intent->client_secret }}">
@endsection
@ -17,12 +17,23 @@
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
</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') }} (Stripe)
@endcomponent
@include('portal.ninja2020.gateways.stripe.includes.card_widget')
@include('portal.ninja2020.gateways.includes.pay_now')
@include('portal.ninja2020.gateways.includes.payment_details')
@if((int)$total['amount_with_fee'] == 0)
@include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
@elseif($token)
@include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
@include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token'])
@else
@include('portal.ninja2020.gateways.stripe.includes.card_widget')
@include('portal.ninja2020.gateways.includes.pay_now')
@endif
@endsection
@section('gateway_footer')

View File

@ -3,6 +3,6 @@
<input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
</form>
<div class="bg-white px-4 py-5 flex justify-end">
<button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
</div>
@component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-with-credit', 'form' => 'credit-payment'])
{{ ctrans('texts.pay_with_credit') }}
@endcomponent

View File

@ -1,12 +1,18 @@
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
{{-- <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
{{ ctrans('texts.credit_card') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
</dd>
</div>
<div class="bg-white px-4 py-5 flex justify-end">
</div> --}}
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.credit_card')])
{{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
@endcomponent
{{-- <div class="bg-white px-4 py-5 flex justify-end">
<button type="button" data-secret="{{ $intent->client_secret }}" data-token="{{ $token->token }}" id="pay-now-with-token" class="button button-primary bg-primary inline-flex items-center">
<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>
@ -14,4 +20,4 @@
</svg>
<span>{{ __('texts.pay_now') }}</span>
</button>
</div>
</div> --}}