Merge pull request #6465 from beganovich/v5-606

(v5) Update Eway frontend

public/js/clients/payments/eway-credit-card.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */

public/mix-manifest.json

@@ -11,6 +11,7 @@
     "/js/clients/payments/braintree-paypal.js": "/js/clients/payments/braintree-paypal.js?id=c35db3cbb65806ab6a8a",
     "/js/clients/payments/card-js.min.js": "/js/clients/payments/card-js.min.js?id=5469146cd629ea1b5c20",
     "/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=065e5450233cc5b47020",
+    "/js/clients/payments/eway-credit-card.js": "/js/clients/payments/eway-credit-card.js?id=95d6bedbb7ec7d942e13",
     "/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=81c2623fc1e5769b51c7",
     "/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=665ddf663500767f1a17",
     "/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=f1719b79a2bb274d3f64",

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

@@ -0,0 +1,510 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+class EwayRapid {
+    constructor() {
+        this.cardStyles =
+            'padding: 2px; border: 1px solid #AAA; border-radius: 3px; height: 34px; width: 100%;';
+
+        this.errorCodes = new Map();
+
+        this.errorCodes.set('V6000', 'Validation error');
+        this.errorCodes.set('V6001', 'Invalid CustomerIP');
+        this.errorCodes.set('V6002', 'Invalid DeviceID');
+        this.errorCodes.set('V6003', 'Invalid Request PartnerID');
+        this.errorCodes.set('V6004', 'Invalid Request Method');
+        this.errorCodes.set(
+            'V6010',
+            'Invalid TransactionType, account not certified for eCome only MOTO or Recurring available'
+        );
+        this.errorCodes.set('V6011', 'Invalid Payment TotalAmount');
+        this.errorCodes.set('V6012', 'Invalid Payment InvoiceDescription');
+        this.errorCodes.set('V6013', 'Invalid Payment InvoiceNumber');
+        this.errorCodes.set('V6014', 'Invalid Payment InvoiceReference');
+        this.errorCodes.set('V6015', 'Invalid Payment CurrencyCode');
+        this.errorCodes.set('V6016', 'Payment Required');
+        this.errorCodes.set('V6017', 'Payment CurrencyCode Required');
+        this.errorCodes.set('V6018', 'Unknown Payment CurrencyCode');
+        this.errorCodes.set(
+            'V6019',
+            'Cardholder identity authentication required'
+        );
+        this.errorCodes.set('V6020', 'Cardholder Input Required');
+        this.errorCodes.set('V6021', 'EWAY_CARDHOLDERNAME Required');
+        this.errorCodes.set('V6022', 'EWAY_CARDNUMBER Required');
+        this.errorCodes.set('V6023', 'EWAY_CARDCVN Required');
+        this.errorCodes.set(
+            'V6024',
+            'Cardholder Identity Authentication One Time Password Not Active Yet'
+        );
+        this.errorCodes.set('V6025', 'PIN Required');
+        this.errorCodes.set('V6033', 'Invalid Expiry Date');
+        this.errorCodes.set('V6034', 'Invalid Issue Number');
+        this.errorCodes.set('V6035', 'Invalid Valid From Date');
+        this.errorCodes.set('V6039', 'Invalid Network Token Status');
+        this.errorCodes.set('V6040', 'Invalid TokenCustomerID');
+        this.errorCodes.set('V6041', 'Customer Required');
+        this.errorCodes.set('V6042', 'Customer FirstName Required');
+        this.errorCodes.set('V6043', 'Customer LastName Required');
+        this.errorCodes.set('V6044', 'Customer CountryCode Required');
+        this.errorCodes.set('V6045', 'Customer Title Required');
+        this.errorCodes.set('V6046', 'TokenCustomerID Required');
+        this.errorCodes.set('V6047', 'RedirectURL Required');
+        this.errorCodes.set(
+            'V6048',
+            'CheckoutURL Required when CheckoutPayment specified'
+        );
+        this.errorCodes.set('V6049', 'nvalid Checkout URL');
+        this.errorCodes.set('V6051', 'Invalid Customer FirstName');
+        this.errorCodes.set('V6052', 'Invalid Customer LastName');
+        this.errorCodes.set('V6053', 'Invalid Customer CountryCode');
+        this.errorCodes.set('V6058', 'Invalid Customer Title');
+        this.errorCodes.set('V6059', 'Invalid RedirectURL');
+        this.errorCodes.set('V6060', 'Invalid TokenCustomerID');
+        this.errorCodes.set('V6061', 'Invalid Customer Reference');
+        this.errorCodes.set('V6062', 'Invalid Customer CompanyName');
+        this.errorCodes.set('V6063', 'Invalid Customer JobDescription');
+        this.errorCodes.set('V6064', 'Invalid Customer Street1');
+        this.errorCodes.set('V6065', 'Invalid Customer Street2');
+        this.errorCodes.set('V6066', 'Invalid Customer City');
+        this.errorCodes.set('V6067', 'Invalid Customer State');
+        this.errorCodes.set('V6068', 'Invalid Customer PostalCode');
+        this.errorCodes.set('V6069', 'Invalid Customer Email');
+        this.errorCodes.set('V6070', 'Invalid Customer Phone');
+        this.errorCodes.set('V6071', 'Invalid Customer Mobile');
+        this.errorCodes.set('V6072', 'Invalid Customer Comments');
+        this.errorCodes.set('V6073', 'Invalid Customer Fax');
+        this.errorCodes.set('V6074', 'Invalid Customer URL');
+        this.errorCodes.set('V6075', 'Invalid ShippingAddress FirstName');
+        this.errorCodes.set('V6076', 'Invalid ShippingAddress LastName');
+        this.errorCodes.set('V6077', 'Invalid ShippingAddress Street1');
+        this.errorCodes.set('V6078', 'Invalid ShippingAddress Street2');
+        this.errorCodes.set('V6079', 'Invalid ShippingAddress City');
+        this.errorCodes.set('V6080', 'Invalid ShippingAddress State');
+        this.errorCodes.set('V6081', 'Invalid ShippingAddress PostalCode');
+        this.errorCodes.set('V6082', 'Invalid ShippingAddress Email');
+        this.errorCodes.set('V6083', 'Invalid ShippingAddress Phone');
+        this.errorCodes.set('V6084', 'Invalid ShippingAddress Country');
+        this.errorCodes.set('V6085', 'Invalid ShippingAddress ShippingMethod');
+        this.errorCodes.set('V6086', 'Invalid ShippingAddress Fax');
+        this.errorCodes.set('V6091', 'Unknown Customer CountryCode');
+        this.errorCodes.set('V6092', 'Unknown ShippingAddress CountryCode');
+        this.errorCodes.set('V6093', 'Insufficient Address Information');
+        this.errorCodes.set('V6100', 'Invalid EWAY_CARDNAME');
+        this.errorCodes.set('V6101', 'Invalid EWAY_CARDEXPIRYMONTH');
+        this.errorCodes.set('V6102', 'Invalid EWAY_CARDEXPIRYYEAR');
+        this.errorCodes.set('V6103', 'Invalid EWAY_CARDSTARTMONTH');
+        this.errorCodes.set('V6104', 'Invalid EWAY_CARDSTARTYEAR');
+        this.errorCodes.set('V6105', 'Invalid EWAY_CARDISSUENUMBER');
+        this.errorCodes.set('V6106', 'Invalid EWAY_CARDCVN');
+        this.errorCodes.set('V6107', 'Invalid EWAY_ACCESSCODE');
+        this.errorCodes.set('V6108', 'Invalid CustomerHostAddress');
+        this.errorCodes.set('V6109', 'Invalid UserAgent');
+        this.errorCodes.set('V6110', 'Invalid EWAY_CARDNUMBER');
+        this.errorCodes.set(
+            'V6111',
+            'Unauthorised API Access, Account Not PCI Certified'
+        );
+        this.errorCodes.set(
+            'V6112',
+            'Redundant card details other than expiry year and month'
+        );
+        this.errorCodes.set('V6113', 'Invalid transaction for refund');
+        this.errorCodes.set('V6114', 'Gateway validation error');
+        this.errorCodes.set(
+            'V6115',
+            'Invalid DirectRefundRequest, Transaction ID'
+        );
+        this.errorCodes.set(
+            'V6116',
+            'Invalid card data on original TransactionID'
+        );
+        this.errorCodes.set(
+            'V6117',
+            'Invalid CreateAccessCodeSharedRequest, FooterText'
+        );
+        this.errorCodes.set(
+            'V6118',
+            'Invalid CreateAccessCodeSharedRequest, HeaderText'
+        );
+        this.errorCodes.set(
+            'V6119',
+            'Invalid CreateAccessCodeSharedRequest, Language'
+        );
+        this.errorCodes.set(
+            'V6120',
+            'Invalid CreateAccessCodeSharedRequest, LogoUrl'
+        );
+        this.errorCodes.set(
+            'V6121',
+            'Invalid TransactionSearch, Filter Match Type'
+        );
+        this.errorCodes.set(
+            'V6122',
+            'Invalid TransactionSearch, Non numeric Transaction ID'
+        );
+        this.errorCodes.set(
+            'V6123',
+            'Invalid TransactionSearch,no TransactionID or AccessCode specified'
+        );
+        this.errorCodes.set(
+            'V6124',
+            'Invalid Line Items. The line items have been provided however the totals do not match the TotalAmount field'
+        );
+        this.errorCodes.set('V6125', 'Selected Payment Type not enabled');
+        this.errorCodes.set(
+            'V6126',
+            'Invalid encrypted card number, decryption failed'
+        );
+        this.errorCodes.set(
+            'V6127',
+            'Invalid encrypted cvn, decryption failed'
+        );
+        this.errorCodes.set('V6128', 'Invalid Method for Payment Type');
+        this.errorCodes.set(
+            'V6129',
+            'Transaction has not been authorised for Capture/Cancellation'
+        );
+        this.errorCodes.set('V6130', 'Generic customer information error');
+        this.errorCodes.set('V6131', 'Generic shipping information error');
+        this.errorCodes.set(
+            'V6132',
+            'Transaction has already been completed or voided, operation not permitted'
+        );
+        this.errorCodes.set('V6133', 'Checkout not available for Payment Type');
+        this.errorCodes.set(
+            'V6134',
+            'Invalid Auth Transaction ID for Capture/Void'
+        );
+        this.errorCodes.set('V6135', 'PayPal Error Processing Refund');
+        this.errorCodes.set(
+            'V6136',
+            'Original transaction does not exist or state is incorrect'
+        );
+        this.errorCodes.set('V6140', 'Merchant account is suspended');
+        this.errorCodes.set(
+            'V6141',
+            'Invalid PayPal account details or API signature'
+        );
+        this.errorCodes.set('V6142', 'Authorise not available for Bank/Branch');
+        this.errorCodes.set('V6143', 'Invalid Public Key');
+        this.errorCodes.set(
+            'V6144',
+            'Method not available with Public API Key Authentication'
+        );
+        this.errorCodes.set(
+            'V6145',
+            'Credit Card not allow if Token Customer ID is provided with Public API Key Authentication'
+        );
+        this.errorCodes.set(
+            'V6146',
+            'Client Side Encryption Key Missing or Invalid'
+        );
+        this.errorCodes.set(
+            'V6147',
+            'Unable to Create One Time Code for Secure Field'
+        );
+        this.errorCodes.set('V6148', 'Secure Field has Expired');
+        this.errorCodes.set('V6149', 'Invalid Secure Field One Time Code');
+        this.errorCodes.set('V6150', 'Invalid Refund Amount');
+        this.errorCodes.set(
+            'V6151',
+            'Refund amount greater than original transaction'
+        );
+        this.errorCodes.set(
+            'V6152',
+            'Original transaction already refunded for total amount'
+        );
+        this.errorCodes.set('V6153', 'Card type not support by merchant');
+        this.errorCodes.set('V6154', 'Insufficent Funds Available For Refund');
+        this.errorCodes.set('V6155', 'Missing one or more fields in request');
+        this.errorCodes.set('V6160', 'Encryption Method Not Supported');
+        this.errorCodes.set(
+            'V6161',
+            'Encryption failed, missing or invalid key'
+        );
+        this.errorCodes.set(
+            'V6165',
+            'Invalid Click-to-Pay (Visa Checkout) data or decryption failed'
+        );
+        this.errorCodes.set(
+            'V6170',
+            'Invalid TransactionSearch, Invoice Number is not unique'
+        );
+        this.errorCodes.set(
+            'V6171',
+            'Invalid TransactionSearch, Invoice Number not found'
+        );
+        this.errorCodes.set('V6220', 'Three domain secure XID invalid');
+        this.errorCodes.set('V6221', 'Three domain secure ECI invalid');
+        this.errorCodes.set('V6222', 'Three domain secure AVV invalid');
+        this.errorCodes.set('V6223', 'Three domain secure XID is required');
+        this.errorCodes.set('V6224', 'Three Domain Secure ECI is required');
+        this.errorCodes.set('V6225', 'Three Domain Secure AVV is required');
+        this.errorCodes.set(
+            'V6226',
+            'Three Domain Secure AuthStatus is required'
+        );
+        this.errorCodes.set('V6227', 'Three Domain Secure AuthStatus invalid');
+        this.errorCodes.set('V6228', 'Three domain secure Version is required');
+        this.errorCodes.set(
+            'V6230',
+            'Three domain secure Directory Server Txn ID invalid'
+        );
+        this.errorCodes.set(
+            'V6231',
+            'Three domain secure Directory Server Txn ID is required'
+        );
+        this.errorCodes.set('V6232', 'Three domain secure Version is invalid');
+        this.errorCodes.set('V6501', 'Invalid Amex InstallementPlan');
+        this.errorCodes.set(
+            'V6502',
+            'Invalid Number Of Installements for Amex. Valid values are from 0 to 99 inclusive'
+        );
+        this.errorCodes.set('V6503', 'Merchant Amex ID required');
+        this.errorCodes.set('V6504', 'Invalid Merchant Amex ID');
+        this.errorCodes.set('V6505', 'Merchant Terminal ID required');
+        this.errorCodes.set('V6506', 'Merchant category code required');
+        this.errorCodes.set('V6507', 'Invalid merchant category code');
+        this.errorCodes.set('V6508', 'Amex 3D ECI required');
+        this.errorCodes.set('V6509', 'Invalid Amex 3D ECI');
+        this.errorCodes.set('V6510', 'Invalid Amex 3D verification value');
+        this.errorCodes.set('V6511', 'Invalid merchant location data');
+        this.errorCodes.set('V6512', 'Invalid merchant street address');
+        this.errorCodes.set('V6513', 'Invalid merchant city');
+        this.errorCodes.set('V6514', 'Invalid merchant country');
+        this.errorCodes.set('V6515', 'Invalid merchant phone');
+        this.errorCodes.set('V6516', 'Invalid merchant postcode');
+        this.errorCodes.set('V6517', 'Amex connection error');
+        this.errorCodes.set(
+            'V6518',
+            'Amex EC Card Details API returned invalid data'
+        );
+        this.errorCodes.set(
+            'V6520',
+            'Invalid or missing Amex Point Of Sale Data'
+        );
+        this.errorCodes.set(
+            'V6521',
+            'Invalid or missing Amex transaction date time'
+        );
+        this.errorCodes.set(
+            'V6522',
+            'Invalid or missing Amex Original transaction date time'
+        );
+        this.errorCodes.set(
+            'V6530',
+            'Credit Card Number in non Credit Card Field'
+        );
+    }
+
+    get groupFieldConfig() {
+        return {
+            publicApiKey: document.querySelector('meta[name=public-api-key]')
+                ?.content,
+            fieldDivId: 'eway-secure-panel',
+            fieldType: 'group',
+            styles: '',
+            layout: {
+                fonts: ['Lobster'],
+                rows: [
+                    {
+                        styles: '',
+                        cells: [
+                            {
+                                colSpan: 12,
+                                styles: 'margin-top: 15px;',
+                                label: {
+                                    fieldColSpan: 4,
+                                    text: document.querySelector(
+                                        'meta[name=translation-card-name]'
+                                    )?.content,
+                                    styles: '',
+                                },
+                                field: {
+                                    fieldColSpan: 8,
+                                    fieldType: 'name',
+                                    styles: this.cardStyles,
+                                    divStyles: 'padding-left: 10px;',
+                                },
+                            },
+                            {
+                                colSpan: 12,
+                                styles: 'margin-top: 15px;',
+                                label: {
+                                    fieldColSpan: 4,
+                                    text: document.querySelector(
+                                        'meta[name=translation-expiry_date]'
+                                    )?.content,
+                                    styles: '',
+                                },
+                                field: {
+                                    fieldColSpan: 8,
+                                    fieldType: 'expirytext',
+                                    styles: this.cardStyles,
+                                    divStyles: 'padding-left: 10px;',
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        styles: '',
+                        cells: [
+                            {
+                                colSpan: 12,
+                                styles: 'margin-top: 15px;',
+                                label: {
+                                    fieldColSpan: 4,
+                                    text: document.querySelector(
+                                        'meta[name=translation-card_number]'
+                                    )?.content,
+                                    styles: '',
+                                },
+                                field: {
+                                    fieldColSpan: 8,
+                                    fieldType: 'card',
+                                    styles: this.cardStyles,
+                                },
+                            },
+                            {
+                                colSpan: 12,
+                                styles: 'margin-top: 15px;',
+                                label: {
+                                    fieldColSpan: 4,
+                                    text: document.querySelector(
+                                        'meta[name=translation-cvv]'
+                                    )?.content,
+                                    styles: '',
+                                },
+                                field: {
+                                    fieldColSpan: 8,
+                                    fieldType: 'cvn',
+                                    styles: this.cardStyles,
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        };
+    }
+
+    securePanelCallback(event) {
+        document.getElementById('errors').hidden = true;
+
+        if (event.errors) {
+            return this.handleErrors(event.errors);
+        }
+
+        if (document.getElementById('authorize-card')) {
+            document.getElementById('authorize-card').disabled = false;
+        }
+
+        if (document.getElementById('pay-now')) {
+            document.getElementById('pay-now').disabled = false;
+        }
+
+        document.querySelector('input[name=securefieldcode]').value =
+            event.secureFieldCode;
+    }
+
+    handleErrors(errors) {
+        let _errors = errors.split(' ');
+        let shouldShowGenericError = false;
+        let message = '';
+
+        _errors.forEach((error) => {
+            message = message.concat(this.errorCodes.get(error) + '<br>');
+        });
+
+        document.getElementById('errors').innerHTML = message;
+        document.getElementById('errors').hidden = false;
+    }
+
+    completeAuthorization(event) {
+        event.target.parentElement.disabled = true;
+
+        document.getElementById('server-response').submit();
+    }
+
+    completePaymentUsingToken(event) {
+        event.target.parentElement.disabled = true;
+
+        document.getElementById('server-response').submit();
+    }
+
+    completePaymentWithoutToken(event) {
+        event.target.parentElement.disabled = true;
+
+        let tokenBillingCheckbox = document.querySelector(
+            'input[name="token-billing-checkbox"]:checked'
+        );
+
+        if (tokenBillingCheckbox) {
+            document.querySelector('input[name="store_card"]').value =
+                tokenBillingCheckbox.value;
+        }
+
+        document.getElementById('server-response').submit();
+    }
+
+    initialize() {
+        this.eWAY = eWAY.setupSecureField(this.groupFieldConfig, (event) =>
+            this.securePanelCallback(event)
+        );
+    }
+
+    handle() {
+        this.initialize();
+
+        document
+            .getElementById('authorize-card')
+            ?.addEventListener('click', (e) => this.completeAuthorization(e));
+
+        Array.from(
+            document.getElementsByClassName('toggle-payment-with-token')
+        ).forEach((element) =>
+            element.addEventListener('click', (element) => {
+                document
+                    .getElementById('eway-secure-panel')
+                    .classList.add('hidden');
+                document.getElementById('save-card--container').style.display =
+                    'none';
+                document.querySelector('input[name=token]').value =
+                    element.target.dataset.token;
+                document.getElementById('pay-now').disabled = false;
+            })
+        );
+
+        document
+            .getElementById('toggle-payment-with-credit-card')
+            .addEventListener('click', (element) => {
+                document
+                    .getElementById('eway-secure-panel')
+                    .classList.remove('hidden');
+                document.getElementById('save-card--container').style.display =
+                    'grid';
+                document.querySelector('input[name=token]').value = '';
+                document.getElementById('pay-now').disabled = true;
+            });
+
+        document.getElementById('pay-now')?.addEventListener('click', (e) => {
+            let tokenInput = document.querySelector('input[name=token]');
+
+            if (tokenInput.value) {
+                return this.completePaymentUsingToken(e);
+            }
+
+            return this.completePaymentWithoutToken(e);
+        });
+    }
+}
+
+new EwayRapid().handle();

resources/lang/en/texts.php

@@ -4287,6 +4287,8 @@ $LANG = array(
     'company_deleted' => 'Company deleted',
     'company_deleted_body' => 'Company [ :company ] was deleted by :user',
     'back_to' => 'Back to :url',
+    'cardholder_name' => 'Card holder name',
+    
 );
 
 return $LANG;

resources/views/portal/ninja2020/gateways/eway/authorize.blade.php

@@ -2,6 +2,11 @@
 ctrans('texts.credit_card')])
 
 @section('gateway_head')
+    <meta name="public-api-key" content="{{ $public_api_key }}">
+    <meta name="translation-card-name" content="{{ ctrans('texts.cardholder_name') }}">
+    <meta name="translation-expiry_date" content="{{ ctrans('texts.date') }}">
+    <meta name="translation-card_number" content="{{ ctrans('texts.card_number') }}">
+    <meta name="translation-cvv" content="{{ ctrans('texts.cvv') }}">
 @endsection
 
 @section('gateway_content')
@@ -9,49 +14,27 @@ ctrans('texts.credit_card')])
         method="post" id="server-response">
         @csrf
 
-        <input type="hidden" id="securefieldcode" name="securefieldcode" value="" />
+        <input type="hidden" id="securefieldcode" name="securefieldcode">
         <input type="hidden" name="company_gateway_id" value="{{ $gateway->company_gateway->id }}">
         <input type="hidden" name="payment_method_id" value="1">
-        
-        @if (!Request::isSecure())
-            <p class="alert alert-failure">{{ ctrans('texts.https_required') }}</p>
-        @endif
-
-        <div class="alert alert-failure mb-4" hidden id="errors"></div>
-
-        <!-- This is a generic credit card component utilizing CardJS -->
-        @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
-            {{ ctrans('texts.credit_card') }}
-        @endcomponent
-
-        <div id="eway-secure-panel"></div>
-
-        @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-card'])
-            {{ ctrans('texts.add_payment_method') }}
-        @endcomponent
     </form>
+
+    @if (!Request::isSecure())
+        <p class="alert alert-failure">{{ ctrans('texts.https_required') }}</p>
+    @endif
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element-single')
+        <div id="eway-secure-panel"></div>
+    @endcomponent
+
+    @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-card', 'disabled' => true])
+        {{ ctrans('texts.add_payment_method') }}
+    @endcomponent
 @endsection
 
 @section('gateway_footer')
-    <!-- Your JS includes go here -->
+    <script src="https://secure.ewaypayments.com/scripts/eWAY.min.js" data-init="false"></script>
-<script src="https://secure.ewaypayments.com/scripts/eWAY.min.js" data-init="false"></script>
+    <script src="{{ asset('js/clients/payments/eway-credit-card.js') }}"></script>
-
-@include('portal.ninja2020.gateways.eway.includes.credit_card')
-
-<script type="text/javascript">
-
-window.onload = function() {
-    eWAY.setupSecureField(groupFieldConfig, securePanelCallback);
-};
-
-
-document
-.getElementById('authorize-card')
-.addEventListener('click', () => {
-    
-    saveAndSubmit();
-
-});
-
-</script>
 @endsection

resources/views/portal/ninja2020/gateways/eway/pay.blade.php

@@ -1,6 +1,12 @@
-@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' =>
+ctrans('texts.credit_card')])
 
 @section('gateway_head')
+    <meta name="public-api-key" content="{{ $public_api_key }}">
+    <meta name="translation-card-name" content="{{ ctrans('texts.cardholder_name') }}">
+    <meta name="translation-expiry_date" content="{{ ctrans('texts.date') }}">
+    <meta name="translation-card_number" content="{{ ctrans('texts.card_number') }}">
+    <meta name="translation-cvv" content="{{ ctrans('texts.cvv') }}">
 @endsection
 
 @section('gateway_content')
@@ -24,72 +30,33 @@
     @include('portal.ninja2020.gateways.includes.payment_details')
 
     @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
-        @if(count($tokens) > 0)
+        @if (count($tokens) > 0)
-            @foreach($tokens as $token)
+            @foreach ($tokens as $token)
                 <label class="mr-4">
-                    <input
+                    <input type="radio" data-token="{{ $token->token }}" name="payment-type"
-                        type="radio"
+                        class="form-radio cursor-pointer toggle-payment-with-token" />
-                        data-token="{{ $token->token }}"
-                        name="payment-type"
-                        class="form-radio cursor-pointer toggle-payment-with-token"/>
                     <span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
                 </label>
             @endforeach
         @endisset
 
         <label>
-            <input
+            <input type="radio" id="toggle-payment-with-credit-card" class="form-radio cursor-pointer" name="payment-type"
-                type="radio"
+                checked />
-                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
 
-    <div id="eway-secure-panel">
+    @component('portal.ninja2020.components.general.card-element-single')
-        
+        <div id="eway-secure-panel"></div>
+    @endcomponent
 
     @include('portal.ninja2020.gateways.includes.save_card')
-    </div>
 
-<!-- -->
+    @include('portal.ninja2020.gateways.includes.pay_now', ['disabled' => true])
-
-    @include('portal.ninja2020.gateways.includes.pay_now')
 @endsection
 
 @section('gateway_footer')
-
+    <script src="https://secure.ewaypayments.com/scripts/eWAY.min.js" data-init="false"></script>
-    @include('portal.ninja2020.gateways.eway.includes.credit_card')
+    <script src="{{ asset('js/clients/payments/eway-credit-card.js') }}"></script>
-<script src="https://secure.ewaypayments.com/scripts/eWAY.min.js" data-init="false"></script>
-
-
-<script type="text/javascript">
-
-    window.onload = function() {
-        eWAY.setupSecureField(groupFieldConfig, securePanelCallback);
-    };
-
-    document.getElementById('eway-secure-panel').hidden = true;
-
-
-
-            Array
-                .from(document.getElementsByClassName('toggle-payment-with-token'))
-                .forEach((element) => element.addEventListener('click', (e) => {
-                    document.getElementById('save-card--container').style.display = 'none';
-                    document.getElementById('eway-secure-panel').style.display = 'none';
-                    document.getElementById('token').value = e.target.dataset.token;
-                }));
-
-            document
-                .getElementById('toggle-payment-with-credit-card')
-                .addEventListener('click', (e) => {
-                    document.getElementById('save-card--container').style.display = 'grid';
-                    document.getElementById('eway-secure-panel').style.display = 'flex';
-                    document.getElementById('token').value = null;
-                });
-</script>
-
 @endsection

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

@@ -4,7 +4,8 @@
         type="{{ $type ?? 'button' }}"
         id="{{ $id ?? 'pay-now' }}"
         @isset($data) @foreach($data as $prop => $value) data-{{ $prop }}="{{ $value }}" @endforeach @endisset
-        class="button button-primary bg-primary {{ $class ?? '' }}">
+        class="button button-primary bg-primary {{ $class ?? '' }}"
+        {{ isset($disabled) && $disabled === true ? 'disabled' : '' }}>
             <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>

tests/Browser/ClientPortal/Gateways/Eway/CreditCardTest.php

@@ -0,0 +1,125 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace Tests\Browser\ClientPortal\Gateways\Eway;
+
+use Laravel\Dusk\Browser;
+use Tests\Browser\Pages\ClientPortal\Login;
+use Tests\DuskTestCase;
+
+class CreditCardTest extends DuskTestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        foreach (static::$browsers as $browser) {
+            $browser->driver->manage()->deleteAllCookies();
+        }
+
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visit(new Login())
+                ->auth();
+        });
+    }
+
+    public function testPaymentWithNewCard()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.invoices.index')
+                ->click('@pay-now')
+                ->click('@pay-now-dropdown')
+                ->clickLink('Credit Card')
+                ->withinFrame('iframe', function (Browser $browser) {
+                    $browser
+                        ->type('EWAY_CARDNAME', 'Invoice Ninja')
+                        ->type('EWAY_CARDNUMBER', '4111 1111 1111 1111')
+                        ->type('EWAY_CARDEXPIRY', '04/22')
+                        ->type('EWAY_CARDCVN', '100');
+                })
+                ->click('#pay-now')
+                ->waitForText('Details of the payment', 60);
+        });
+    }
+
+    public function testPayWithNewCardAndSaveForFutureUse()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.invoices.index')
+                ->click('@pay-now')
+                ->click('@pay-now-dropdown')
+                ->clickLink('Credit Card')
+                ->withinFrame('iframe', function (Browser $browser) {
+                    $browser
+                        ->type('EWAY_CARDNAME', 'Invoice Ninja')
+                        ->type('EWAY_CARDNUMBER', '4111 1111 1111 1111')
+                        ->type('EWAY_CARDEXPIRY', '04/22')
+                        ->type('EWAY_CARDCVN', '100');
+                })
+                ->radio('#proxy_is_default', true)
+                ->click('#pay-now')
+                ->waitForText('Details of the payment', 60)
+                ->visitRoute('client.payment_methods.index')
+                ->clickLink('View')
+                ->assertSee('1111');
+        });
+    }
+
+    public function testPayWithSavedCreditCard()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.invoices.index')
+                ->click('@pay-now')
+                ->click('@pay-now-dropdown')
+                ->clickLink('Credit Card')
+                ->click('.toggle-payment-with-token')
+                ->click('#pay-now')
+                ->waitForText('Details of the payment', 60);
+        });
+    }
+
+    public function testRemoveCreditCard()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.payment_methods.index')
+                ->clickLink('View')
+                ->press('Remove Payment Method')
+                ->waitForText('Confirmation')
+                ->click('@confirm-payment-removal')
+                ->assertSee('Payment method has been successfully removed.');
+        });
+    }
+
+    public function testAddingCreditCardStandalone()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.payment_methods.index')
+                ->press('Add Payment Method')
+                ->clickLink('Credit Card')
+                ->withinFrame('iframe', function (Browser $browser) {
+                    $browser
+                        ->type('EWAY_CARDNAME', 'Invoice Ninja')
+                        ->type('EWAY_CARDNUMBER', '4111 1111 1111 1111')
+                        ->type('EWAY_CARDEXPIRY', '04/22')
+                        ->type('EWAY_CARDCVN', '100');
+                })
+                ->press('Add Payment Method')
+                ->waitForText('**** 1111');
+        });
+    }
+}

webpack.mix.js

@@ -81,6 +81,10 @@ mix.js("resources/js/app.js", "public/js")
     .js(
         "resources/js/clients/payment_methods/wepay-bank-account.js",
         "public/js/clients/payment_methods/wepay-bank-account.js"
+    )
+    .js(
+        "resources/js/clients/payments/eway-credit-card.js",
+        "public/js/clients/payments/eway-credit-card.js"
     );
 
 mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');