Tuesday, July 21, 2020

Xamarin Forms PayUMoney Integration




Introduction

    Today, we are going to see how to integrate the PayUMoney Payment Gateway with Xamarin.Forms Application. I did this payment gateway using WebView and custom renderer, am not using any PayUMoney SDK. In Xamarin Forms WebView default HTTP method is GET. But here I write code for WebView renderer and changing the HTTP method GET into POST and passing an encoded string from shared to platform-specific and added this string as the Body of the POST method. My experience if parsing the Native PayU SKD to Xamarin Library, it has difficult and there is no support from the PayUMoney team. I think the story is enough. I don't like to tell a lot of stories, let go for action in code.

Let's Go
    Open Visual Studio and Create a new Empty Xamarin Forms Project. For creating an app, go to Visual Studio >> File >> Project >> Xamarin Forms app  and click create a new project. In the dialog window, give the app name, solution name, location and create it.



    After the project creation, create a new class named as PayWebView and it should be inherited from WebView and create new properties PostData and url, you code must be like below. 





Now design UI, open MianPage.xaml and add the namespace of PayWebView class, we created in the last step and add PayWebView control in UI. This page code is given below.



Next, open MainPage.xaml.cs file and create multiple variables like amount, mail id, product info, name, success url and failure url. If payment is success  it will redirect to success url or else goes to failure url, then only you will know the payment status in WebView. The code is given here.



It's time to go for platform-specific, just expand the android project and create new class named as PayWebView class. Get the control and set the post url and postData from the PayWebView variables we created in first. This code is given below.



Next, expand iOS project, and get the Native control and create NSMutualUrlRequest and set the url and data and Http method is POST, then call LoadRequest method.




Finally, we have done all the things, now rebuild and run the application, you will get output like below.



Source Code in GitHub

Conclusion
I hope you guys, this article will helps you, thanks for reading.


Tuesday, July 14, 2020

Xamarin iOS PayUMoney Payment Integration #PayUMoney






Introduction  


This article we are going to see, how to implement PayUMoney payment integration in Xamarin iOS. Before we start, I’ll do this payment gateway through WebView, I’ve tried to bind native library to Xamarin iOS Library, but my bad luck, it was a failure, so I have moved into WebView.   


Prerequisites   


  • Visual Studio or Visual Studio for Mac  
  • PayUMoney Production or Test Key and Salt  


Let’s Start  


Step 1:   


Create a new Xamarin iOS project in Visual Studio, for this sample I used Visual Studio for Mac. For that, Open Visual Studio for Mac and click New, in the left plane select App under iOS section and then click Create. In the new dialog window, give the project name, solution name, and location, then click Create.  


    


Step 2 :


Open ViewController.cs file and create new UIWebView inside ViewDidLoad method and set the WebView frame equal to base view frame size, implement the IWebViewDelegate interface and override the ShouldLoad method and set this interface the WebView we already created.


Create NSMutableUrlRequest class and set request method as POST and set Header type as “application/json”  


GetPostString method used for append all parameters as given below and set this returned string into the body of NSMutableUrlRequest class.   


GetHash method used to convert the string into SHA512 format. And full source code is given below.  

  



Step 3:  

  

Run the application and get the output like the below video. 






 The sample in GitHub


Conclusion

If, you any issue in Key and Salt, just command below. This article credit goes to @anbumani27  



Thursday, June 18, 2020

Expandable List View in Xamarin Android

Introduction  

    This article, we are going to learn how to use ExpandableListView in Xamarin Android and I’ll show the demo for the Expandable ListView in Xamarin.Android application. In the ListView, you can click any one item and it will expand and show the sub list or sub-items of the selected item and you can select or click the subview items with click events. 

Expandable List View in Xamarin Android
 

Prerequisites  
  • Visual Studio for Mac 
 
Let’s start the story 
Step 1 
Let Create Xamarin Android Project in Visual Studio for Mac. 

Xamarin Android Project Creation
 

Step 2 

After the project creation, open the content_main.xml file. For that, open Solution Explorer >> Resources >> Layout >> double click the content_main.xml and design the ExpanableListView. The code is given below. 



 Step 3 

Next, design your header list layout. Create a new list_view_header.xml file under the layout folder. For that, open Solution Explorer >> Resources >> right-click the layout folder and select a new file, In the dialog window, the left plane selects Android and center plane select layout >> give the name as list_view_header.xml and then click Create. The source code is given below. 
 


Step 4

As well as, create sub list layout and give names as expand_list_chlid.xml, and code is given below. 


 
Step 5 

Now, create another XML file under a drawable file and give file name as group_indicator.xml. This file is used for the dropdown indicator and Import the image files to the drawable folder. This drawable code is given below. 
 


Step 6

Next, open colors.xml file and add the below colors to the resources. 
 


Step 7 

Next, Create a new ExpandableModel.cs class under the Models folder. This model class is inherited from Java.Lang.Object class and the code is given below. 
 


Step 8

Now, Create new ExpandableListAdapter.cs class under adapters folder. This adapter inherited from the BaseExpandableListAdapter class and full source code is given below. 
 


Step 9

Next, open MainActivity.cs file and set adapter to this expandable list view and the code is given below. 




Step 10
Now, run your application and get output like below.

Expandable List View in Xamarin Android


The Full Source Code in Github

Conclusion

I hope this is helpful for you, Thanks for reading 
 

Tuesday, June 16, 2020

Toast in Xamarin Forms

Toast in Xamarin Forms

Introduction 

This blog, we are going to see how to implement Toast Message in Xamarin Forms for Android and iOS. This project, we can use dependency injection to display toast and not using any third-party plugin. The android has a default widget for toast but iOS has an only alert controller. 

 

Let’s start the story 

Step 1: 

Create Xamarin Forms Mobile App in Visual Studio for Mac. For that, go to Visual Studio for Mac >> New >> In the left plane select Cross-Platform and center plane select Blank Xamarin Forms App and click Next >> Give Application Name and Target Platforms, click Next and again click Create. 


Xamarin Forms
 


Step 2: 

After project creation, expand the Shared project and create an IMessage.cs interface under Interface Folder. For that, right-click the shared project and select new File >> In the dialog window, select interface and give name as IMessage and click Add. Create two methods for a long and short message, the code is given below. 

 




Platform-Specific Configuration 

Android Project 

Now, Expand the Android project and create MessageAndroid class. This MessageAndroid class inherits from the IMessage interface, that we already created in Shared Project and register this class as a dependency. This Code is given below. 

 



iOS Project 

Next, open iOS Project and create MessageiOS class and as well as inherit the same IMessage interface to this class and the full source code given below. Here we created a simple alert Controller and timer Scheduled to disappear the alert controller.  

 



Step 3: 

Now, design your user interface in MainPage.xaml file in Shared Project. For that, go to Solution Explorer >> Shared Project >> double click and open MainPage.xaml and design two-button with the clicked event. The code is given below. 

 



Next, open MainPage.cs file and call dependency service to show toast and the code is given below 

 



Step 4: 

Run, your application, and click the buttons to show a toast message. The screenshot is given below.  

 

Toast in Xamarin Form

 The Full Source Code in Github

Conclusion 

I hope you, this article helpful for you, and if you have any suggestions or comments post in the comment below. Thanks for reading. 

Sunday, June 7, 2020

How To Convert Base 64 to Image in Xamarin

Introduction

This blog, we are going to learn how to convert Image to base 64 and vice versa. The lot of struggle with converting a string to bitmap image and Image to base 64 string format conversion. I’ll share the code I used in my last project, that exactly worked for in all the cases.   
Story

First, we can see how to convert,  base64 string to Image. For the first time, I hear this base 64 string, I thought that was very tough, but that is not like that, it is very easy. The C# code I used for my project is given below.  

  
Now, we can change Image to base64 string to image conversion, this code is given below.   


The Full code is given below



Thanks for reading this. If, you get an exception, comment below.  

Saturday, June 6, 2020

Get Started DragonBoard 410c with Windows IoT Core


Introduction

            This project, we are going to configure DragonBoard with Windows IoT Core in different ways. The first way is the automatic method and other ways are manual.
Prerequisites
    Hardware Components
    Software apps and online services
    • Windows IOT Core
    • Windows 10
    • Windows IOT Core Dashboard
    • Win32 Disk Imager
    • Qualcomm DragonBoard Update Tool
Story
This project, we are going to configure DragonBoard with Windows IoT Core in different ways. The first way is the automatic method and other ways are manual.

Before starting, you must install the required software in Windows 10 Machine.

Download and install the above-listed software
Info: If you changing any pin configuration, make sure to board is power off.

Way 1:using Windows IoT Core Dashboard

Here you have two options installation from online or offline.

Options 1: Online Installation

Open Windows IoT Core Dashboard and the left plane select Setup a new device, select Device Type is Qualcomm (DragonBoard 410c), OS Version, Device and check the Terms and condition check box, then click Download and Install.

Note: Your device not shown in the select device, long press power button with + Plus button.


Options 2: Offline Installation

First, you need to download .ISO image file from Microsoft Site and install it.

Note ISO Image download URL - https://www.microsoft.com/en-us/software-download/windows10IoTCore#!

After downloading the image, double click the open iso image file and install the installer package. Check the Terms and Conditions and click install.


The Installation processing window like below image,


After installation, you will get a.ffu file in your installed location.


Return back to Windows IoT Core Dashboard and fill the pre-downloaded image field to this.ffu image and click install it.


Now Directly go to Device Setup Instruction, no need to follow other ways.

Way 2:using SD Card

Set the boot switches S6 to 0100

In this way, we going to directly flash the iso file in SD Card and insert into DragonBoard and install Windows IoT Core.

First, download and install Win32 Disk Imager and open it. Now select iso image and storage device, then write it.


    Now, set up your DragonBoard, must follow these instructions

    • Power DragonBoard through the power charger
    • Connect External Display through HDMI
    • Connect Keyboard & Display through USB
    • Insert flashed SD card into DragonBoard Storage Device interface

    Next, start your DragonBoard, After a few seconds of loading, it will ask to choose your OS, because DragonBoard comes with Android OS, but now inserted SD will contain Windows IoT Core OS If you choose Windows IoT Core OS, the Android OS will destroy and the Windows IoT Core Image installing to Device storage form SD Card, After installation, the device will be automatically restarted and till restarting remove your SD card


     Afterward, go to Device Setup Instruction, no need to follow other ways.

     Way 3: using the DragonBoard Update Tool

    In this way, we are going to install through USB but using DragonBoard Update Tool

    Download and Install DragonBoard Update Tool -http://ess-wiki.advantech.com.tw/view/IoTGateway/BSP/Windows10_IoT_Core

    The Windows IoT Core Image was already installed If you didn't install follow above steps and install it After installation start Dragon Update Tool. Now Connect DragonBoard through USB and DragonBoard Update Tool should detect the board and the connection status should show: "Connected" with Green Mark


    In the DragonBoard Update Tool click the Browse button and select.ffu installed image file you installed. Click the "Program" button and wait for the image to be copied to the board.

    OS Setup

        reset the boot switches S6 to 0000

    Now connect Display, Keyboard, Mouse, and power up the device, Wait for a few seconds to start the OS installation automatically. Once device is ready to install Windows IoT Core OS

    After, the Windows Installation completed, we need to configure the OS settings, first of all, it goes to language settings, select your language and click Next

    Next, choose privacy settings and click Next

    Next, accept your Location settings


    Next, configure your network settings, connect your device to WiFi or skip the step now


    Finally, we configured our device, Windows Start Screen like below and check Start menu, command prompt and settings screens


    Windows Device Portal Setup Instruction

    • Now Connect USB and Windows IoT Core Dashboard Device list shown your connected device.
    • Make sure your host PC can reach the IP which Windows IoT Device gets.
    • Right-click the device and open Device Portal in a favorite web browser and your localhost like http://192.168.0.1:8080
    • Now a popup window will appear and give username and password to access the device. 
      • username: Administrator  
      • password: p@ssw0rd


    Then, you have all the access to Windows Device via Windows Device Portal

    Windows Device portal configuration completed.

     Conclusion

    In this blog, we learned how to Install and Configure the Windows IoT Core with DragonBoard and if you have any queries, comment below.