stripe: pay with credit card token & credit

resources/js/clients/payments/stripe-credit-card.js

@@ -44,8 +44,8 @@ class StripeCreditCard {
         this.payNowButton.querySelector('span').classList.add('hidden');
 
         this.stripe
-            .handleCardPayment(payNowButton.dataset.secret, {
+            .handleCardPayment(this.secret, {
-                payment_method: payNowButton.dataset.token,
+                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', () => {

resources/lang/en/texts.php

@@ -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',
 ];

resources/views/portal/ninja2020/gateways/includes/pay_now.blade.php

@@ -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">
+    <button 
-        <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">
+        @isset($form) form="{{ $form }}" @endisset 
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        type="{{ $type ?? 'button' }}" 
-            <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>
+        id="{{ $id ?? 'pay-now' }}" 
-        </svg>
+        class="button button-primary bg-primary">
-        <span>{{ __('texts.pay_now') }}</span>
+            <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>

resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php

@@ -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.payment_details')
-    @include('portal.ninja2020.gateways.includes.pay_now')
+
+    @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')

resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_credit.blade.php

@@ -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">
+@component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-with-credit', 'form' => 'credit-payment'])
-    <button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
+    {{ ctrans('texts.pay_with_credit') }}
-</div>
+@endcomponent

resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_token.blade.php

@@ -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> --}}
-<div class="bg-white px-4 py-5 flex justify-end">
+
+@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> --}}