Pay-V2.js

Deprecated (please use pay-v3.js)

This mode of integration is alternative to iFrame based integration. While the iFrame based integration lets you easily get to the market, javascript based integration gives you the ultimate flexibility to define the checkout experience for your customer.

Create order

Order creation has already been explained previously. Follow the same steps mentioned here.

pay-v2.js (deprecated)

pay-v2.js has been deprecated. Migrate to pay-v3.js for better security and reduced compliances. For pay-v3.js integration document, please check this link. If you are looking for pay-v2.js integration document, please continue.

<script type="text/javascript"
        src="https://api.juspay.in/pay-v2.js"></script>

Implementing Checkout

Before we get to the details, let's take a quick look at a typical payment form. This is the part you can build with your web framework, or by hand in HTML - whichever way you are used to building forms on the web.

For Cards

<form class="juspay_inline_form" id="payment_form">
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order"/>
    <input type="text" class="card_number" placeholder="Card number">
    <input type="text" class="name_on_card" placeholder="Cardholder name">
    <input type="text" class="card_exp_month" placeholder="MM"> - <input type="text" class="card_exp_year" placeholder="YYYY">
    <input type="text" class="security_code" placeholder="CVV" >
    <input type="checkbox"  class="juspay_locker_save"> Save card information
    <button type="submit" class="make_payment">Pay</button>
    <input type="hidden" class="redirect" value="true">
</form>


For Saved Card

<form class="juspay_inline_form" id="payment_form">
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order"/>
    <input type="hidden" class="card_token" >
    <input type="text" class="security_code" placeholder="CVV" >
    <button type="submit" class="make_payment">Pay</button>
    <input type="hidden" class="redirect" value="true">
</form>


For Netbanking

<form class="juspay_inline_form" id="payment_form">
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order_101"/>
    <input type="hidden" class="payment_method_type" value="NB"/>
    <select class="payment_method">
        <option value="NB_ALLB" label="Allahabad Bank">Allahabad Bank</option>
        <option value="NB_ANDHRA" label="Andhra Bank">Andhra Bank</option>
        <option value="NB_AXIS" label="Axis Bank">Axis Bank</option>
        <option value="NB_BBKM" label="Bank of Bahrain and Kuwait">Bank of Bahrain and Kuwait</option>
        <option value="NB_BHARAT" label="Bharat Bank">Bharat Bank</option>
        <option value="NB_BOB" label="Bank of Baroda">Bank of Baroda</option>
        <option value="NB_BOBCORP" label="Bank of Baroda Corporate">Bank of Baroda Corporate</option>
        <option value="NB_BOI" label="Bank of India">Bank of India</option>
        <option value="NB_BOM" label="Bank of Maharashtra">Bank of Maharashtra</option>
        <option value="NB_CANR" label="Canara Bank">Canara Bank</option>
        <option value="NB_CBI" label="Central Bank Of India">Central Bank Of India</option>
        <option value="NB_CITI" label="Citi Bank NetBanking">Citi Bank NetBanking</option>
        <option value="NB_CORP" label="Corporation Bank">Corporation Bank</option>
        <option value="NB_COSMOS" label="COSMOS Bank">COSMOS Bank</option>
        <option value="NB_CSB" label="Catholic Syrian Bank">Catholic Syrian Bank</option>
        <option value="NB_CUB" label="CityUnion">CityUnion</option> 
        <option value="NB_DBS" label="DBS Bank">DBS Bank</option>
        <option value="NB_DCB" label="Development Credit Bank">Development Credit Bank</option>
        <option value="NB_DCBB" label="Development Credit Bank Business">Development Credit Bank Business</option>
        <option value="NB_DENA" label="DENA Bank">DENA Bank</option>
        <option value="NB_DEUT" label="Deutsche Bank">Deutsche Bank</option>
        <option value="NB_DLS" label="Dhanalaxmi Bank">Dhanalaxmi Bank</option>
        <option value="NB_FED" label="Federal Bank">Federal Bank</option>
        <option value="NB_HDFC" label="HDFC Bank">HDFC Bank</option>
        <option value="NB_ICICI" label="ICICI Netbanking">ICICI Netbanking</option>
        <option value="NB_IDBI" label="Industrial Development Bank of India">Industrial Development Bank of India</option>
        <option value="NB_IDFC" label="IDFC Bank">IDFC Bank</option>
        <option value="NB_INDB" label="Indian Bank">Indian Bank</option> 
        <option value="NB_INDUS" label="IndusInd Bank">IndusInd Bank</option>
        <option value="NB_ING" label="ING Vysya Bank">ING Vysya Bank</option>
        <option value="NB_IOB" label="Indian Overseas Bank">Indian Overseas Bank</option>
        <option value="NB_JNK" label="Jammu and Kashmir Bank">Jammu and Kashmir Bank</option>
        <option value="NB_JSB" label="Janata Sahakari Bank">Janata Sahakari Bank</option>
        <option value="NB_KARN" label="Karnataka Bank">Karnataka Bank</option>
        <option value="NB_KOTAK" label="Kotak Bank">Kotak Bank</option>
        <option value="NB_KVB" label="Karur Vysya">Karur Vysya</option>
        <option value="NB_KVBCORP" label="Karur Vysya Corporate Banking">Karur Vysya Corporate Banking</option>
        <option value="NB_LVB" label="Lakshmi Vilas Bank Retail">Lakshmi Vilas Bank Retail</option>
        <option value="NB_LVBCORP" label="Lakshmi Vilas Bank Corporate">Lakshmi Vilas Bank Corporate</option>
        <option value="NB_NAIB" label="The Nainital Bank">The Nainital Bank</option>
        <option value="NB_NKGSB" label="North Kanara GSB">North Kanara GSB</option>   
        <option value="NB_OBC" label="Oriental Bank Of Commerce">Oriental Bank Of Commerce</option>
        <option value="NB_PMCB" label="Punjab and Maharashtra Coop Bank">Punjab and Maharashtra Coop Bank</option>
        <option value="NB_PNB" label="Punjab National Bank">Punjab National Bank</option>
        <option value="NB_PNBCORP" label="Punjab National Bank CORPORATE">Punjab National Bank CORPORATE</option>
        <option value="NB_PNJSB" label="Punjab and Sind Bank">Punjab and Sind Bank</option>
        <option value="NB_RATN" label="Ratnakar Bank">Ratnakar Bank</option>
        <option value="NB_RBS" label="Royal Bank of Scotland">Royal Bank of Scotland</option>
        <option value="NB_SARASB" label="Saraswat Bank">Saraswat Bank</option>
        <option value="NB_SBBJ" label="State Bank of Bikaner and Jaipur">State Bank of Bikaner and Jaipur</option>
        <option value="NB_SBH" label="State Bank of Hyderabad">State Bank of Hyderabad</option>
        <option value="NB_SBI" label="State Bank of India">State Bank of India</option>
        <option value="NB_SBM" label="State Bank of Mysore">State Bank of Mysore</option>
        <option value="NB_SBP" label="State Bank of Patiala">State Bank of Patiala</option>
        <option value="NB_SBT" label="State Bank of Travancore">State Bank of Travancore</option>
        <option value="NB_SCB" label="Standard Chartered Bank">Standard Chartered Bank</option>
        <option value="NB_SOIB" label="South Indian Bank">South Indian Bank</option>
        <option value="NB_SVC" label="SVC Co operative Bank">SVC Cooperative Bank</option>
        <option value="NB_SVCB" label="Shamrao Vithal Cooperative Bank">Shamrao Vithal Cooperative Bank</option>
        <option value="NB_SYNB" label="Syndicate Bank">Syndicate Bank</option>
        <option value="NB_TMB" label="Tamilnadu Mercantile Bank">Tamilnadu Mercantile Bank</option>
        <option value="NB_TNSC" label="Tamilnadu State Apex Coop Bank">Tamilnadu State Apex Coop Bank</option>
        <option value="NB_UBI" label="Union Bank of India">Union Bank of India</option>
        <option value="NB_UBICORP" label="Union Bank Corporate Banking">Union Bank Corporate Banking</option>
        <option value="NB_UCOB" label="UCO Bank">UCO Bank</option>
        <option value="NB_UNIB" label="United Bank of India">United Bank of India</option>
        <option value="NB_VJYB" label="Vijaya Bank">Vijaya Bank</option>
        <option value="NB_YESB" label="YES Bank">YES Bank</option>
    </select>
    <button type="submit" class="make_payment">Pay</button>
    <input type="hidden" class="redirect" value="true">
</form>


For Wallets

<form class="juspay_inline_form" id="payment_form">
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order_101"/>
    <input type="hidden" class="payment_method_type" value="WALLET"/>
    <select class="payment_method">
        <option value="FREECHARGE" label="Freecharge Wallet">Freecharge Wallet</option>
        <option value="JANACASH" label="Jana Cash">Jana Cash</option>
        <option value="JIOMONEY" label="JioMoney">JioMoney</option>
        <option value="MOBIKWIK" label="Mobikwik Wallet">Mobikwik Wallet</option>
        <option value="OLAMONEY" label="Olamoney Wallet">Olamoney Wallet</option>
        <option value="PAYZAPP" label="PAYZAPP">PAYZAPP</option>
        <option value="PAYTM" label="PayTM Wallet">PayTM Wallet</option>
        <option value="PAYUMONEY" label="PayU Money Wallet">PayU Money Wallet</option>
        <option value="SBIBUDDY" label="SBI Buddy">SBI Buddy</option>
    </select>
    <button type="submit" class="make_payment">Pay</button>
    <input type="hidden" class="redirect" value="true">
</form>


Besides the usual fields, there are some Juspay specific fields which will enable us to process the payment when the form is submitted.

  • order_id field represents the order_id of the order object that you have just created.
  • merchant_id helps us identify you. Changing this would mean that we credit the payment to someone else's account. So, please be careful with this field!
  • payment_method_type identifies the category of the payment instrument being used. It can be one of CARD, NB, WALLET.
  • payment_method identifies the actual payment instrument being used. List of payment methods for NetBanking is shown in the form above.
  • juspay_locker_save tells us whether we need to store this card after the payment is successful.
  • If redirect is true, then we will choose the redirection flow for authentication. Otherwise, a popup window will be used for authentication. By default, popup window will be chosen for authentication.

pay-v2.js listens to the form submit event and transports the card information safely to process it for payment. This is accomplished by the following snippet.

<script type="text/javascript">
Juspay.Setup({
    payment_form: "#payment_form",
    success_handler: function(status) {},
    error_handler: function(error_code, error_message, bank_error_code,
        bank_error_message, gateway_id) {}
})
</script>

Redirect or Popup?

Authentication can be performed either via a popup or using the traditional redirection based flow. In the former, a separate window opens up to conduct the authentication. This popup is closed as soon as the payment is complete. You can control this choice by passing the appropriate value in redirect element.

In the code snippet above showing Juspay.Setup, there are two handlers success_handler and error_handler. If the payment is successful, then success_handler is invoked. If the payment failed, then error_handler will be invoked.

Redirect Flow

For mobile, redirection flow is chosen by default. You cannot change this. So, you must always ensure that you have coded the case to handle the redirection flow as well.

Card Form Validation

Validation must be implemented by you. Please ensure the following:

  • Card Number must be validated using Luhn Algorithm
  • Expiry date must be in future
  • CVV (security_code) must be 3 digits for Visa/Mastercard/Rupay and 4 digits for American Express
  • Cardholder name must be alphabets & space only
  • Expiry & CVV must be made optional for Maestro cards for better coverage

Stored cards

To checkout using stored card, the form must contain the card_token element and the security_code element. Please see the sample code below.

<form class="juspay_express_form" id="payment_form">
    <input type="hidden" class="card_token" value="54eb18a0-c7ca-46a3-b122-448d93a3698a"/>
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order"/>
    <label>
        <p>5264-XXXXXXXX-3394</p>
        <p>Expires: 10/24</p>
    </label>
    <input type="text" class="security_code" placeholder="CVV" >
    <button type="submit" class="make_payment">Pay</button>
</form>

Binding to Juspay.Setup is same as above. To handle multiple stored cards, you can create separate forms with different identifiers and bind them individually. It is also possible to handle using a single form.

Using EMI

To support EMI include the following parameters while creating the payment form:

  • is_emi: Indicates if emi is applicable for this transaction. Valid values are true and false.
  • emi_bank: Issuing bank of the card
  • emi_tenure: Tenure of emi in months

Note: It is an error to pass is_emi and not pass emi_bank and emi_tenure.

Sample form with EMI support:

<form class="juspay_inline_form" id="payment_form">
    <input type="hidden" class="merchant_id" value="guest">
    <input type="hidden" class="order_id" value="guest_order"/>
    <input type="hidden" class="is_emi" value="true" />
    <input type="hidden" class="emi_bank" value="HDFC" />
    <input type="hidden" class="emi_tenure" value="6" />
    <input type="text" class="card_number" placeholder="Card number">
    <input type="text" class="name_on_card" placeholder="Cardholder name">
    <input type="text" class="card_exp_month" placeholder="MM"> - <input type="text" class="card_exp_year" placeholder="YYYY">
    <input type="text" class="security_code" placeholder="CVV" >
    <input type="checkbox"  class="juspay_locker_save"> Save card information
    <button type="submit" class="make_payment">Pay</button>
    <input type="hidden" class="redirect" value="false">
</form>

Currently supported combinations of emi_bank and emi_tenure are:

EMI Bank EMI Tenure Supported Gateways
HDFC 3,6,9,12,18,24 PAYU, HDFC, RAZORPAY
CITI 3,6,9,12,18,24 PAYU
ICICI 3,6,9,12,18,24 PAYU, ICICI, CCAVENUE, RAZORPAY
SBI 3,6,9,12 PAYU, CCAVENUE
AXIS 3,6,9,12 PAYU, ICICI, CCAVENUE, RAZORPAY
SCB 3,6,9,12,18,24 ICICI, PAYU
KOTAK 3,6,9,12 ICICI, CCAVENUE, PAYU, RAZORPAY
HSBC 3,6,9,12 ICICI, CCAVENUE, PAYU
AMEX 3,6,9,12 PAYU, CCAVENUE, RAZORPAY
INDUSIND 3,6,9,12,18,24 PAYU, CCAVENUE, RAZORPAY
RBL 3,6,9,12,18,24 RAZORPAY, PAYU
YES 3,6,9,12,18,24 PAYU
ICICIDC 3,6,9,12 PAYU
AXISDC 3,6,9,12 PAYU

PCI Compliance

All Juspay clients must be PCI DSS Compliant at all times. When using pay-v2.js, the card information is captured by HTML form which is controlled by your website. This puts your website & domain within the PCI scope. You can achieve compliance by completing the Self Assessment Questionnaire A-EP (SAQ A-EP).

We strongly advise you to upgrade to pay-v3.js.

JS Version SAQ Requirement
pay.js (legacy) SAQ A-EP
pay-v2.js SAQ A-EP
pay-v3.js SAQ A