razorpayjs-card-payment

index.html

<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>

<div class="container payment-container">
  <form id='card_payment'>
    <div class="form-group">
      <label for="card_number">Card Number:</label>
      <input id="card_number" class="form-control" placeholder='XXXX XXXX XXXX XXXX' maxlength=19 />
    </div>
    
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="card_number">Expiry:</label>
          <input id="card_expiry" type='tel' class="form-control" placeholder='MM/YY' maxlength=7 />
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="card_cvv">CVV:</label>
          <input id="card_cvv" class="form-control" placeholder='CVV' maxlength=3 />
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <label for="card_name">Card Holder's Name:</label>
      <input id="card_name" class="form-control" placeholder="Card Holder's name" maxlength=19 />
    </div>
    
    <button id='pay' class="btn btn-success btn-block">Pay</button>
  </form>
</div>


<script>
  var getEl = document.getElementById.bind(document)
  
  // Format the card fields with the Razorpay formatter util
  // https://razorpay.com/docs/razorpayjs/formatting
  var formatter = Razorpay.setFormatter(getEl('card_payment'))
  formatter.add('card', getEl('card_number'))
  formatter.add('expiry', getEl('card_expiry'))
  formatter.add('number', getEl('card_cvv'))
  
  var razorpay = new Razorpay({
    key: 'rzp_test_Jm72ZuRH2lnASz',
      // logo, we'll display it in payment processing popup
    image: 'https://i.imgur.com/n5tjHFD.png',
  });
  
  
  // Get the payment methods to make sure that the payment method is enabled for your account
  razorpay.once('ready', function(response) {
    console.log(response.methods);
    
  })
  
  razorpay.on('payment.success', function(response) {
    alert(response.razorpay_payment_id)
  }).on('payment.error', function(response) {
    alert(response.error.description)
  })
    
  getEl('pay').addEventListener('click', function(e) {
    var data = {
      amount: 100,
      email: '[email protected]',
      contact: '123456789',
      method: 'card',
      'card[name]': getEl('card_name').value,
      'card[number]': getEl('card_number').value,
      'card[cvv]': getEl('card_cvv').value,
      'card[expiry_month]': getEl('card_expiry').value.split('/')[0].trim(),
      'card[expiry_year]': getEl('card_expiry').value.split('/')[1].trim()      
    }
    
    razorpay.createPayment(data)
    e.preventDefault()
  })
</script>

razorpayjs-card-payment.markdown

razorpayjs-card-payment

A Pen by Selva Ganesh B on CodePen.

License.

style.css

.payment-container {
  margin-top: 30px;
  max-width: 400px
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Helpful +1