NAV
HTML

EC: Client-side Integration

Introduction

The payment process starts when the customer wants to make a purchase (mobile or web). The first step is to create an order for the purchase, which marks the start of comes to the confirmation page, an order should be created, which is explained in the server-side documentation.

After an order is created, the next step is to present the customer with a payment form. Here he can either enter his card details or find a list of saved cards. This can also be a netbanking page based on the customer preference.

The form UI can be built either using iFrame or Javascript.

This documentation helps you with the client-side integration process payments. Juspay offers two modes of payment integration:

Read more about building the checkout form.

Implementing Checkout

The following are common strategies for implementing the checkout form. You can also create a custom experience directly using the APIs to build your own customized checkout form, like in native android or in iOS.

Javascript Based Form


<!-- Include pay.js in your checkout page.
This script takes care of completing the checkout process .
pay.js depends on **jQuery** library (1.4 or later) -->


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


<!-- Implementing Checkout -->
<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="false">
</form>

<!-- pay.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>

Javascript based integration provides highly customizable checkout forms. This strategy requires some coding and styling to provide custom experience to the user. However, dynamic switching between saved and new cards and form validations have to be handled by the merchant.

This strategy enables you to tailor-make the checkout adhering to your requirements with your customers in mind.

Both the strategies provides ways of choosing redirection-based or pop-up based payment flows. Mobile platfroms would follow redirection flows. Including pay.js in your application takes care of completing the checkout process on your behalf. pay.js depends on jQuery (1.4 or later). More details on the javascript intergration can be found here.

Using Embedded Iframe

Embedding Iframe in the client website or mobile device

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

Here mobile=true can be set for mobile optimized checkout.

Iframe based integration is a direct way of providing the payment form. This can be rendered by embedding the iframe code snippet. You may style the Iframe using Style sheets.

Iframe by default loads stored cards for the customer. If no saved cards are fetched, customer lands on card entry page with the option to save new cards. This integration allows switching between saved cards and new card and also provides built-in support for form validation. More details can be found here.

The order_id and merchant_id in the sample code snippet should be replaced with the appropriate details from the previous step.

Redirect and Pop-up based flow

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.

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:

Stored cards

<!-- Stored cards -->
<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/20</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.
-->

To checkout using stored card, the form must contain the card_token element and the security_code element. The card tokens can be fetched using list card as explained in the server-side integration. This provides a faster checkout experience as the customer just enters the CVV and proceedes to the second factor authentication. This also makes the whole process less error prone.

Payment Response

Once the payment is complete the user is redirected to the return_url configured by you. Following is the typical destination where the user is taken to:

HTTP GET https://merchant.shop.com/paymentresponse/handler?order_id=order_id_007&status=CHARGED&status_id=21&signature=euKzwwiUztPPg3MCEYpgKZfcyTr1uQq1hzKkhP8G1vQ%253D&signature_algorithm=HMAC-SHA256

More details on handling the payment response can be found in the server-side documentation. Based on the reponse, the confirmation page/message can be shown to the customer.