Pay with saved credit card

app/PaymentDrivers/Mollie/CreditCard.php

@@ -6,6 +6,7 @@ use App\Exceptions\PaymentFailed;
 use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
 use App\Jobs\Mail\PaymentFailureMailer;
 use App\Jobs\Util\SystemLogger;
+use App\Models\ClientGatewayToken;
 use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
@@ -57,6 +58,41 @@ class CreditCard
             ->withData('gateway_type_id', GatewayType::CREDIT_CARD)
             ->withData('client_id', $this->mollie->client->id);
 
+        if (!empty($request->token)) {
+            try {
+                $cgt = ClientGatewayToken::where('token', $request->token)->firstOrFail();
+
+                $payment = $this->mollie->gateway->payments->create([
+                    'amount' => [
+                        'currency' => $this->mollie->client->currency()->code,
+                        'value' => $amount,
+                    ],
+                    'mandateId' => $request->token,
+                    'customerId' => $cgt->gateway_customer_reference,
+                    'sequenceType' => 'recurring',
+                    'description' => \sprintf('Hash: %s', $this->mollie->payment_hash->hash),
+                    'webhookUrl'  => 'https://invoiceninja.com',
+                ]);
+
+                if ($payment->status === 'paid') {
+                    $this->mollie->logSuccessfulGatewayResponse(
+                        ['response' => $payment, 'data' => $this->mollie->payment_hash],
+                        SystemLog::TYPE_MOLLIE
+                    );
+
+                    return $this->processSuccessfulPayment($payment);
+                }
+
+                if ($payment->status === 'open') {
+                    $this->mollie->payment_hash->withData('payment_id', $payment->id);
+
+                    return redirect($payment->getCheckoutUrl());
+                }
+            } catch (\Exception $e) {
+                return $this->processUnsuccessfulPayment($e);
+            }
+        }
+
         try {
             $data = [
                 'amount' => [
@@ -70,7 +106,7 @@ class CreditCard
                     'hash' => $this->mollie->payment_hash->hash,
                 ]),
                 'webhookUrl'  => 'https://invoiceninja.com',
-                'cardToken' => $request->token,
+                'cardToken' => $request->gateway_response,
             ];
 
             if ($request->shouldStoreToken()) {
@@ -117,7 +153,7 @@ class CreditCard
     {
         $payment_hash = $this->mollie->payment_hash;
 
-        if ($payment_hash->data->shouldStoreToken) {
+        if (property_exists($payment_hash->data, 'shouldStoreToken') && $payment_hash->data->shouldStoreToken) {
             try {
                 $mandates = \iterator_to_array($this->mollie->gateway->mandates->listForId($payment_hash->data->mollieCustomerId));
             } catch (\Mollie\Api\Exceptions\ApiException $e) {
@@ -135,7 +171,7 @@ class CreditCard
                 'token' => $mandates[0]->id,
                 'payment_method_id' => GatewayType::CREDIT_CARD,
                 'payment_meta' =>  $payment_meta,
-            ]);
+            ], ['gateway_customer_reference' => $payment_hash->data->mollieCustomerId]);
         }
 
         $data = [

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

@@ -47,7 +47,7 @@ ctrans('texts.credit_card')])
     @endcomponent
 
     @component('portal.ninja2020.components.general.card-element-single')
-        <div class="flex flex-col">
+        <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>
@@ -166,6 +166,12 @@ ctrans('texts.credit_card')])
             handlePayNowButton() {
                 document.getElementById('pay-now').disabled = true;
 
+                if (document.querySelector('input[name=token]').value !== '') {
+                    document.querySelector('input[name=gateway_response]').value = '';
+
+                    return document.getElementById('server-response').submit();
+                }
+
                 this.mollie.createToken().then(function(result) {
                     let token = result.token;
                     let error = result.error;
@@ -189,7 +195,9 @@ ctrans('texts.credit_card')])
                             tokenBillingCheckbox.value;
                     }
 
-                    document.querySelector('input[name=token]').value = token;
+                    document.querySelector('input[name=gateway_response]').value = token;
+                    document.querySelector('input[name=token]').value = '';
+
                     document.getElementById('server-response').submit();
                 });
             }
@@ -201,6 +209,22 @@ ctrans('texts.credit_card')])
                     .createExpiryDateInput()
                     .createCvvInput();
 
+                Array
+                    .from(document.getElementsByClassName('toggle-payment-with-token'))
+                    .forEach((element) => element.addEventListener('click', (element) => {
+                        document.getElementById('mollie--payment-container').classList.add('hidden');
+                        document.getElementById('save-card--container').style.display = 'none';
+                        document.querySelector('input[name=token]').value = element.target.dataset.token;
+                    }));
+
+                document
+                    .getElementById('toggle-payment-with-credit-card')
+                    .addEventListener('click', (element) => {
+                        document.getElementById('mollie--payment-container').classList.remove('hidden');
+                        document.getElementById('save-card--container').style.display = 'grid';
+                        document.querySelector('input[name=token]').value = "";
+                    });
+
                 document
                     .getElementById('pay-now')
                     .addEventListener('click', () => this.handlePayNowButton());