New payment flow: Various fixes (#88)

* checkout: fixes for view

* alipay: fixes for method implementation

* checkout: fixes for instant payments

* livewire: revert back the local patch

* remove livewire local patch

app/PaymentDrivers/CheckoutCom/CreditCard.php

@@ -167,7 +167,7 @@ class CreditCard implements MethodInterface, LivewireMethodInterface
 
     public function livewirePaymentView(array $data): string
     {
-        return 'gateways.checkout.credit_card.livewire_pay'; 
+        return 'gateways.checkout.credit_card.pay_livewire'; 
     }
 
     public function paymentResponse(PaymentResponseRequest $request)

app/PaymentDrivers/Stripe/Alipay.php

@@ -19,9 +19,10 @@ use App\Models\GatewayType;
 use App\Models\Payment;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\StripePaymentDriver;
 
-class Alipay
+class Alipay implements LivewireMethodInterface
 {
     /** @var StripePaymentDriver */
     public $stripe;
@@ -33,25 +34,7 @@ class Alipay
 
     public function paymentView(array $data)
     {
-        $intent = \Stripe\PaymentIntent::create([
+        $data = $this->paymentData($data);
-            'amount' => $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency()),
-            'currency' => $this->stripe->client->currency()->code,
-            'payment_method_types' => ['alipay'],
-            'customer' => $this->stripe->findOrCreateCustomer(),
-            'description' => $this->stripe->getDescription(false),
-            'metadata' => [
-                'payment_hash' => $this->stripe->payment_hash->hash,
-                'gateway_type_id' => GatewayType::ALIPAY,
-            ],
-        ], $this->stripe->stripe_connect_auth);
-
-
-        $data['gateway'] = $this->stripe;
-        $data['return_url'] = $this->buildReturnUrl();
-        $data['ci_intent'] = $intent->client_secret;
-
-        $this->stripe->payment_hash->data = array_merge((array) $this->stripe->payment_hash->data, ['stripe_amount' => $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency())]);
-        $this->stripe->payment_hash->save();
 
         return render('gateways.stripe.alipay.pay', $data);
     }
@@ -146,4 +129,40 @@ class Alipay
 
         throw new PaymentFailed('Failed to process the payment.', 500);
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.stripe.alipay.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $intent = \Stripe\PaymentIntent::create([
+            'amount' => $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency()),
+            'currency' => $this->stripe->client->currency()->code,
+            'payment_method_types' => ['alipay'],
+            'customer' => $this->stripe->findOrCreateCustomer(),
+            'description' => $this->stripe->getDescription(false),
+            'metadata' => [
+                'payment_hash' => $this->stripe->payment_hash->hash,
+                'gateway_type_id' => GatewayType::ALIPAY,
+            ],
+        ], $this->stripe->stripe_connect_auth);
+
+
+        $data['gateway'] = $this->stripe;
+        $data['return_url'] = $this->buildReturnUrl();
+        $data['ci_intent'] = $intent->client_secret;
+
+        $this->stripe->payment_hash->data = array_merge((array) $this->stripe->payment_hash->data, ['stripe_amount' => $this->stripe->convertToStripeAmount($data['total']['amount_with_fee'], $this->stripe->client->currency()->precision, $this->stripe->client->currency())]);
+        $this->stripe->payment_hash->save();
+
+        return $data;
+    }
 }

public/build/assets/checkout-credit-card-2cca8b36.js

@@ -1,4 +1,4 @@
-import{w as o}from"./wait-8f4ae121.js";/**
+import{i as s,w as i}from"./wait-8f4ae121.js";/**
  * Invoice Ninja (https://invoiceninja.com)
  *
  * @link https://github.com/invoiceninja/invoiceninja source repository
@@ -6,4 +6,4 @@ import{w as o}from"./wait-8f4ae121.js";/**
  * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
  *
  * @license https://www.elastic.co/licensing/elastic-license
- */class s{constructor(){this.tokens=[]}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",a=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),a.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}o("#checkout-credit-card-payment").then(()=>new s().handle());
+ */class a{constructor(){this.tokens=[]}handlePaymentUsingToken(t){document.getElementById("checkout--container").classList.add("hidden"),document.getElementById("pay-now-with-token--container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=t.target.dataset.token}handlePaymentUsingCreditCard(t){document.getElementById("checkout--container").classList.remove("hidden"),document.getElementById("pay-now-with-token--container").classList.add("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value="";const e=document.getElementById("pay-button"),d=document.querySelector('meta[name="public-key"]').content??"",o=document.getElementById("payment-form");Frames.init(d),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,function(n){e.disabled=!Frames.isCardValid()}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED,function(n){e.disabled=!1}),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,function(n){e.disabled=!0,document.querySelector('input[name="gateway_response"]').value=JSON.stringify(n),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()}),o.addEventListener("submit",function(n){n.preventDefault(),e.disabled=!0,Frames.submitCard()})}completePaymentUsingToken(t){let e=document.getElementById("pay-now-with-token");e.disabled=!0,e.querySelector("svg").classList.remove("hidden"),e.querySelector("span").classList.add("hidden"),document.getElementById("server-response").submit()}handle(){this.handlePaymentUsingCreditCard(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach(t=>t.addEventListener("click",this.handlePaymentUsingToken)),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",this.handlePaymentUsingCreditCard),document.getElementById("pay-now-with-token").addEventListener("click",this.completePaymentUsingToken)}}function r(){new a().handle()}s()?r():i("#checkout-credit-card-payment").then(()=>new a().handle());

public/build/manifest.json

@@ -15,7 +15,7 @@
     "file": "assets/wait-8f4ae121.js"
   },
   "resources/js/app.js": {
-    "file": "assets/app-c51a8745.js",
+    "file": "assets/app-234e3402.js",
     "imports": [
       "_index-08e160a7.js",
       "__commonjsHelpers-725317a4.js"
@@ -95,7 +95,7 @@
     "src": "resources/js/clients/payments/braintree-paypal.js"
   },
   "resources/js/clients/payments/checkout-credit-card.js": {
-    "file": "assets/checkout-credit-card-eba516f2.js",
+    "file": "assets/checkout-credit-card-2cca8b36.js",
     "imports": [
       "_wait-8f4ae121.js"
     ],
@@ -350,7 +350,7 @@
     "src": "resources/js/setup/setup.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-4e969b65.css",
+    "file": "assets/app-15411b02.css",
     "isEntry": true,
     "src": "resources/sass/app.scss"
   }

resources/js/app.js

@@ -10,7 +10,7 @@
 
 import axios from 'axios';
 import cardValidator from 'card-validator';
-import { Livewire, Alpine } from './livewire_temp.esm';
+import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
 
 Livewire.start()
 window.axios = axios;

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

@@ -8,7 +8,7 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
-import { wait } from '../wait';
+import { wait, instant } from '../wait';
 
 class CheckoutCreditCard {
     constructor() {
@@ -109,6 +109,10 @@ class CheckoutCreditCard {
     }
 }
 
-wait('#checkout-credit-card-payment').then(() =>
+function boot() {
+    new CheckoutCreditCard().handle()
+}
+
+instant() ? boot() : wait('#checkout-credit-card-payment').then(() =>
     new CheckoutCreditCard().handle()
 );

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

@@ -6,6 +6,7 @@
     <meta name="value" content="{{ $value }}">
     <meta name="currency" content="{{ $currency }}">
     <meta name="reference" content="{{ $payment_hash }}">
+    <meta name="instant-payment" content="yes" />
 
     @include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')