cleanup

.env.default

@@ -0,0 +1,2 @@
+SYNCANO_INSTANCE=
+TESTDELETE=

README.md

@@ -1,2 +1,23 @@
-# syncano-react-demo-stripe-payments
-A simple app to demonstrate the integration of stripe-payments socket
+## syncano-react-demo-stripe-payments
+
+This demo features a sample payment interface that uses [Syncano Stripe socket](https://syncano.io/#/sockets/stripe-payments) to illustrate payment and card services on the web.
+
+![Demo](https://media.giphy.com/media/26wkEMe7xmcf8Faak/giphy.gif)
+
+### Description/ Usage
+This simple demo allows you to make payment, create cards and delete cards as a customer.
+On mounting of the application, a `customerID` is generated to identify user, When the <payment> page loads, it displays a form with bunch of inputs ready to receive credit card data. Remember to use any of [Stripe testing credit card](https://stripe.com/docs/testing#cards), any three or four digit CVC code (depending on the of type card) and a valid month and year; to make payments on this demo application. On successful submission of credit card, a user can decide to create a card and a token would be generated to ensure card is being created. Created cards can also be deleted.
+![stripe test cards](https://media.giphy.com/media/xUOwGhM0Wnk5IoqeGI/giphy.gif)
+
+
+### Local Setup
+- Clone this repo 
+- Move to project repo 
+- Install dependencies `npm install`
+- Create a .env file on the root directory. Assign the instance name where two-factor-auth socket attached to the `SYNCANO_INSTANCE`
+  e.g `SYNCANO_INSTANCE=abcd`
+- Run `npm start` to start project
+
+
+
+

src/actions/cardActions.js

@@ -1,111 +1,80 @@
 import axios from 'axios';
-import SyncanoClient from 'syncano-client';
 import actionTypes from '../actions/actionTypes';
+import { API, createAsyncAction } from './util';
 
 
-const s = new SyncanoClient(process.env.SYNCANO_INSTANCE);
-
 const {
   CREATE_CARD_SUCCESSFUL,
   CREATE_CARD_FAILED,
   DELETE_CARD_SUCCESSFUL,
   DELETE_CARD_FAILED
 } = actionTypes;
 
-/**
- *
- * @param {*} cardResponse
- * @returns {object} - action
- */
-const createCardSuccessful = (cardResponse) => {
-  return {
-    type: CREATE_CARD_SUCCESSFUL,
-    payload: { data: cardResponse }
-  };
-};
-
-/**
- *
- * @param {*} error
- * @returns {object} - action
- */
-const createCardFailed = (error) => {
-  return {
-    error,
-    type: CREATE_CARD_FAILED
-  };
-};
-
-/**
- *
- * @param {*} cardResponse
- * @returns {object} - action
- */
-const deleteCardSuccessful = (cardResponse) => {
-  return {
-    type: DELETE_CARD_SUCCESSFUL,
-    payload: { data: cardResponse }
-  };
-};
-  /**
-   *
-   * @param {*} error
-   * @returns {object} - action
-   */
-const deleteCardFailed = (error) => {
-  return {
-    error,
-    type: DELETE_CARD_FAILED
-  };
-};
-
 /**
  *
  * @param {*} customerID - for creating card
  * @param {*} source - for creating card
  * @returns {function} - dispatch
  */
 export const createCard = (customerID, source) => {
-  return (dispatch) => {
-    const args = {
-      customerID,
-      cardParams: { source }
-    };
-    return s
-      .post('stripe-payments/cards/card', args)
-      .then((response) => {
-        if (response.statusCode === 200) {
-          dispatch(createCardSuccessful({
-            cardID: response.data.id,
-            brand: response.data.brand,
-            last4: response.data.last4,
-            exp_month: response.data.exp_month,
-            exp_year: response.data.exp_year }));
-        }
-      })
-      .catch((error) => {
-        dispatch(createCardFailed(error));
-      });
-  };
+  return createAsyncAction(
+    CREATE_CARD_SUCCESSFUL,
+    CREATE_CARD_FAILED,
+    () => API.post(
+      'stripe-payments/cards/card',
+      {
+        customerID,
+        cardParams: { source }
+      },
+      (response) => {
+        return {
+          cardID: response.data.id,
+          brand: response.data.brand,
+          last4: response.data.last4,
+          exp_month: response.data.exp_month,
+          exp_year: response.data.exp_year
+        };
+      }
+    )
+  );
 };
 
+
+// export const deleteCard = (customerID, cardID) => {
+//   return createAsyncAction(
+//     DELETE_CARD_SUCCESSFUL,
+//     DELETE_CARD_FAILED,
+//     () => API.delete(
+//       'stripe-payments/cards/card',
+//       { customerID, cardID },
+//       (response) => {
+//         return { data: { cardID: response.data.id } };
+//       }
+//     )
+//   );
+// };
 export const deleteCard = (customerID, cardID) => {
   return (dispatch) => {
     const args = { customerID, cardID };
     return axios({
       data: args,
       method: 'DELETE',
-      url: 'https://api.syncano.io/v2/instances/dry-dream-7999/endpoints/sockets/stripe-payments/cards/card/',
+      url: `${process.env.TESTDELETE}/stripe-payments/cards/card/`,
     })
       .then((response) => {
         if (response.data.message === 'Card Deleted') {
-          dispatch(deleteCardSuccessful({
-            cardID: response.data.id,
-          }));
+          dispatch({
+            type: DELETE_CARD_SUCCESSFUL,
+            payload: {
+              data: { cardID: response.data.id } }
+          });
         }
       })
       .catch((error) => {
-        dispatch(deleteCardFailed(error));
+        dispatch({
+          type: DELETE_CARD_FAILED,
+          error,
+        });
       });
   };
 };

src/actions/customerActions.js

@@ -1,58 +1,33 @@
-import SyncanoClient from 'syncano-client';
 import actionTypes from '../actions/actionTypes';
-
-
-const s = new SyncanoClient(process.env.SYNCANO_INSTANCE);
+import { createAsyncAction, API } from './util';
 
 const { CREATE_CUSTOMER_SUCCESSFUL, CREATE_CUSTOMER_FAILED } = actionTypes;
-
-/**
- *
- * @param {*} customerParameterId
- * @returns {object} - action
- */
-const createCustomerSuccessful = (customerParameterId) => {
-  return {
-    type: CREATE_CUSTOMER_SUCCESSFUL,
-    payload: { customerId: customerParameterId }
-  };
-};
-
-/**
- *
- * @param {*} error
- * @returns {object} - action
- */
-const createCustomerFailed = (error) => {
-  return {
-    type: CREATE_CUSTOMER_FAILED,
-    error
-  };
-};
-
 /**
  *
  * @param {*} accountBalance
  * @returns {function} - dispatch
  */
 const createCustomer = (accountBalance) => {
-  return (dispatch) => {
-    const args = { customerParameter: accountBalance };
-    if (localStorage.getItem('customerId') === null) {
-      return s
-        .post('stripe-payments/customers/customer', args)
-        .then((response) => {
-          if (response.statusCode === 200) {
-            localStorage.setItem('customerId', response.data.id);
-            dispatch(createCustomerSuccessful(localStorage.customerId));
-          }
-        })
-        .catch((error) => {
-          dispatch(createCustomerFailed(error));
-        });
-    }
-    dispatch(createCustomerSuccessful(localStorage.customerId));
-  };
+  return createAsyncAction(
+    CREATE_CUSTOMER_SUCCESSFUL,
+    CREATE_CUSTOMER_FAILED,
+    () => API.post(
+      'stripe-payments/customers/customer',
+      {
+        customerParameter: accountBalance
+      },
+      (response) => {
+        if (localStorage.getItem('customerId') === null) {
+          localStorage.setItem('customerId', response.data.id);
+          return {
+            customerId: localStorage.customerId
+          };
+        } return {
+          customerId: localStorage.customerId
+        };
+      }
+    )
+  );
 };
 
 export default createCustomer;

src/actions/generateTokenActions.js

@@ -1,56 +1,31 @@
-import SyncanoClient from 'syncano-client';
 import actionTypes from '../actions/actionTypes';
+import { createAsyncAction, API } from './util';
 
-const s = new SyncanoClient(process.env.SYNCANO_INSTANCE);
-const { GET_TOKEN_SUCCESSFUL, GET_TOKEN_FAILED, CLEAR_TOKEN_SUCCESS_FLAG } = actionTypes;
-
-/**
- *
- * @param {*} tokenID
- * @returns {object} - action
- */
-const getTokenSuccessful = (tokenID) => {
-  return {
-    type: GET_TOKEN_SUCCESSFUL,
-    payload: { source: tokenID }
-  };
-};
-
-/**
- *
- * @param {*} error
- * @returns {object} - action
- */
-const getTokenFailed = (error) => {
-  return {
-    type: GET_TOKEN_FAILED,
-    error
-  };
-};
+const {
+  GET_TOKEN_SUCCESSFUL,
+  GET_TOKEN_FAILED,
+  CLEAR_TOKEN_SUCCESS_FLAG
+} = actionTypes;
 
 /**
  *
  * @param {*} card
  * @returns {function} - dispatch
  */
 const generateToken = (card) => {
-  return (dispatch) => {
-    const args = {
-      tokenParams: {
-        card
+  return createAsyncAction(
+    GET_TOKEN_SUCCESSFUL,
+    GET_TOKEN_FAILED,
+    () => API.post(
+      'stripe-payments/tokens/token',
+      {
+        tokenParams: { card }
+      },
+      (response) => {
+        return { source: response.data.id };
       }
-    };
-    return s
-      .post('stripe-payments/tokens/token', args)
-      .then((response) => {
-        if (response.message === 'Token created successfully') {
-          dispatch(getTokenSuccessful(response.data.id));
-        } dispatch(getTokenFailed(response.message));
-      })
-      .catch((error) => {
-        dispatch(getTokenFailed(error));
-      });
-  };
+    )
+  );
 };
 
 const clearTokenSuccessFlag = () => {