In this article, we will learn how to implement a Stripe payment gateway with your custom HTML form using jquery
Let’s begin.
Step 1 => First of all, go to: https://stripe.com/
Step 2 => Click on the START NOW button for registration. After successful registration, the below page appears.
Step 3 =>Then click on the ‘Developers’ Button on Top Right Corner, Onclick the below page appears.
Click on API Key, And Copy the Following Keys:
1. Publishable key
2. Secret key
Step 4 => Now we Make One Html File Named ‘idenx.html’ For Our Custom Payment Getway Form
Open the idenx.html file and add the code to it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>Document</title> </head> <body> <div class="container mt-lg-5"> <form> <div class="mb-3"> <label for="CardNumber" class="form-label">Card Number</label> <input type="number" class="form-control" id="CardNumber" /> </div> <div class="mb-3"> <label for="Date" class="form-label">Expiry Date</label> <input type="date" class="form-control" id="Date" /> </div> <div class="mb-3"> <label for="CVV" class="form-label">CVV</label> <input type="number" class="form-control" id="CVV" /> </div> <div class="mb-3"> <label for="Amount" class="form-label">Amount</label> <input type="number" class="form-control" id="Amount" /> </div> <button type="button" id="Submeetbyutton" class="btn btn-primary"> Submit </button> </form> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://js.stripe.com/v3/"></script> <script src="/Stripe.js"></script> </body> </html>
Step 5: Now We create one js file named Stripe.js
open the Stripe.js file and paste the below code in it:
var stripe, card; $(document).ready(function () { stripe = Stripe( "'Enter your Publishable key'" ); $("#Submeetbyutton").click(function () { var CardNumber = $("#CardNumber").val(); var CVV = $("#CVV").val(); var ExpDate = $("#Date").val(); var Pincode = $("#Pincode").val(); var FormatedDate = new Date(ExpDate); var DateMonth = FormatedDate.getMonth(); var DateYear = FormatedDate.getFullYear(); var Amount = $("#Amount").val(); Amount = Amount * 100; $.ajax({ url: "https://api.stripe.com/v1/tokens", type: "POST", data: { "card[number]": CardNumber, "card[exp_month]": DateMonth, "card[exp_year]": DateYear, "card[cvc]": CVV, }, headers: { Authorization: "Bearer 'Enter your Secret key'", }, success: (r) => { $.ajax({ url: "https://api.stripe.com/v1/charges", type: "POST", data: { amount: Amount, currency: "usd", description: "Test", source: r.id, }, headers: { Authorization: "Bearer 'Enter your Secret key'", }, success: (r) => { console.log(r); }, error: (r) => { console.log(r); }, }); }, error: (r) => { console.log(r); }, }); }); }); console.log(r);
Note:
Now open your HTML file into the browser, And your page looks like this :
Your Testing credential is :
1. Card Number: 4242424242424242
2. CVV: 132
3. Expiry Date: Your date is must be a future date
4. Amount: It’s your choice
Enter this credential in form and click on submit button
You can see your transaction from here: https://dashboard.stripe.com/test/payments
1. Go to this URL
2. sign in to your account
Now you can see your all payment
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular