How To Integrate Stripe Payment Gateway With Custom Forms

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 :

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

Example :

Submit a Comment

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

Footer Logo

Subscribe

Select Categories