Adds the other servers

stripe-samples · May 13, 2022 · 4617635 · 4617635
1 parent 5186260
commit 4617635
Show file tree

Hide file tree

Showing 28 changed files with 1,337 additions and 1,150 deletions.
diff --git a/issuing-elements/.env.sample b/issuing-elements/.env.sample
@@ -4,5 +4,3 @@ STRIPE_SECRET_KEY=sk_test_1234
 STRIPE_PUBLISHABLE_KEY=pk_test_1234
 STATIC_DIR=../../client
 DEMO_CARD_ID=ic_1234
-
-
diff --git a/issuing-elements/client/css/global.css b/issuing-elements/client/css/global.css
@@ -523,3 +523,54 @@ pre {
     transform: scale(1);
   }
 }
+
+
+#card-back {
+  position: relative;
+  width: 384px;
+  height: 244px;
+  background-image: url("../images/card-back.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+#card-details {
+  padding-top: 40%;
+  padding-left: 4%;
+  color: white;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  letter-spacing: 0rem;
+}
+
+#cardholder-name,
+#card-number,
+#card-expiry,
+#card-cvc {
+  height: 24px;
+}
+
+#card-expiry,
+#card-cvc {
+  width: 50px;
+}
+
+#expiry-cvc-wrapper {
+  display: flex;
+}
+
+#expiry-wrapper,
+#cvc-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+#expiry-wrapper {
+  width: 75px;
+}
+
+#card-expiry,
+#card-cvc {
+  margin-left: 4px;
+}
+
diff --git a/issuing-elements/client/index.html b/issuing-elements/client/index.html
@@ -1,97 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <title>Stripe Sample</title>
-  <meta name="description" content="A demo of Stripe" />
-
-  <link rel="icon" href="favicon.ico" type="image/x-icon" />
-  <link rel="stylesheet" href="css/normalize.css" />
-  <link rel="stylesheet" href="css/global.css" />
-  <script src="https://js.stripe.com/v3/"></script>
-  <script src="/index.js" defer></script>
-
-  <!-- Issuing Element Style -->
-  <style>
-    #card-back {
-      position: relative;
-      width: 384px;
-      height: 244px;
-      background-image: url("../images/card-back.png");
-      background-size: 100%;
-      background-repeat: no-repeat;
-    }
-
-    #card-details {
-      padding-top: 40%;
-      padding-left: 4%;
-      color: white;
-      font-size: 14px;
-      font-variant: tabular-nums;
-      letter-spacing: 0rem;
-    }
-
-    #cardholder-name,
-    #card-number,
-    #card-expiry,
-    #card-cvc {
-      height: 24px;
-    }
-
-    #card-expiry,
-    #card-cvc {
-      width: 50px;
-    }
-
-    #expiry-cvc-wrapper {
-      display: flex;
-    }
-
-    #expiry-wrapper,
-    #cvc-wrapper {
-      display: flex;
-      align-items: center;
-    }
-
-    #expiry-wrapper {
-      width: 75px;
-    }
-
-    #card-expiry,
-    #card-cvc {
-      margin-left: 4px;
-    }
-  </style>
-  <!-- Formatter for currency -->
-  <script>
-    var formatter = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    });
-  </script>
-</head>
-<body>
-  <div id="details-container">
-    <div id="card-container" class="col-span-1">
-      <div id="card-back">
-        <div id="card-details">
-          <div id="cardholder-name"></div>
-          <div id="card-number"></div>
-          <div id="expiry-cvc-wrapper">
-            <div id="expiry-wrapper">
-              <div>EXP</div>
-              <div id="card-expiry"></div>
-            </div>
-            <div id="cvc-wrapper">
-              <div>CVV</div>
-              <div id="card-cvc"></div>
+  <head>
+    <meta charset="utf-8" />
+    <title>Stripe Sample</title>
+    <meta name="description" content="A demo of Stripe" />
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/global.css" />
+    <script src="https://js.stripe.com/v3/"></script>
+    <script src="/index.js" defer></script>
+  </head>
+  <body>
+    <div id="details-container">
+      <div id="card-container" class="col-span-1">
+        <div id="card-back">
+          <div id="card-details">
+            <div id="cardholder-name"></div>
+            <div id="card-number"></div>
+            <div id="expiry-cvc-wrapper">
+              <div id="expiry-wrapper">
+                <div>EXP</div>
+                <div id="card-expiry"></div>
+              </div>
+              <div id="cvc-wrapper">
+                <div>CVV</div>
+                <div id="card-cvc"></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/issuing-elements/client/index.js b/issuing-elements/client/index.js
@@ -1,70 +1,75 @@
 document.addEventListener("DOMContentLoaded", async () => {
-    // Load the publishable key from the server. The publishable key
-    // is set in your .env file.
-    const { publishableKey, cardId } = await fetch("/config").then(
-      (r) => r.json()
+  // Load the publishable key from the server. The publishable key
+  // is set in your .env file.
+  const { publishableKey, cardId } = await fetch("/config").then((r) => r.json());
+  if (!publishableKey) {
+    addMessage(
+      "No publishable key returned from the server. Please check `.env` and try again"
     );
-    if (!publishableKey) {
-      addMessage(
-        "No publishable key returned from the server. Please check `.env` and try again"
-      );
-      alert("Please set your Stripe publishable API key in the .env file");
-    }
-
-    const stripe = Stripe(publishableKey, {
-      apiVersion: "2020-08-27",
-      betas: ["issuing_elements_2"]
-    });
-
-    const elements = stripe.elements();
-    let nonce;
-    const renderCard = async () => {
-      const nonceResult = await stripe.createEphemeralKeyNonce({
-        issuingCard: cardId,
-      });
-      const settings = {
-        method: "POST",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          cardId: cardId,
-          nonce: nonceResult.nonce,
-        }),
-      };
-      let response = await fetch("/get_card", settings);
-      ephemeralKey = await response.json();
-      const cardResult = await stripe.retrieveIssuingCard(cardId, {
-        ephemeralKeySecret: ephemeralKey.secret,
-        nonce: nonceResult.nonce,
-      });
-      const style = {
-        base: {
-          color: "white",
-          fontSize: "14px",
-          lineHeight: "24px",
-        },
-      };
-      const name = document.getElementById("cardholder-name");
-      const number = elements.create("issuingCardNumberDisplay", {
-        style,
-        issuingCard: cardId,
-      });
-      const cvc = elements.create("issuingCardCvcDisplay", {
-        style,
-        issuingCard: cardId,
-      });
-      const expiry = elements.create("issuingCardExpiryDisplay", {
-        style,
-        issuingCard: cardId,
-      });
-      // Mount the card details onto DOM elements in your web application
-      name.textContent = cardResult.issuingCard.cardholder.name;
-      number.mount("#card-number");
-      cvc.mount("#card-cvc");
-      expiry.mount("#card-expiry");
-    };
-    renderCard();
+    alert("Please set your Stripe publishable API key in the .env file");
+  }
+
+  // Initialize Stripe.js
+  const stripe = Stripe(publishableKey, {
+    apiVersion: "2020-08-27",
+    betas: ["issuing_elements_2"] // Only needed during the beta.
   });
-
+
+  // Create an ephemeral key nonce using the ID of the issued card.
+  const nonceResult = await stripe.createEphemeralKeyNonce({
+    issuingCard: cardId,
+  });
+
+  // Pass the nonce to the server to create a new ephemeral key
+  // for the card, so that we can retrieve its details client side.
+  const { ephemeralKey } = await fetch("/create-card-key", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      cardId: cardId,
+      nonce: nonceResult.nonce,
+      apiVersion: '2020-08-27',
+    }),
+  }).then(r => r.json());
+
+  // Retrieve the card
+  const cardResult = await stripe.retrieveIssuingCard(cardId, {
+    ephemeralKeySecret: ephemeralKey.secret,
+    nonce: nonceResult.nonce,
+  });
+
+  const style = {
+    base: {
+      color: "white",
+      fontSize: "14px",
+      lineHeight: "24px",
+    },
+  };
+
+  // Mount and display the card details
+  const elements = stripe.elements();
+  const number = elements.create("issuingCardNumberDisplay", {
+    style,
+    issuingCard: cardId,
+  });
+  number.mount("#card-number");
+
+  const cvc = elements.create("issuingCardCvcDisplay", {
+    style,
+    issuingCard: cardId,
+  });
+  cvc.mount("#card-cvc");
+
+  const expiry = elements.create("issuingCardExpiryDisplay", {
+    style,
+    issuingCard: cardId,
+  });
+  expiry.mount("#card-expiry");
+
+  // Mount the card details onto DOM elements in your web application
+  const name = document.getElementById("cardholder-name");
+  name.textContent = cardResult.issuingCard.cardholder.name;
+});
diff --git a/issuing-elements/server/dotnet/Configuration/StripeOptions.cs b/issuing-elements/server/dotnet/Configuration/StripeOptions.cs
@@ -5,6 +5,5 @@ public class StripeOptions
     public string PublishableKey { get; set; }
     public string SecretKey { get; set; }
     public string WebhookSecret { get; set; }
-    public string Price { get; set; }
-    public string Domain { get; set; }
+    public string DemoCardId { get; set; }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,5 +4,3 @@ STRIPE_SECRET_KEY=sk_test_1234
		STRIPE_PUBLISHABLE_KEY=pk_test_1234
		STATIC_DIR=../../client
		DEMO_CARD_ID=ic_1234