Updated Stripe integration

ourwarmhouse · Nov 3, 2021 · caa3f03 · caa3f03
1 parent d1e207e
commit caa3f03
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 115 deletions.
diff --git a/config/payment/config/stripe.json b/config/payment/config/stripe.json
@@ -5,5 +5,8 @@
     "stripeCurrency": "usd",
     "stripeDescription": "expressCart payment",
     "stripeLogoURL": "http://localhost:1111/images/stripelogo.png",
-    "stripeWebhookSecret": ""
+    "stripeWebhookSecret": "",
+    "paymentMethods": [
+        "card"
+    ]
 }
diff --git a/config/payment/schema/stripe.json b/config/payment/schema/stripe.json
@@ -22,6 +22,12 @@
         },
         "stripeWebhookSecret": {
             "type": "string"
+        },
+        "paymentMethods": {
+            "type": "array",
+            "default": [
+                "card"
+            ]
         }
     },
     "required": [
@@ -30,7 +36,8 @@
         "publicKey",
         "stripeCurrency",
         "stripeDescription",
-        "stripeLogoURL"
+        "stripeLogoURL",
+        "paymentMethods"
     ],
     "additionalProperties": false
 }
diff --git a/lib/payments/stripe.js b/lib/payments/stripe.js
@@ -7,127 +7,129 @@ const numeral = require('numeral');
 const stripe = require('stripe')(getPaymentConfig().secretKey);
 const router = express.Router();
 
-// The homepage of the site
-router.post('/checkout_action', async (req, res, next) => {
+router.post('/setup', async (req, res, next) => {
+    const stripeConfig = getPaymentConfig('stripe');
+    const stripe = require('stripe')(stripeConfig.secretKey);
+
+    const paymentIntent = await stripe.paymentIntents.create({
+        amount: numeral(req.session.totalCartAmount).format('0.00').replace('.', ''),
+        currency: stripeConfig.stripeCurrency,
+        payment_method_types: stripeConfig.paymentMethods
+    });
+    res.send({
+        clientSecret: paymentIntent.client_secret
+    });
+});
+
+router.get('/checkout_action', async (req, res, next) => {
     const db = req.app.db;
     const config = req.app.config;
     const stripeConfig = getPaymentConfig('stripe');
     const stripe = require('stripe')(stripeConfig.secretKey);
 
-    const chargePayload = {
-        amount: numeral(req.session.totalCartAmount).format('0.00').replace('.', ''),
-        currency: stripeConfig.stripeCurrency.toLowerCase(),
-        source: req.body.token,
-        description: stripeConfig.stripeDescription,
-        shipping: {
-            name: `${req.session.customerFirstname} ${req.session.customerLastname}`,
-            address: {
-                line1: req.session.customerAddress1,
-                line2: req.session.customerAddress2,
-                postal_code: req.session.customerPostcode,
-                state: req.session.customerState,
-                country: req.session.customerCountry
-            }
-        }
-    };
+    // Get result
+    const result = req.query;
 
-    // charge via stripe
-    stripe.charges.create(chargePayload, (err, charge) => {
-        if(err){
-            req.session.messageType = 'danger';
-            req.session.message = 'Your payment has declined. Please try again';
-            req.session.paymentApproved = false;
-            req.session.paymentDetails = '';
-            res.redirect('/checkout/payment');
-            return;
-        }
+    // Check for the result
+    if(!result || !result.payment_intent){
+        req.session.messageType = 'danger';
+        req.session.message = 'Unable to retrieve the payment.';
+        res.redirect('/checkout/payment');
+        return;
+    }
 
-        // order status
-        let paymentStatus = 'Paid';
-        if(charge.paid !== true){
-            paymentStatus = 'Declined';
-        }
+    const paymentIntent = await stripe.paymentIntents.retrieve(
+        result.payment_intent
+    );
 
-        // new order doc
-        const orderDoc = {
-            orderPaymentId: charge.id,
-            orderPaymentGateway: 'Stripe',
-            orderPaymentMessage: charge.outcome.seller_message,
-            orderTotal: req.session.totalCartAmount,
-            orderShipping: req.session.totalCartShipping,
-            orderItemCount: req.session.totalCartItems,
-            orderProductCount: req.session.totalCartProducts,
-            orderCustomer: getId(req.session.customerId),
-            orderEmail: req.session.customerEmail,
-            orderCompany: req.session.customerCompany,
-            orderFirstname: req.session.customerFirstname,
-            orderLastname: req.session.customerLastname,
-            orderAddr1: req.session.customerAddress1,
-            orderAddr2: req.session.customerAddress2,
-            orderCountry: req.session.customerCountry,
-            orderState: req.session.customerState,
-            orderPostcode: req.session.customerPostcode,
-            orderPhoneNumber: req.session.customerPhone,
-            orderComment: req.session.orderComment,
-            orderStatus: paymentStatus,
-            orderDate: new Date(),
-            orderProducts: req.session.cart,
-            orderType: 'Single'
-        };
+    // Check for payment intent
+    if(!paymentIntent){
+        req.session.messageType = 'danger';
+        req.session.message = 'Unable to retrieve the payment.';
+        res.redirect('/checkout/payment');
+        return;
+    }
+
+    // order status
+    let paymentStatus = 'Paid';
+    if(paymentIntent.status !== 'succeeded'){
+        paymentStatus = 'Declined';
+    }
+
+    // new order doc
+    const orderDoc = {
+        orderPaymentId: paymentIntent.id,
+        orderPaymentGateway: 'Stripe',
+        orderPaymentMessage: paymentIntent.status,
+        orderTotal: req.session.totalCartAmount,
+        orderShipping: req.session.totalCartShipping,
+        orderItemCount: req.session.totalCartItems,
+        orderProductCount: req.session.totalCartProducts,
+        orderCustomer: getId(req.session.customerId),
+        orderEmail: req.session.customerEmail,
+        orderCompany: req.session.customerCompany,
+        orderFirstname: req.session.customerFirstname,
+        orderLastname: req.session.customerLastname,
+        orderAddr1: req.session.customerAddress1,
+        orderAddr2: req.session.customerAddress2,
+        orderCountry: req.session.customerCountry,
+        orderState: req.session.customerState,
+        orderPostcode: req.session.customerPostcode,
+        orderPhoneNumber: req.session.customerPhone,
+        orderComment: req.session.orderComment,
+        orderStatus: paymentStatus,
+        orderDate: new Date(),
+        orderProducts: req.session.cart,
+        orderType: 'Single'
+    };
 
-        // insert order into DB
-        db.orders.insertOne(orderDoc, (err, newDoc) => {
-            if(err){
-                console.info(err.stack);
+    // insert order into DB
+    const newOrder = await db.orders.insertOne(orderDoc);
+
+    // get the new ID
+    const orderId = newOrder.insertedId;
+
+    // add to lunr index
+    indexOrders(req.app)
+    .then(() => {
+        // if approved, send email etc
+        if(paymentIntent.status === 'succeeded'){
+            // set the results
+            req.session.messageType = 'success';
+            req.session.message = 'Your payment was successfully completed';
+            req.session.paymentEmailAddr = orderDoc.orderEmail;
+            req.session.paymentApproved = true;
+            req.session.paymentDetails = `<p><strong>Order ID: </strong>${orderId}</p><p><strong>Transaction ID: </strong>${paymentIntent.id}</p>`;
+
+            // set payment results for email
+            const paymentResults = {
+                paymentId: orderId,
+                message: req.session.message,
+                messageType: req.session.messageType,
+                paymentEmailAddr: req.session.paymentEmailAddr,
+                paymentApproved: true,
+                paymentDetails: req.session.paymentDetails
+            };
+
+            // clear the cart
+            if(req.session.cart){
+                emptyCart(req, res, 'function');
             }
 
-            // get the new ID
-            const newId = newDoc.insertedId;
-
-            // add to lunr index
-            indexOrders(req.app)
-            .then(() => {
-                // if approved, send email etc
-                if(charge.paid === true){
-                    // set the results
-                    req.session.messageType = 'success';
-                    req.session.message = 'Your payment was successfully completed';
-                    req.session.paymentEmailAddr = newDoc.ops[0].orderEmail;
-                    req.session.paymentApproved = true;
-                    req.session.paymentDetails = `<p><strong>Order ID: </strong>${newId}</p><p><strong>Transaction ID: </strong>${charge.id}</p>`;
-
-                    // set payment results for email
-                    const paymentResults = {
-                        paymentId: newId,
-                        message: req.session.message,
-                        messageType: req.session.messageType,
-                        paymentEmailAddr: req.session.paymentEmailAddr,
-                        paymentApproved: true,
-                        paymentDetails: req.session.paymentDetails
-                    };
-
-                    // clear the cart
-                    if(req.session.cart){
-                        emptyCart(req, res, 'function');
-                    }
-
-                    // send the email with the response
-                    // TODO: Should fix this to properly handle result
-                    sendEmail(req.session.paymentEmailAddr, `Your payment with ${config.cartTitle}`, getEmailTemplate(paymentResults));
-
-                    // Return the outcome
-                    return res.send(paymentResults);
-                }
-                // Return failure
-                req.session.messageType = 'danger';
-                req.session.message = 'Your payment has declined. Please try again';
-                req.session.paymentApproved = false;
-                req.session.paymentDetails = `<p><strong>Order ID: </strong>${newId}</p><p><strong>Transaction ID: </strong>${charge.id}</p>`;
-                return res.status(400).json({
-                    paymentId: newId
-                });
-            });
-        });
+            // send the email with the response
+            // TODO: Should fix this to properly handle result
+            sendEmail(req.session.paymentEmailAddr, `Your payment with ${config.cartTitle}`, getEmailTemplate(paymentResults));
+
+            // Return the outcome
+            res.redirect(`/payment/${orderId}`);
+            return;
+        }
+        // Return failure
+        req.session.messageType = 'danger';
+        req.session.message = 'Your payment has declined. Please try again';
+        req.session.paymentApproved = false;
+        req.session.paymentDetails = `<p><strong>Order ID: </strong>${orderId}</p><p><strong>Transaction ID: </strong>${paymentIntent.id}</p>`;
+        res.redirect(`/payment/${orderId}`);
     });
 });
 

diff --git a/public/javascripts/common.js b/public/javascripts/common.js
@@ -4,6 +4,78 @@
 $(document).ready(function (){
     // validate form and show stripe payment
     if($('#stripe-form').length > 0){
+        $.ajax({
+            method: 'POST',
+            url: '/stripe/setup'
+        })
+        .done(async function(response){
+            var stripe = Stripe($('#stripePublicKey').val());
+
+            document
+                .querySelector('#payment-form')
+                .addEventListener('submit', handleSubmit);
+
+            const appearance = {
+                theme: 'stripe'
+            };
+            const elements = stripe.elements({ appearance, clientSecret: response.clientSecret });
+
+            const paymentElement = elements.create('payment');
+            paymentElement.mount('#payment-element');
+
+            async function handleSubmit(e){
+                e.preventDefault();
+                setLoading(true);
+
+                const { error } = await stripe.confirmPayment({
+                    elements,
+                    confirmParams: {
+                        return_url: $('#baseUrl').val() + '/stripe/checkout_action'
+                    }
+                });
+
+                if(error.type === 'card_error' || error.type === 'validation_error'){
+                    showMessage(error.message);
+                }else{
+                    showMessage('An unexpected error occured.');
+                }
+
+                setLoading(false);
+            }
+
+            // ------- UI helpers -------
+            function showMessage(messageText){
+                const messageContainer = document.querySelector('#payment-message');
+
+                messageContainer.classList.remove('hidden');
+                messageContainer.textContent = messageText;
+
+                setTimeout(function (){
+                    messageContainer.classList.add('hidden');
+                    messageText.textContent = '';
+                }, 4000);
+            }
+
+            // Show a spinner on payment submission
+            function setLoading(isLoading){
+                if(isLoading){
+                    // Disable the button and show a spinner
+                    document.querySelector('#submit').disabled = true;
+                    document.querySelector('#spinner').classList.remove('d-none');
+                    document.querySelector('#button-text').classList.add('d-none');
+                }else{
+                    document.querySelector('#submit').disabled = false;
+                    document.querySelector('#spinner').classList.add('d-none');
+                    document.querySelector('#button-text').classList.remove('d-none');
+                }
+            }
+        })
+        .fail(function(msg){
+            showNotification(msg.responseJSON.message, 'danger');
+        });
+    };
+
+    if($('#stripe-form2121').length > 0){
         var stripe = Stripe($('#stripePublicKey').val());
         var elements = stripe.elements();
         var style = {

diff --git a/views/layouts/layout.hbs b/views/layouts/layout.hbs
@@ -37,7 +37,6 @@
         {{#if admin}}
         <link rel="stylesheet" href="/stylesheets/admin{{config.env}}.css">
         {{/if}}
-        <script src="https://js.stripe.com/v3/"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha256-x3YZWtRjM8bJqf48dFAv/qmgL68SI4jqNWeSLMZaMGA=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
@@ -266,6 +265,7 @@
 		</div>
 		<input type="hidden" id="input_notify_message" value="{{message}}">
 		<input type="hidden" id="input_notify_messageType" value="{{messageType}}">
+        <input type="hidden" id="baseUrl" value="{{config.baseUrl}}">
         <input type="hidden" id="cartCheckout" value="{{checkout}}">
         <input type="hidden" id="cartTheme" value="{{@root.config.theme}}">
         <input type="hidden" id="currencySymbol" value="{{@root.config.currencySymbol}}">

diff --git a/views/partials/payments/stripe.hbs b/views/partials/payments/stripe.hbs
@@ -1,8 +1,12 @@
 <div id="stripe-form">
+    <script src="https://js.stripe.com/v3/"></script>
     <input type="hidden" id="stripePublicKey" value="{{@root.paymentConfig.stripe.publicKey}}">
     <div class="mb-2">{{@root.paymentConfig.stripe.description}}</div>
     <form id="stripe-payment-form">
-      <div id="card-element"></div>
-      <button class="btn btn-outline-success mt-2">Process Payment</button>
+      <div id="payment-element"></div>
+      <button id="submit" class="btn btn-outline-success mt-2">
+          <div class="spinner-border d-none" id="spinner"></div>
+          <span id="button-text">Process Payment</span>
+      </button>
     </form>
 </div>