EC: Client-side Integration
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.
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.
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.
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.
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>
mobile=truecan 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.
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
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:
- Card Number must be validated using Luhn Algorithm
- Expiry date must be in future
- CVV (security_code) must be three digits for visa,mastercard and 4 digits for American Express
- Cardholder name must be alphabets and space only
<!-- 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.
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.