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

The iframe url is available as part of the POST /order/create API.

Example

{
  "order_id": "1478851764",
  "id": "ord_e294a26e66ad4336a992ceab81ad704c",
  "status": "CREATED",
  "status_id": 1,
  "payment_links": {
    "web": "https://api.juspay.in/merchant/pay/ord_e294a26e66ad4336a992ceab81ad704c",
    "mobile": "https://api.juspay.in/merchant/pay/ord_e294a26e66ad4336a992ceab81ad704c?mobile=true",
    "iframe": "https://api.juspay.in/merchant/ipay/ord_e294a26e66ad4336a992ceab81ad704c"
  }
}

payment_links attribute will be present in both /order/create API and /order/status API. We have provided three variants to make it easy for your customers. As the name implies, these are best suited for the respective channels.

Variant Description
web Renders a desktop optimized version of the checkout page
mobile Renders a mobile optimized version of the checkout page
iframe Provides an iFrame that you can embed as part of your checkout page
<iframe src="https://api.juspay.in/merchant/ipay/ord_e294a26e66ad4336a992ceab81ad704c"
width="630" height="400"
style="border: 1px solid #CCC;padding: 20px;height: auto;min-height: 300px;">
</iframe>

Mobile optimized form

The mobile variant url is available in payment_links attribute will be present in both /order/create API and /order/status API. Please see the code below:

<iframe src="https://api.juspay.in/merchant/pay/ord_e294a26e66ad4336a992ceab81ad704c?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/ord_e294a26e66ad4336a992ceab81ad704c&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.