Payment Method HTML Code
Payment Method HTML Code
In this article you will learn and get code to create how to design a payment method page with HTML, CSS and JavaScript. That page provided a platform for payment with Debit Card and Credit Card. So, let’s start the learning this tutorial. (Payment Method HTML Code).
Hypertext Markup Language, or HTML, is the building block of all web pages. It enables developers to create and design web pages and gives material a framework. Making it simpler for clients to pay for their purchases by adding payment options to your website using HTML code.
Here we create a simple payment method with HTML, CSS and JavaScript. First, we create the HTML Document.
HTML Document
<!DOCTYPE html> <html lang="en"> <head> <!-- (StudyMuch Tech. Pvt. Ltd.) --> <!-- Payment method Card --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Payment</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans: ital@1&family=Shantell+Sans:wght@500&display=swap" rel="stylesheet"> <script src="https://js.stripe.com/v3"></script> </head> <body> <form id="payment-form" action=""> <div class="form-row"> <a id="sm-link" href="https://studymuch.in"><p id="sm"> Powered by StudyMuch Tech.</p></a> <label for="card-element"> <h3 id="paym">Credit and Debit Card for Payment</h3> </label> <div id="card-element"> <!--A Strip element are inserted here--> </div> <div id="card-errors" role="alert"> </div> <button id="submit">Pay</button> </div> </form> </body> </html>
Above you can see the HTML Document, where we create a HTML Form for design the Payment Method, and create one Submit Button that is use for Paying.
CSS Document
<style> body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgb(30, 1, 1); } form{ display: flex; justify-content: center; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); background-color: rgb(147, 216, 250); padding: 20px; font-weight: bold; border-radius: 10px; font-family: 'Josefin Sans', sans-serif; } #submit{ margin: 10px ; padding: 5px 20px; border: none; border-radius: 10px; color: white; background-color: green; cursor: pointer; font-size: 16px; } #sm { line-height: 0px; text-align: center; color: rgb(135, 77, 1); } #sm-link{ text-decoration: none; cursor: pointer; /* font-family: 'Josefin Sans', sans-serif; */ font-family: 'Rancho', cursive; } </style>
Above CSS document is noting that is use only for design the HTML Document, and you know why we use the CSS and its works.
JavaScript Document
Here the JavaScript document is most important here all the logic are created, how to get payment or how to pay. Through JavaScript created all the card element such as Card Number section, Card Spire Date section, and created logic, if payment is done and card number is incorrect or incomplete etc. all the logic are created with the help of JavaScript.
JavaScript:
<script> // Set up Stripe.js and Elements to use in checkout form var stripe = Stripe('YOUR_STRIPE_PUBLISHABLE_KEY'); var elements = stripe.elements(); // Create an instance of the card Element var card = elements.create('card'); // Add an instance of the card Element into the `card-element` <div> card.mount('#card-element'); // Handle form submission var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); // Disable the submit button to prevent repeated clicks document.getElementById('submit').disabled = true; // Create a token from the card information entered by the user stripe.createToken(card).then(function(result) { if (result.error) { // Inform the user if there was an error var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; // Re-enable the submit button to allow user to fix the error and resubmit document.getElementById('submit').disabled = false; } else { // Send the token to your server to process the payment stripeTokenHandler(result.token); } }); }); // Submit the form with the token ID to your server function stripeTokenHandler(token) { // Insert the token ID into the form so it gets submitted to the server var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); } </script>
Output:
Here the output of above coding, all documents HTML, CSS and JavaScript. See below how our Payment Method Card is looking.
So, in this article you learn how to create simple payment method from cards and get complete code of Payment method. I hope you understand this tutorial well and if you have any doubt don’t hesitate to use comment section.
Read Also –
1 Comment
slot gacor · March 23, 2023 at 3:33 am
I?ve read a few good stuff here. Certainly worth bookmarking for revisiting. I surprise how much effort you put to create such a magnificent informative website.