Mollie: New payment flow (#73)

* pass livewirePaymentView & processPaymentView thru base driver

* add paymentData to the interface

* mollie

* credit card

app/PaymentDrivers/Mollie/Bancontact.php

@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class Bancontact implements MethodInterface
+class Bancontact implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -209,4 +210,24 @@ class Bancontact implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }

app/PaymentDrivers/Mollie/BankTransfer.php

@@ -19,6 +19,7 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Exception;
@@ -28,7 +29,7 @@ use Illuminate\Routing\Redirector;
 use Illuminate\View\View;
 use Mollie\Api\Resources\Payment as ResourcesPayment;
 
-class BankTransfer implements MethodInterface
+class BankTransfer implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -206,4 +207,24 @@ class BankTransfer implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }

app/PaymentDrivers/Mollie/CreditCard.php

@@ -10,12 +10,13 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Contracts\View\Factory;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\View\View;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     /**
      * @var MolliePaymentDriver
@@ -37,7 +38,7 @@ class CreditCard
      */
     public function paymentView(array $data)
     {
-        $data['gateway'] = $this->mollie;
+        $data = $this->paymentData($data);
 
         return render('gateways.mollie.credit_card.pay', $data);
     }
@@ -257,4 +258,22 @@ class CreditCard
     {
         return redirect()->route('client.payment_methods.index');
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.mollie.credit_card.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $data['gateway'] = $this->mollie;
+
+        return $data;
+    }
 }

app/PaymentDrivers/Mollie/IDEAL.php

@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class IDEAL implements MethodInterface
+class IDEAL implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -209,4 +210,24 @@ class IDEAL implements MethodInterface
     {
         return $this->processSuccessfulPayment($payment, 'open');
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }

app/PaymentDrivers/Mollie/KBC.php

@@ -19,13 +19,14 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\Common\MethodInterface;
 use App\PaymentDrivers\MolliePaymentDriver;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
 
-class KBC implements MethodInterface
+class KBC implements MethodInterface, LivewireMethodInterface
 {
     protected MolliePaymentDriver $mollie;
 
@@ -193,4 +194,24 @@ class KBC implements MethodInterface
 
         return redirect()->route('client.payments.show', ['payment' => $this->mollie->encodePrimaryKey($payment_record->id)]);
     }
+    
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        // Doesn't support, it's offsite payment method.
+
+        return '';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->paymentView($data);
+
+        return $data;
+    }
 }

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

@@ -8,6 +8,8 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { wait, instant } from '../wait';
+
 class _Mollie {
     constructor() {
         this.mollie = Mollie(
@@ -166,4 +168,9 @@ class _Mollie {
     }
 }
 
-new _Mollie().handle();
+
+function boot() {
+    new _Mollie().handle();
+}
+
+instant() ? boot(): wait('#mollie-credit-card-payment').then(() => boot());

resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php

@@ -4,6 +4,7 @@ ctrans('texts.credit_card')])
 @section('gateway_head')
     <meta name="mollie-testmode" content="{{ $gateway->company_gateway->getConfigField('testMode') }}">
     <meta name="mollie-profileId" content="{{ $gateway->company_gateway->getConfigField('profileId') }}">
+    <meta name="instant-payment" content="yes">
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     

resources/views/portal/ninja2020/gateways/mollie/credit_card/pay_livewire.blade.php

@@ -0,0 +1,87 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden py-5 bg-white sm:gap-4"
+    id="mollie-credit-card-payment">
+
+    <meta name="mollie-testmode" content="{{ $gateway->company_gateway->getConfigField('testMode') }}">
+    <meta name="mollie-profileId" content="{{ $gateway->company_gateway->getConfigField('profileId') }}">
+
+    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+
+    <script src="{{ asset('build/public/js/card-js.min.js/card-js.min.js') }}"></script>
+    <link href="{{ asset('build/public/css/card-js.min.css/card-js.min.css') }}" rel="stylesheet" type="text/css">
+
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card">
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+
+        <input type="hidden" name="token">
+    </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') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+        @if (count($tokens) > 0)
+            @foreach ($tokens as $token)
+                <label class="mr-4">
+                    <input type="radio" data-token="{{ $token->token }}" name="payment-type"
+                        class="form-radio cursor-pointer toggle-payment-with-token" />
+                    <span class="ml-1 cursor-pointer">**** {{ $token->meta?->last4 }}</span>
+                </label>
+            @endforeach
+        @endif
+
+        <label>
+            <input type="radio" id="toggle-payment-with-credit-card" class="form-radio cursor-pointer" name="payment-type"
+                checked />
+            <span class="ml-1 cursor-pointer">{{ __('texts.new_card') }}</span>
+        </label>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element-single')
+        <div class="flex flex-col" id="mollie--payment-container">
+            <label for="card-number">
+                <span class="text-xs text-gray-900 uppercase">{{ ctrans('texts.card_number') }}</span>
+                <div class="input w-full" type="text" id="card-number"></div>
+                <div class="text-xs text-red-500 mt-1 block" id="card-number-error"></div>
+            </label>
+
+            <label for="card-holder" class="block mt-2">
+                <span class="text-xs text-gray-900 uppercase">{{ ctrans('texts.name') }}</span>
+                <div class="input w-full" type="text" id="card-holder"></div>
+                <div class="text-xs text-red-500 mt-1 block" id="card-holder-error"></div>
+            </label>
+
+            <div class="grid grid-cols-12 gap-4 mt-2">
+                <label for="expiry-date" class="col-span-4">
+                    <span class="text-xs text-gray-900 uppercase">{{ ctrans('texts.expiry_date') }}</span>
+                    <div class="input w-full" type="text" id="expiry-date"></div>
+                    <div class="text-xs text-red-500 mt-1 block" id="expiry-date-error"></div>
+                </label>
+
+                <label for="cvv" class="col-span-8">
+                    <span class="text-xs text-gray-900 uppercase">{{ ctrans('texts.cvv') }}</span>
+                    <div class="input w-full border" type="text" id="cvv"></div>
+                    <div class="text-xs text-red-500 mt-1 block" id="cvv-error"></div>
+                </label>
+            </div>
+        </div>
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.save_card')
+    @include('portal.ninja2020.gateways.includes.pay_now')
+</div>
+
+@assets
+    <script src="https://js.mollie.com/v1/mollie.js"></script>
+    @vite('resources/js/clients/payments/mollie-credit-card.js')
+@endassets