Pay using iFrame

Use this mode of integration, if you wish to embed the payment form as part of your checkout page.

Create Order

To collect payment from a customer, you first need to create an order with Juspay. Order encapsulates all the information that is required for a payment.

Embedding the iFrame

Once you have create an order and know the order_id, the next step is to render the payment form. For doing this, include the following iFrame in your checkout page.

<iframe src="https://api.juspay.in/merchant/ipay?order_id=$order_id&merchant_id=$merchant_id"
width="630" height="400"
style="border: 1px solid #CCC;padding: 20px;height: auto;min-height: 300px;">
</iframe>

Please note:

  • Substitute $order_id with the order_id that you created in previous step
  • Substitute $merchant_id with your merchant_id

Enabling Netbanking and Wallets in iFrame

Pass an extra parameter to the URL for enabling Netbanking and Wallets.

  • To enable only Netbanking, pass the following parameter: &payment_options=nb.
  • To enable only Wallets, pass the following parameter: &payment_options=wallet.
  • To enable Netbanking and Wallets together, pass the following parameter: &payment_options=nb|wallet.

Please see the code below:

<iframe src="https://api.juspay.in/merchant/ipay?order_id=$order_id&merchant_id=$merchant_id&payment_options=nb|wallet"
width="630" height="400"
style="border: 1px solid #CCC;padding: 20px;height: auto;min-height: 300px;">
</iframe>

Mobile optimized form

Pass an extra parameter to the URL for rendering mobile optimized form: &mobile=true. Please see the code below:

<iframe src="https://api.juspay.in/merchant/ipay?order_id=$order_id&merchant_id=$merchant_id&mobile=true"
width="630" height="400"
style="border: 1px solid #CCC;padding: 20px;height: auto;min-height: 300px;">
</iframe>

This will render a mobile responsive form with all the functionalities included.

Note: The mobile optimized checkout experience will use the redirect mode to do the authentication.

Using EMI

To support EMI the iFrame payment URL has been enhanced to take additional parameters:

  • 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 code for creating an iFrame with EMI support:

<iframe src="https://api.juspay.in/merchant/ipay?merchant_id=guest&order_id=1234&is_emi=true&emi_tenure=6&emi_bank=HDFC"
width="630" height="400"
style="border: 1px solid #CCC;padding: 20px;height: auto;min-height: 300px;">
</iframe>

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

iFrame based integration offers the easiest path to PCI Compliance. Since iFrame is as good as a separate browser window, your website is completely shielded away from getting any sensitive card information. You can become PCI Compliant by simply filling up the PCI DSS SAQ-A questionnaire.