From 900ee10a0a6a7634f3013387f2b886582dcf422d Mon Sep 17 00:00:00 2001 From: Revanth <109272714+revanth1718@users.noreply.github.com> Date: Fri, 9 Aug 2024 11:21:46 +0530 Subject: [PATCH] Stripe API --- New_APIs/Stripe API/index.html | 25 ++++++++++++ New_APIs/Stripe API/index.js | 51 +++++++++++++++++++++++++ New_APIs/Stripe API/package-lock.json | 37 ++++++++++++++++++ New_APIs/Stripe API/package.json | 17 +++++++++ New_APIs/Stripe API/server.js | 27 +++++++++++++ New_APIs/Stripe API/style.css | 55 +++++++++++++++++++++++++++ 6 files changed, 212 insertions(+) create mode 100644 New_APIs/Stripe API/index.html create mode 100644 New_APIs/Stripe API/index.js create mode 100644 New_APIs/Stripe API/package-lock.json create mode 100644 New_APIs/Stripe API/package.json create mode 100644 New_APIs/Stripe API/server.js create mode 100644 New_APIs/Stripe API/style.css diff --git a/New_APIs/Stripe API/index.html b/New_APIs/Stripe API/index.html new file mode 100644 index 0000000..8305ef8 --- /dev/null +++ b/New_APIs/Stripe API/index.html @@ -0,0 +1,25 @@ + + + + + + + Stripe Payment Integration + + +
+

Stripe Payment Integration

+
+
+
+
+
+ + +
+
+
+ + + + diff --git a/New_APIs/Stripe API/index.js b/New_APIs/Stripe API/index.js new file mode 100644 index 0000000..e6af673 --- /dev/null +++ b/New_APIs/Stripe API/index.js @@ -0,0 +1,51 @@ +// Initialize Stripe +const stripe = Stripe('YOUR_PUBLIC_STRIPE_KEY'); + +// Create an instance of Elements +const elements = stripe.elements(); + +// Create an instance of the card Element +const card = elements.create('card'); + +// Add an instance of the card Element into the `card-element` div +card.mount('#card-element'); + +// Handle real-time validation errors from the card Element +card.on('change', function(event) { + const displayError = document.getElementById('card-errors'); + if (event.error) { + displayError.textContent = event.error.message; + } else { + displayError.textContent = ''; + } +}); + +// Handle form submission +const form = document.getElementById('payment-form'); +form.addEventListener('submit', async (event) => { + event.preventDefault(); + + const {token, error} = await stripe.createToken(card); + + if (error) { + // Inform the user if there was an error + const errorElement = document.getElementById('card-errors'); + errorElement.textContent = error.message; + } else { + // Send the token to your server + const response = await fetch('/charge', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ token: token.id }) + }); + + const data = await response.json(); + if (data.success) { + alert('Payment Successful!'); + } else { + alert('Payment Failed!'); + } + } +}); diff --git a/New_APIs/Stripe API/package-lock.json b/New_APIs/Stripe API/package-lock.json new file mode 100644 index 0000000..e21767b --- /dev/null +++ b/New_APIs/Stripe API/package-lock.json @@ -0,0 +1,37 @@ +{ + "name": "stripe-payment-integration", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "express": { + "version": "4.17.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", + "integrity": "sha512-G7fYv8zS0D7ftu3gnLsOniwhgLU4k9v+1NEtFPP07/Oa8XJ51FtdUKLqIvsTcZo5ua23NO4s9Hr77BM19DOf1g==", + "requires": { + "accepts": "1.3.7", + "array-flatten": "1.1.1", + "body-parser": "1.19.0", + "content-disposition": "0.5.3", + "cookie": "0.4.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "1.1.2", + "encodeurl": "1.0.2", + "escape-html": "1.0.3", + "etag": "1.8.1", + "finalhandler": "1.1.2", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "1.1.2", + "on-finished": "2.3.0", + "parseurl": "1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "2.0.6", + "qs": "6.7.0", + "range-parser": "1.2.1" + } + } + } + } + \ No newline at end of file diff --git a/New_APIs/Stripe API/package.json b/New_APIs/Stripe API/package.json new file mode 100644 index 0000000..3a3694d --- /dev/null +++ b/New_APIs/Stripe API/package.json @@ -0,0 +1,17 @@ +{ + "name": "stripe-payment-integration", + "version": "1.0.0", + "description": "A simple payment integration using Stripe API", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "author": "Your Name", + "license": "ISC", + "dependencies": { + "express": "^4.17.1", + "stripe": "^8.0.0", + "body-parser": "^1.19.0" + } + } + \ No newline at end of file diff --git a/New_APIs/Stripe API/server.js b/New_APIs/Stripe API/server.js new file mode 100644 index 0000000..e15a86c --- /dev/null +++ b/New_APIs/Stripe API/server.js @@ -0,0 +1,27 @@ +const express = require('express'); +const stripe = require('stripe')('YOUR_SECRET_STRIPE_KEY'); +const bodyParser = require('body-parser'); + +const app = express(); +app.use(express.static('public')); +app.use(bodyParser.json()); + +app.post('/charge', async (req, res) => { + try { + const { token } = req.body; + const charge = await stripe.charges.create({ + amount: 5000, // Amount in cents (e.g., $50.00) + currency: 'usd', + source: token, + description: 'Example charge' + }); + res.json({ success: true }); + } catch (error) { + console.error('Error creating charge:', error); + res.status(500).json({ success: false }); + } +}); + +app.listen(3000, () => { + console.log('Server is running on port 3000'); +}); diff --git a/New_APIs/Stripe API/style.css b/New_APIs/Stripe API/style.css new file mode 100644 index 0000000..78eb639 --- /dev/null +++ b/New_APIs/Stripe API/style.css @@ -0,0 +1,55 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #6772e5, #ff5e57); + color: #333; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; +} + +header { + text-align: center; + margin-bottom: 20px; +} + +header h1 { + font-size: 2.5em; + color: #fff; +} + +main { + background: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + width: 300px; +} + +form { + display: flex; + flex-direction: column; + gap: 10px; +} + +button { + padding: 10px; + font-size: 1em; + color: #fff; + background-color: #6772e5; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #5469d4; +} + +#card-errors { + color: red; + margin-top: 10px; +}