Initial commit

bmvantunes · Feb 22, 2017 · c34dbb4 · c34dbb4
commit c34dbb4
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Bruno Antunes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# stripe-3ds
+Super simple example of using Stripe 3d secure API
+
+In this example we have 3 type of cards:
+1. Cards that only work with 3ds
+2. Cards that can work with or without 3ds (optional)
+3. Cards that don't support 3ds
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
+    rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+</head>
+<body>
+  <div class="container">
+    <div class="row">
+      <h1>Cards</h1>
+      <table class="table table-striped table-bordered table-hover table-responsive">
+        <thead><th>3d secure support</th><th>Card Number</th><th>CVC</th><th>Expiry Month</th><th>Expiry Year</th><th></th></thead>
+        <tbody>
+          <tr><td>not_supported</td><td>4242 4242 4242 4242</td><td>123</td><td>12</td><td>2020</td><td><button class="btn btn-primary" onclick="onClick('4242 4242 4242 4242')">Try this card!</button></td></tr>
+          <tr><td>optional</td><td>4000 0000 0000 3055</td><td>123</td><td>12</td><td>2020</td><td><button class="btn btn-primary" onclick="onClick('4000 0000 0000 3055')">Try this card!</button></td></tr>
+          <tr><td>required</td><td>4000 0000 0000 3063</td><td>123</td><td>12</td><td>2020</td><td><button class="btn btn-primary" onclick="onClick('4000 0000 0000 3063')">Try this card!</button></td></tr>
+        </tbody>
+      </table>
+
+      <div class="col-12" id="iframe-payment"></div>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
+  <script>
+    Stripe.setPublishableKey('pk_test_IR0lZ3Ot5IQnsde6xuAmkHvB')
+  </script>
+  <script src="js/api.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/api.js b/js/api.js
@@ -0,0 +1,64 @@
+
+/**
+ * This is the main function - The only one that we should call from outside this file
+ */
+function doPayment(paymentRequest) {
+  return new Promise((resolve, reject) => {
+    const onCreateCardCallback = this.create3DSecure(paymentRequest, resolve, reject);
+    return this.Stripe.source.create({
+      type: 'card',
+      card: {
+        number: paymentRequest.cardNumber,
+        cvc: paymentRequest.cvc,
+        exp_month: paymentRequest.expMonth,
+        exp_year: paymentRequest.expYear
+      }
+    }, onCreateCardCallback);
+  });
+}
+
+function create3DSecure(paymentRequest, resolve, reject) {
+  const onCreate3DSecureCallback = this.createIframe(paymentRequest, resolve, reject);
+  return (status, cardResponse) => {
+    if (status !== 200 || cardResponse.error) {  // problem
+      reject(cardResponse.error);
+    } else if (cardResponse.card.three_d_secure === 'not_supported') {
+      resolve(cardResponse.id);
+    } else {
+      this.Stripe.source.create({
+        type: 'three_d_secure',
+        amount: paymentRequest.amount,
+        currency: paymentRequest.currency,
+        three_d_secure: { card: cardResponse.id },
+        redirect: { return_url: window.location.origin }
+      }, onCreate3DSecureCallback);
+    }
+  };
+}
+
+function createIframe(paymentRequest, resolve, reject) {
+  return (status, stripe3dsResponse) => {
+    if (status !== 200 || stripe3dsResponse.error) {  // problem
+      reject(stripe3dsResponse.error);
+    } else {
+      paymentRequest.nativeElement.innerHTML =
+        '<iframe style="width:100%; height: 800px;" frameborder="0" src="' + stripe3dsResponse.redirect.url + '"></iframe>';
+
+      const onPollCallbackReal = this.onPollCallback(paymentRequest, resolve, reject);
+      this.Stripe.source.poll(stripe3dsResponse.id, stripe3dsResponse.client_secret, onPollCallbackReal);
+    }
+  };
+}
+
+function onPollCallback(paymentRequest, resolve, reject) {
+  return (status, source) => {
+    if (status !== 200 || source.error) {
+      reject(source.error);
+    } else if (source.status === 'canceled' || source.status === 'consumed' || source.status === 'failed') {
+      reject(source.status);
+    } else if (source.three_d_secure.authenticated && source.status === 'chargeable') {
+      paymentRequest.nativeElement.innerHTML = '';
+      resolve(source);
+    }
+  };
+}
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,20 @@
+/**
+ * When we click on a card
+ */
+function onClick(cardNumber) {
+  const paymentRequest = {
+    cardNumber: cardNumber,
+    expYear: '2020',
+    expMonth: '12',
+    cvc: '123',
+    currency: 'GBP',
+    amount: 5000 * 100,
+    nativeElement: document.querySelector('#iframe-payment')
+  };
+
+  doPayment(paymentRequest).then((result) => {
+    this.onPaymentTokenReceived(result);
+  }).catch((error) => {
+    console.error(error);
+  });
+}