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.

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

Optional

Signed Payment Response

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)