Merge pull request #29 from adreyfus-stripe/store-updates

Updated demo to use new APIs

Author: sdras

README.md

@@ -14,17 +14,17 @@ There are two articles explaining how this site is set up:
 
 ``` bash
 # install dependencies
-$ yarn install or npm install
+$ yarn install or npm run install
 
 # serve with hot reload at localhost:3000
 $ yarn dev or npm run dev
 
 # build for production and launch server
-$ yarn build or npm build
-$ yarn start or npm start
+$ yarn build or npm run build
+$ yarn start or npm run start
 
 # generate static project
-$ yarn generate or npm generate
+$ yarn generate or npm run generate
 ```
 
 For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

components/AppCard.vue

@@ -9,21 +9,32 @@
       <label for="card">Credit Card</label>
       <br />
       <small>
-        Test using this credit card:
-        <span class="cc-number">4242 4242 4242 4242</span>, and enter any 5 digits for the zip code
+        Test using these Stripe test credit card numbers with any CVC, postal code, and expiration date in the future:
+        <ul>
+          <li>
+            <span class="cc-number">4242 4242 4242 4242</span>
+          </li>
+          <li>
+            <span class="cc-number">4000 0027 6000 3184</span> (requires authentication, will trigger a pop-up)
+          </li>
+          <li>
+            <span class="cc-number">4000 0000 0000 9995</span> (will decline with a decline code of insufficient funds)
+          </li>
+        </ul>
       </small>
       <card
         class="stripe-card"
         id="card"
         :class="{ complete }"
-        stripe="pk_test_5ThYi0UvX3xwoNdgxxxTxxrG"
+        stripe="pk_test_8ssZgwB2PiH0ajJksD2gVbsG00u7Y3IDPv"
         :options="stripeOptions"
         @change="complete = $event.complete"
       />
+      <small class="card-error">{{error}}</small>
       <button
         class="pay-with-stripe button"
         @click="pay"
-        :disabled="!complete || !stripeEmail"
+        :disabled="!complete || !stripeEmail || loading"
       >Pay with credit card</button>
     </div>
 
@@ -47,7 +58,7 @@
 </template>
 
 <script>
-import { Card, createToken } from "vue-stripe-elements-plus";
+import { Card, handleCardPayment } from "vue-stripe-elements-plus";
 
 import { mapState } from "vuex";
 
@@ -56,26 +67,53 @@ export default {
   computed: {
     ...mapState(["cartUIStatus"])
   },
+  mounted() {
+    // create a PaymentIntent on Stripe with order information
+    this.$store.dispatch("createPaymentIntent");
+  },
   data() {
     return {
       complete: false,
       stripeOptions: {
         // you can configure that cc element. I liked the default, but you can
         // see https://stripe.com/docs/stripe.js#element-options for details
       },
-      stripeEmail: ""
+      stripeEmail: "",
+      error: "",
+      loading: false
     };
   },
   methods: {
     pay() {
-      createToken().then(data => {
-        const stripeData = { data, stripeEmail: this.stripeEmail };
-        this.$store.dispatch("postStripeFunction", stripeData);
+      // confirms the payment and will automatically display a
+      // pop-up modal if the purchase requires authentication
+      this.loading = true;
+      handleCardPayment(this.$store.getters.clientSecret, {
+        receipt_email: this.stripeEmail
+      }).then(result => {
+        this.loading = false;
+        if (result.error) {
+          // show the error to the customer, let them try to pay again
+          this.error = result.error.message;
+          setTimeout(() => (this.error = ""), 3000);
+        } else if (
+          result.paymentIntent &&
+          result.paymentIntent.status === "succeeded"
+        ) {
+          // payment succeeded! show a success message
+          // there's always a chance your customer closes the browser after the payment process and before this code runs so
+          // we will use the webhook in handle-payment-succeeded for any business-critical post-payment actions
+          this.$store.commit("updateCartUI", "success");
+          setTimeout(this.clearCart, 5000);
+        } else {
+          this.error = "Some unknown error occured";
+          setTimeout(() => (this.error = ""), 3000);
+        }
       });
     },
     clearCart() {
       this.complete = false;
-      this.$store.commit("clearCartCount");
+      this.$store.commit("clearCart");
     }
   }
 };

functions/create-payment-intent.js

@@ -0,0 +1,84 @@
+// An endpoint that calculates the order total and creates a 
+// PaymentIntent on Stripe 
+
+require("dotenv").config();
+const axios = require("axios");
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY),
+  headers = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Headers": "Content-Type"
+  };
+
+exports.handler = async (event, context) => {
+  // CORS
+  if (event.httpMethod === "OPTIONS") {
+    return {
+      statusCode: 200,
+      headers
+    };
+  }
+
+  const data = JSON.parse(event.body);
+  console.log(data);
+
+  if (!data.items) {
+    console.error("List of items to purchase is missing.");
+
+    return {
+      statusCode: 400,
+      headers,
+      body: JSON.stringify({
+        status: "missing information"
+      })
+    };
+  }
+
+  // Stripe payment processing begins here
+  try {
+    // Always calculate the order amount on your server to prevent customers
+    // from manipulating the order amount from the client
+    // Here we will use a simple json file to represent inventory
+    // but you could replace this with a DB lookup
+    const storeDatabase = await axios.get(
+      "https://wizardly-sinoussi-7841d1.netlify.com/storedata.json"
+    );
+
+    const amount = data.items.reduce((prev, item) => {
+      // lookup item information from "database" and calculate total amount
+      const itemData = storeDatabase.data.find(
+        storeItem => storeItem.id === item.id
+      );
+      return prev + itemData.price * 100 * item.quantity;
+    }, 0);
+
+    // Create a PaymentIntent on Stripe
+    // A PaymentIntent represents your customer's intent to pay
+    // and needs to be confirmed on the client to finalize the payment
+    const paymentIntent = await stripe.paymentIntents.create({
+      currency: "usd",
+      amount: amount,
+      description: "Order from store"
+    });
+
+    // Send the client_secret to the client
+    // The client secret has a limited set of permissions that
+    // let you finalize the payment and update some details from the client
+    return {
+      statusCode: 200,
+      headers,
+      body: JSON.stringify({
+        clientSecret: paymentIntent.client_secret
+      })
+    };
+  } catch (err) {
+    console.log(err);
+
+    return {
+      statusCode: 400,
+      headers,
+      body: JSON.stringify({
+        status: err
+      })
+    };
+  }
+};

functions/handle-payment-succeeded.js

@@ -0,0 +1,49 @@
+// Webhook that listens for events sent from Stripe
+// Requires configuration in the Stripe Dashboard
+// For more information read https://stripe.com/docs/webhooks
+require("dotenv").config();
+
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+// Create your webhook in the Stripe dashboard at https://dashboard.stripe.com/webhooks
+// Use the secret listed in the "Signing secret" section
+const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET;
+
+exports.handler = async (event, context) => {
+  const sig = event.headers["stripe-signature"];
+  let stripeEvent;
+
+  try {
+    // Verifies that the event was sent by Stripe and deserializes the event
+    stripeEvent = stripe.webhooks.constructEvent(
+      event.body,
+      sig,
+      endpointSecret
+    );
+  } catch (err) {
+    return { statusCode: 400 };
+  }
+
+  // Handle the event
+  switch (stripeEvent.type) {
+    case "payment_intent.succeeded":
+      const paymentIntent = stripeEvent.data.object;
+      console.log('object', paymentIntent)
+      console.log(
+        "Payment was successful! Charge information:",
+        paymentIntent.charges.data.filter(charge => charge.status === "succeeded")
+      );
+      break;
+    case "charge.dispute.created":
+      const charge = stripeEvent.data.object;
+      console.log("Someone disputed a payment!");
+      break;
+    // ... handle other event types
+    default:
+      // Unexpected event type
+      return { statusCode: 400 };
+  }
+
+  // Return a 200 response to acknowledge receipt of the event
+  return { statusCode: 200 };
+};

functions/index.js

@@ -21,7 +21,7 @@
     "stripe": "^7.4.0",
     "uuid": "^3.3.2",
     "vue-star-rating": "^1.6.1",
-    "vue-stripe-elements-plus": "^0.2.10"
+    "vue-stripe-elements-plus": "^0.3.2"
   },
   "devDependencies": {
     "nodemon": "^1.18.9"