Introduction

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.

Html Code :

<!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:

JS Code:

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:

Don’t forget to change your ‘Publishable Key’ and your ‘Secret key’ into a Stripe.js file
We multiply our Amount by 100 because our currency is “USD”, so we covert our amount into sents and pass it into ajax call data

Now open your HTML file into the browser, And your page looks like this :