Web Checkout

Payabbhi Checkout provides an optimized and mobile-ready User Interface (UI) to encapsulate the payment experience for your customers. Since Payabbhi Checkout is designed as a self-contained component, most of our improvisations and refinements related to the payment flow are automatically available to your customers without any extra integration effort from your side.

You can experience Payabbhi Checkout right away by clicking on Live Demo


Checkout Workflow for Web

  1. A payment page exists at your end that is integrated with Payabbhi Checkout as per the Integration Guide.

    • This generally means that your Payment page includes checkout.js served from Payabbhi servers over HTTPS. Your payment page also has required client-side code (Javascript / HTML) needed to invoke Payabbhi Checkout and receive Payment response on successful Payment.
  2. The customer now clicks on the Pay button on your page.

  3. This opens the Payabbhi Checkout form where the customer is able to provide her/his Card details or choose other payment options like NetBanking, Wallets, UPI etc.

  4. Payabbhi Checkout sends the payment details directly to Payabbhi Servers from the customer’s device if it passes basic validation..

  5. Once the payment process is successfully completed on the customer’s device, Checkout will either return the Signed Payment Response to the JS handler for Custom Checkout or will submit the form to your Server-side code for Drop-in Checkout.

  6. Your server-side code verifies the Signed Payment Response (typically using the utility function of one of our Client Libraries).

  7. After verification, you would display an appropriate success (or failure) message to your customer.

Test Cards

For Checkout flows in test mode, use Test Cards.


Integration modes

Payabbhi supports two modes of Checkout integration:

  1. Drop-in

    • The front-end integration with Drop-in Checkout is the easier and faster option of the two. The integration with Checkout can be completed with just a few lines of client-side code. The unique order_id returned from Payabbhi Order API should be passed to the Checkout form.
  2. Custom

    • This mode gives you greater control to customize the code as per your requirements. But it necessitates a fair degree of competence in JavaScript since you are expected to perform all of the requisite functionality that Payabbhi takes care of in the Drop-in mode.

Drop-in Checkout

The drop-in mode uses a script tag inside your payment form to include checkout.js. It is expected that the action attribute of your form points to your server-side code. The configuration options for Checkout are set using data attributes of the script tag. An HTML button is automatically created and the on-click event of the button opens up the Checkout form.

On successful Payment, the Checkout component sets the Signed Payment Response attributes as hidden input fields in your form and submits the form to your server-side code.

<form action="MERCHANT_SERVER_URL" method="POST">
<script
    src="https://checkout.payabbhi.com/v1/checkout.js"
    data-access-id="<MY_ACCESS_ID>"
    data-order-id="order_MUrcYVc3emflWyvc"
    data-amount="2000"
    data-description="Purchase of Kryptonite"
    data-prefill.name="Bruce Wayne"
    data-prefill.email="bruce@wayneinc.com"
    data-prefill.contact="9999999999"
>
</script>
</form>

In case you wish to override the values set for Checkout parameters in Portal > Settings > Configurations, please include the following parameters in the code section above:

    data-name="business display name"
    data-image="https://merchant.site.com/logo.jpg"
    data-theme.color = "#274686"

Custom Checkout

The custom mode of Checkout requires you to use a HTML element or JavaScript event to invoke the Checkout form. In custom mode, on successful Payment, Checkout makes a callback with the Signed Payment Response to the Javascript Handler function that you provide. It is expected that you would pass the parameters to your server-side code for further processing (Signature verification, Order lookup etc) before finally displaying the appropriate success (or failure) message to your customer.

<script src="https://checkout.payabbhi.com/v1/checkout.js"></script>

<a id="phb-button" class="btn btn-lg btn-primary" role="button">Pay Now</a>

<script>
  var opt = {
      "access_id": "MY_ACCESS_ID",
      "order_id":  "order_MUrcYVc3emflWyvc",
      "amount": 2000,//2000 paisa = Rs 20
      "description": "Purchase of Kryptonite",
      "handler": function (response){
          // You are expected to submit the
          // payment response (payment_id, order_id and payment_signature)
          // to your server-side code for verification and necessary
          // server-side processing
          alert(response.payment_id + response.order_id + response.payment_signature);
      },
      "prefill": {
          "name": "Bruce Wayne",
          "email": "bruce@wayneinc.com",
          "contact": "999999999999"
      },
      "notes": {
          "merchant_order_id": "OrdRefNo45678"
      }
  };


  $('#phb-button').click(function (e) {
      window.payabbhi = new Payabbhi(opt);
      window.payabbhi.open();
      e.preventDefault();
  })
</script>

In case you wish to override the values set for Checkout parameters in Portal > Settings > Configurations, please include the following parameters in the code section above:

      "name": "business_display_name",
      "image": "https://merchant.site.com/logo.jpg",
      "theme": {
          "color": "#274686",
      }

Configuration options

You can control the appearance and behaviour of the Checkout component using the following options:

Required

Attribute name (Custom)  Field name (Drop-in)      Description
access_id data-access-id Merchant’s access_id (test or live).
order_id data-order-id Unique identifier of Order created using Order API.
amount data-amount Order amount in paisa (e.g., 5000 paisa = Rs 50.00). Minimum amount is 100 paisa. The amount passed to Checkout is expected to be the same as Order amount.
handler - Handler function in case of Custom checkout.

Optional

Attribute name (Custom)  Field name (Drop-in)  Description
description data-description Short description related to the Payment. This is displayed in the Checkout form.
name data-name Checkout Form normally displays the value provided in Portal > Settings > Business Display Name. If value is provided in the name attribute, it overrides the value set in the Portal Settings. If neither is provided, Checkout form will display ‘Payabbhi’ by default.
image data-image URL of the merchant’s brand or logo image to be displayed in the Checkout form. Checkout Form normally uses the value provided in Portal > Settings > Business Logo. If value is provided in the image attribute, it overrides the value set in the Portal Settings.
prefill.name data-prefill.name You may pass the card-holder name, if available, to Checkout so that the form field is pre-filled. Should be passed as a JS object in case of Custom checkout.
prefill.email data-prefill.email You may pass the email address of your customer, if available, to Checkout to so that the form field is pre-filled. Should be passed as a JS object in case of Custom checkout.
prefill.contact data-prefill.contact You may pass the phone number of your customer, if available, to Checkout so that the form field is pre-filled. Should be passed as a JS object in case of Custom checkout.
notes.fieldname data-notes.fieldname Set of key/value pairs that you may attach to the Payment. It can be useful for storing additional information about the Payment in a structured format. Refer to Payment API. Should be passed as a JS object in case of Custom checkout.
theme.color data-theme.color A hexadecimal string denoting a color. It is used to match the appearance of the Checkout form with the Merchant’s brand color or website. Checkout Form normally uses the value provided in Portal > Settings > Theme Color. If value is provided in the theme.color attribute, it overrides the value set in the Portal Settings. Should be passed as a JS object in case of Custom checkout.

Signed Payment Response

Response attribute  Description
payment_id Identifier of the Payment created via Checkout flow. Refer to Payment API.
order_id Unique identifier of the Order against which the Payment is made. Refer to Order API.
payment_signature Hexadecimal string representing HMAC Hex digest using SHA256. This is returned when payment is successful.

Verification of signature using a Client Library

The payment signature needs to be verified at the Merchant’s end using server-side code. This verification is typically done using a utility method provided in one of our Client Libraries.

PHP

<?php
$client = new \Payabbhi\Client('ACCESS_ID', 'SECRET_KEY');

$attributes = array(
                  'payment_id'        => $payment_id,
                  'order_id'          => $order_id,
                  'payment_signature' => $payment_signature
              );

try {

  $client->utility->verifyPaymentSignature($attributes);  
  // verification passed

} catch (\Payabbhi\Error\SignatureVerification $e) {
  // verification failed
}

?>

Python

import payabbhi

# Create a client using your access ID and secret key
client = payabbhi.Client(access_id='<access_id>', secret_key='<secret_key>')

# Verify a payment signature
try:
  client.utility.verify_payment_signature({
          'order_id': '<order_id>',
          'payment_id': '<payment_id>',
          'payment_signature': '<payment_signature>'})
  # verification passed
except payabbhi.error.SignatureVerificationError as e:
  # verification failed

Java

import com.payabbhi.Payabbhi;

// Set your access ID and secret key
Payabbhi.accessId  = "<your-access-id>";
Payabbhi.secretKey = "<your-secret-key>";

// Verify a payment signature
Map<String, String> params = new HashMap()
params.put("order_id", "<order-id>");
params.put("payment_id", "<payment-id>");
params.put("payment_signature", "<payment-signature>");

try {
  Payabbhi.verifyPaymentSignature(params);
  // verification passed
} catch (PayabbhiException e) {
   // verification failed
}


.Net

using Payabbhi;

// Set your access ID and secret key
Client client = new Client('<accessId>', '<secretKey>');

// Verify a payment signature
try{
  client.Utility.VerifyPaymentSignature(
    new Dictionary<string, string>() {
      {"payment_signature", '<paymentSignature>'},
      {"order_id", '<orderId>'},
      {"payment_id", '<paymentId>'}
    });
    // Verification passed
}
catch (Payabbhi.Error.SignatureVerificationError e)
{
  // Verification failed
}

Node.js

// Set your access ID and secret key
const payabbhi = require('payabbhi')('<your-access-id>', '<your-secret-key>');

// Verify a payment signature
try {
  payabbhi.verifyPaymentSignature({
    "order_id": "<order-id>",
    "payment_id": "<payment-id>",
    "payment_signature": "<payment-signature>"
  });
  // Verification passed
} catch(e) {
  // Verification failed
}


Manual Verification of Signature

The verification is typically done using a utility method provided in one of our Client Libraries. However, if you wish to create your own implementation, the following section provides the necessary information.

Step 1: Concatenate the payment response attributes separated by “&” to get a String.

String payload  = CONCATENATE(payment_id , "&" , order_id)

Step 2: Compute the HMAC hex digest using SHA256 algorithm with the Merchant’s secret key and the concatenated string.

generated_signature_at_merchant_end =  hmac_sha256(payload, secret_key)

Step 3: If the generated signature at the Merchant’s end is same as the payment_signature, the verification check is a pass.

Boolean verified = (generated_signature_at_merchant_end == payment_signature)


Contact Us

If you have queries, please write to us at contact@payabbhi.com .