Generating test credit card number with Free API

Understanding test credit card number

With the advent of payment technology of the touchless society during the pandemic, online shopping is gaining more and more popularity among people. Credit card payment is greatly involved in purchase on every online platforms. However, have you ever visited some suspicious websites that require your credit card numbers? Do you need a a random, valid credit card number to test the payment process of your developing applications, websites or products? A Credit Card Number generator API comes in at this point. This blog article will show you the easiest way to create your own test credit card number generator with step-by-step guide. Read on!

What is a test credit card number and what does it mean? 

A test credit card number is the card number of a testing live credit account provided by a credit card company for testing purpose. The numbers are only valid on a particular test platform or brand and will not result in any real transaction or transfer of funds. Exactly the same as the real credit card, the test numbers are 16 digits long (in general). While they appear to be random, valid Credit Card numbers are in fact created with a published calculation formula. Through the picture below, you will get a better understand of the hidden meaning behind.

Behind the 16-digit string, there are four components in the number:

1. Major Industry Identifier (MII) — identifies the industry of the card. 
2. Issuer Identification Number (IIN) — identifies the issuer of the card. American Express starts with 34 or 37, Mastercard starts with 2221–2720 or 51–55, Visa starts with 4. If card issuers decide to extend their IIN ranges in the future, this will be helpful for updates.
3. Account Number — identifies the customer’s account
4. Checksum — makes sure that the account number is valid

Testing cases of a test credit card number

There are several test cases tat you can test with your test cards:

• Successful payments by card brand or country
• Card errors due to declines, fraud, or invalid data
• Disputes and refunds
• Authentication with 3D Secure and PINs

What are the major industry issuers?

Financial organisations known as credit card issuers provide users credit cards and credit limits. Issuers manage tremendous numbers of features of credit cards, from the application, approval process to distributing cards, then to deciding terms, user rewards, and collecting cardholder payments.

Below are some current major industry issuers:

• American Express
• Bank of America
• Capital One
• Chase
• Citi
• Discover
• U.S. Bank

API – what is it?

We all know that there are somethings we just don’t want do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.

For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.

What exactly does a Test Credit Card Generator API do?

 A Credit Card Generator API is a tool that can quickly generate valid, random test credit card numbers for software testing and data verification purposes. Instead of using a real credit card, you can use the generated test card numbers to validate any payment testing scenarios safely, such as credit card number length, type and issuing network.

How is a test credit card number generated?

A test credit card numbers generator follows the rule of Luhn Algorithm as how all real credit cards number are generated. The generator would normally seeks your desired card issuing Network, such as American Express or Visa, to form the first digit of any credit card number which is called the Major Industry Identifier(MII) and the first six or eight digits which is named as Issuer Identification Number(IIN). And then, the rest numbers are the account number, which are randomly generated using random string method. The last digit is called the Checksum. This digit is automatically determined by the Luhn Algorithm, based on the preceding numbers in the sequence. When users enter this test credit card number to complete transactions, the processing software can use the Luhn Algorithm to “check” whether the specified number is valid, based in part on its check digit.

Create your own Test Credit Card Number Generator API

Why should you choose this server?

The Test Credit Card Generator API is supported by FabriXAPI, an All-in-one API Platform that supports API Needs and it is certified as “AWS Qualified Software” since 2022. You can register for an API portal for free, share and monetise APIs easily on the trustable platform certified by ISO27001.

Features

Using this tool, you can generates random credit/debit card number for testing purposes.

Available vendor names are: 

• visa,
• master-card,
• diners-club,
• american-express,
• discover,
• jcb.

Prerequisites

You will need a suitable Credit Card Number Generator API provider. Using Dev Geek’s Credit Card Number Generator API, you can proceed easily as follows :

1. Sign up for a Developer Account

You need to sign up to the API Portal in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.

2. Active API Subscription

You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.

3. API Credential

An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to FabriXAPI. For more information, please refer to “Create API Key“.

You may check out the full API documentation on FabriXAPI User Guide.

Creating an User Interface

Let’s follow this steps to create your custom test credit card number generator. First, let’s give it an appealing outfit by making the UI. Add the below HTML into your IDE. 

<div id="app">
  <div class="demo-description">
    <h2>Credit Card Number Generator</h2>
    <span>To protect your credentials.</span>
    <br>
    <span>DO NOT save this API Key in the code sandbox!!</span>
  </div>
  <div class="test-area">
    <div class="input-area">
      <span>API Key</span>
      <input
        type="text"
        placeholder="Input your key here"
        v-model="apikey"
      >
      <br>
      
      <span>Network</span>
        <select v-model="network">
          <option value="" disabled selected>Select credit card network here</option>
          <option value="american express">American Express</option>
          <option value="diners club">Diners Club</option>
          <option value="discover">Discover</option>
          <option value="jcb">JCB</option>
          <option value="master card">Master Card</option>
          <option value="visa">Visa</option>
        </select>
      <br>
      <button v-on:click="generate">Generate</button>
    </div>

    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Fill in API Key and select credit card network, then press "Generate".
      </template>
      <template v-else>
        <div v-html="result" />
      </template>
    </div>
  </div>
</div>

Apply CSS on your content

Then, decorate it with CSS.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
  background: #20262E;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
}
 
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  /* height: 400px; */
}
 
.demo-description {
  text-align: center;
  margin-bottom: 20px;
}
 
.demo-description h2 {
  font-weight: semibold;
  margin-bottom: 5px;
}
 
.demo-description span {
  color: #999999;
}
 
.test-area {
  display: flex;
}
 
.input-area {
  text-align: right;
}
 
.input-area span {
  display: inline-block;
  line-height: 48px;
  /* font-size: 24px; */
  margin-right: 8px;
  text-align: right;
  width: 150px;
}
 
.input-area input, select {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  padding: 0 7px;
}

.input-area select {
  height: 32px;
  width: 166px;
}
 
.input-area input::placeholder {
  color: #d0d0d0;
}
 
.input-area button {
  background-color: #57abf0;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 15px;
  width: 166px;
  padding: 15px 10px;
}
 
.output-area {
  color: #505050;
  font-size: 14px;
  margin: 20px;
  margin-right: 0px;
  width: calc(100% - 350px);
}
 
@media screen and (max-width: 616px) {
  .input-area {
    text-align: center;
  }

  .input-area span {
    text-align: left;
  }
   
  .output-area {
    width: calc(100% - 150px);
  }
   
  .input-area button {
    width: 140px;
    padding: 10px 7px;
  }
}
 
.output-area svg {
  transform: scale(0.7) translateX(-30px) translateY(-95px);
}

Interact with your Generator UI using Vue.js

Vue.js is a progressive framework for Javascript. Use it to interact your frontend and backend, and implement the API.

Prerequisites

• Node.js installed on your computer
• Vue.js installed on your computer. Refer to its documentation if you haven’t installed it yet. 
• Axios installed by npm. Refer to its documentation if you haven’t installed it yet.
  • or simply paste this on your command line / terminal:

npm i axios

Follow the below script. We make an API POST request using Axios.

const endpoint = 'https://trial-api-credit-card-number-generator-2m83.gw.openapihub.com/random-card-number';

new Vue({
	el: '#app',
	data() {
  	return {
      network: '',
      apikey: '',
      result: '',
      error: ''
    }
  },
  methods: {
  	generate: function() {
      const axiosConfig = {
        headers: {
          'content-type': 'application/json', 
          'x-openapihub-key': this.apikey
        }
      }
      
      const requestBody = {
        'vendor': this.network
      }
    
  	axios.post(`${endpoint}`, requestBody, axiosConfig)
    	.then(res => {
        this.error = ''
        this.result = `Number -<br>${res.data.number.replace(/(.{4})/g, '$1 ')}`
      }).catch(err => {
          this.error = `Error occurred -<br>${err.response.data.message}`
          console.log('Error', err.response.data.message)
      })
  	}
  }
})

Generate your first test credit card number now

Now that we have all the materials prepared. Give it a try generating your first test credit card number.

Simply fill in the form with API key and pick an Card Issuing Network. Press “Generate”. Swiftly, you can get your set of valid and useful credit card number for your work. 

The output will be normally shown as follows:

{
  "number": "4816154174644394",
  "vendor": "visa"
}

Conclusion

In this tutorial, we have looked an in-depth of what test credit card numbers are and the method creating a custom test credit card number generator on your own. The method makes use of post an API request and interacts your frontend and backend to get the job done. With an enormous number of website online, it’s easy to be targeted by scams. Never provide any real credit card details if you are suspicious of some possibly illegal or fake websites. It is always a good idea to make good use of your test credit card number first to avoid getting yourself into any financial crisis.