| const express = require("express"); |
|
|
| const app = express(); |
| const PORT = process.env.PORT || 5900; |
|
|
| function generatePin() { |
| return Math.floor(1000 + Math.random() * 9000).toString(); |
| } |
|
|
| app.get("/", (req, res) => { |
| res.send(` |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Stripe Elements Demo</title> |
| |
| <script src="https://js.stripe.com/v3/"></script> |
| |
| <style> |
| body{ |
| font-family:Arial; |
| background:#f5f5f5; |
| padding:40px; |
| } |
| .container{ |
| max-width:420px; |
| margin:auto; |
| background:#fff; |
| padding:20px; |
| border-radius:8px; |
| } |
| #card-element{ |
| border:1px solid #ccc; |
| padding:12px; |
| border-radius:6px; |
| } |
| button{ |
| width:100%; |
| padding:12px; |
| margin-top:20px; |
| } |
| #pin{ |
| font-size:32px; |
| color:#1565c0; |
| margin-top:20px; |
| } |
| #error{ |
| color:red; |
| margin-top:15px; |
| } |
| </style> |
| |
| </head> |
| <body> |
| |
| <div class="container"> |
| |
| <h2>Add Card</h2> |
| |
| <form id="payment-form"> |
| |
| <div id="card-element"></div> |
| |
| <button id="add-card"> |
| Add Card |
| </button> |
| |
| </form> |
| |
| <div id="pin"></div> |
| |
| <div id="error"></div> |
| |
| </div> |
| |
| <script> |
| |
| const stripe = Stripe("pk_test_TYooMQauvdEDq54NiTphI7jx"); |
| |
| const elements = stripe.elements(); |
| |
| const style = { |
| base:{ |
| color:"#32325d", |
| lineHeight:"18px", |
| fontSize:"16px", |
| "::placeholder":{ |
| color:"#aab7c4" |
| } |
| }, |
| invalid:{ |
| color:"#fa755a" |
| } |
| }; |
| |
| const card = elements.create("card",{style}); |
| |
| card.mount("#card-element"); |
| |
| function generatePin(){ |
| return Math.floor(1000+Math.random()*9000).toString(); |
| } |
| |
| document.getElementById("payment-form") |
| .addEventListener("submit",async function(e){ |
| |
| e.preventDefault(); |
| |
| document.getElementById("error").textContent=""; |
| document.getElementById("pin").textContent=""; |
| |
| const result = await stripe.createPaymentMethod({ |
| type:"card", |
| card:card |
| }); |
| |
| if(result.error){ |
| document.getElementById("error").textContent = |
| "Please add card to continue."; |
| return; |
| } |
| |
| document.getElementById("pin").textContent = |
| "Generated PIN: " + generatePin(); |
| |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
| `); |
| }); |
|
|
| app.listen(PORT, "0.0.0.0", () => { |
| console.log(`Server running on http://127.0.0.1:${PORT}`); |
| }); |
