Study Smart, Not Hard. - StudyMuch

Payment Method HTML Code

Published by StudyMuch on

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:
[email protected]&family=Shantell+Sans:[email protected]&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.

Payment Method HTML

Video Output:

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.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *