Razorpay WebView Android PHP

In this tutorial I have explained how to implement Razorpay WebView Android PHP & MySQL database. Some developers are convert their website into android application when they have no knowledge in application development sectors. As a result we need to fix some major issues, then only able to execute the mobile application in our device.

Recently I converted one of my PHP website in Android WebView concept without native SDK code. In that time I face lot of issues in integrate with Razorpay Payment gateway. Alternatively lot of gateways are available in market like PayU, CashFree, Instamojo, CCAvenue etc. But Razorpay is one of the best payment gateway for collecting user payments with lot of features. Already we are published one article to compare with Payu vs Razorpay company.

Actually there are two type of code’s are available in market with JavaScript & PHP programming languages. One is explained without Handling Function or Callback URL and another one is with help of handling error function to redirect the URL. If you are integrate Razorpay on your PHP website then no need to write handling function. But when you are convert your website into android mobile application in under WenView concepts. Then we need to execute or call a function handling to face success & failure message during processing time.

Prerequisites

  1. Create Account on Razorpay
  2. KYC is optional for test the payment but it’s mandatory when you need to receive Live Payments
  3. So after creating account, click Setting in top navigation and then click API for generate both of Key Id & Secrets.
  4. Now the Razorpay setup is completed.
  5. Hereafter we have to execute our code or try official test application code on GIthub.
  6. If you are using framework on your project like Laravel then use composer for download the SDK. Otherwise if using Core PHP then manually download the latest version of SDK and place on your existing project.

Checkout PHP

In the checkout folder you can see two PHP files such as Automatic.php file and manual file. Both are executed fine on website category. If you are try to convert your website into android application then need to follow the manual.php code. If you are missing to add function handling or callback URL on your site then get following errors.

razorpay handling function webview android php
Handing Function

Razorpay Error: Either Razorpay order payment id, subscription id, payment link id must be present. Behind the reason is we are miss to add error handling function on your PHP website. For more once read official documentation to learn more things.

Razorpay WebView Android PHP

Here I recommend official steps for execute and integrate with our website. Because I search lot of articles and the best one is official site code only.

//Automatic.php

<!--  The entire list of Checkout fields is available at
 https://docs.razorpay.com/docs/checkout-form#checkout-fields -->

<form action="verify.php" method="POST">
  <script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="<?php echo $data['key']?>"
    data-amount="<?php echo $data['amount']?>"
    data-currency="INR"
    data-name="<?php echo $data['name']?>"
    data-image="<?php echo $data['image']?>"
    data-description="<?php echo $data['description']?>"
    data-prefill.name="<?php echo $data['prefill']['name']?>"
    data-prefill.email="<?php echo $data['prefill']['email']?>"
    data-prefill.contact="<?php echo $data['prefill']['contact']?>"
    data-notes.shopping_order_id="3456"
    data-order_id="<?php echo $data['order_id']?>"
    <?php if ($displayCurrency !== 'INR') { ?> data-display_amount="<?php echo $data['display_amount']?>" <?php } ?>
    <?php if ($displayCurrency !== 'INR') { ?> data-display_currency="<?php echo $data['display_currency']?>" <?php } ?>
  >
  </script>
  <!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
  <input type="hidden" name="shopping_order_id" value="3456">
</form>

It’s working fine when you are execute web application using PHP or any other server integrations like Ruby, Python, .NET, Node.js, Java, Go etc.

//Manual.php

<button id="rzp-button1">Pay with Razorpay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<form name='razorpayform' action="verify.php" method="POST">
    <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
    <input type="hidden" name="razorpay_signature"  id="razorpay_signature" >
</form>
<script>
// Checkout details as a json
var options = <?php echo $json?>;

/**
 * The entire list of Checkout fields is available at
 * https://docs.razorpay.com/docs/checkout-form#checkout-fields
 */
options.handler = function (response){
    document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id;
    document.getElementById('razorpay_signature').value = response.razorpay_signature;
    document.razorpayform.submit();
};

// Boolean whether to show image inside a white frame. (default: true)
options.theme.image_padding = false;

options.modal = {
    ondismiss: function() {
        console.log("This code runs when the popup is closed");
    },
    // Boolean indicating whether pressing escape key 
    // should close the checkout form. (default: true)
    escape: true,
    // Boolean indicating whether clicking translucent blank
    // space outside checkout form should close the form. (default: false)
    backdropclose: false
};

var rzp = new Razorpay(options);

document.getElementById('rzp-button1').onclick = function(e){
    rzp.open();
    e.preventDefault();
}
</script>

ccUPI Intents are not working on WebView concepts. However you can make payments in simple steps such as Netbanking, Wallets, UPI Id, Credit/Debit card etc. After that you can easily able to run both of website and android application on your device. Suppose if you are facing any issues when integrate with payment gateway just WhatsApp me on (+91 8940379384) to fix your problem. Because I spend maximum 10 days for solving all errors and finally integrate with my applications.

Leave a Reply