From 56c65a2370618ceb4ca9ace8579d2c913db02c9d Mon Sep 17 00:00:00 2001
From: Lars Kusch <lars@lars-kusch.de>
Date: Thu, 20 Jan 2022 08:32:19 +0100
Subject: [PATCH] Added payment js

Signed-off-by: Lars Kusch <lars@lars-kusch.de>
---
 resources/js/clients/payments/stripe-fpx.js | 65 +++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 resources/js/clients/payments/stripe-fpx.js

diff --git a/resources/js/clients/payments/stripe-fpx.js b/resources/js/clients/payments/stripe-fpx.js
new file mode 100644
index 000000000000..415cb6449469
--- /dev/null
+++ b/resources/js/clients/payments/stripe-fpx.js
@@ -0,0 +1,65 @@
+/**
+ * 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://opensource.org/licenses/AAL
+ */
+
+class ProcessFPXPay {
+    constructor(key, stripeConnect) {
+        this.key = key;
+        this.errors = document.getElementById('errors');
+        this.stripeConnect = stripeConnect;
+    }
+
+    setupStripe = () => {
+        this.stripe = Stripe(this.key);
+
+        if(this.stripeConnect)
+            this.stripe.stripeAccount = stripeConnect;
+        let elements = this.stripe.elements();
+        let style = {
+            base: {
+                // Add your base input styles here. For example:
+                padding: '10px 12px',
+                color: '#32325d',
+                fontSize: '16px',
+            },
+        };
+        this.fpx = elements.create('fpxBank', {style: style, accountHolderType: 'individual',});
+        this.fpx.mount("#fpx-bank-element");
+        return this;
+    };
+
+    handle = () => {
+        document.getElementById('pay-now').addEventListener('click', (e) => {
+            document.getElementById('pay-now').disabled = true;
+            document.querySelector('#pay-now > svg').classList.remove('hidden');
+            document.querySelector('#pay-now > span').classList.add('hidden');
+
+            this.stripe.confirmFpxPayment(
+                document.querySelector('meta[name=pi-client-secret').content,
+                {
+                    payment_method: {
+                        fpx: this.fpx,
+                    },
+                    return_url: document.querySelector(
+                        'meta[name="return-url"]'
+                    ).content,
+                }
+            );
+        });
+    };
+}
+
+const publishableKey = document.querySelector(
+    'meta[name="stripe-publishable-key"]'
+)?.content ?? '';
+
+const stripeConnect =
+    document.querySelector('meta[name="stripe-account-id"]')?.content ?? '';
+
+new ProcessFPXPay(publishableKey, stripeConnect).setupStripe().handle();