In this article, I will show you how to integrate WePay Payments in a Xamarin Forms application. “WePay is an online payment service provider based in the United States that provides an integrated and customizable payment solution through its APIs to platform businesses such as crowdfunding sites, marketplaces, and small business software companies. It offers partners fraud and risk protection” – Wikipedia
This article will be divided into parts:
- Part 1: Setup and User account management
- Part 2: Process payment
Let’s set it up
Before getting started is important to know that WePay has two environments one for Testing and another for Production. It is recommended that you create an application in the test environment and when you are ready to go live, create it in production.
- Test API on stage.wepay.com.
- Go Live API on www.wepay.com.
So let’s start by creating an account on stage.wepay.com.
After you fill all the information needed in the signup step, create an application and then you will have access to API keys and information to integrate it.
Let’s code
Since WePay doesn’t have an SDK for Xamarin, we will be using the Rest API.
To do the requests will use the library Refit. (To know more about this library you can check this great article by XamGirl).
Create a new Xamarin Forms project
Add a new config file
Create a config file with all the keys you have in the portal, we will use this later.
Create a WePay ApiManager
To handle all WePay requests we will create a WePayApiManager interface and class implementation that will contain all methods for the request calls.
Install the Refit package in your project and create an IWePayApi interface.
Handling sign up
To do the sign up we have two options:
- Use OAuth2 and load the SignUp URL using a WebView
- Create your own UI and use the Rest API to handle the registration
We will do the second approach by integration the following endpoints:
- /user/register (Register the User)
- /account/create (Create a user account on WePay)
- /user/send_confirmation (Send an email after the account is created)
Let’s add these endpoints to our project:
<<Copy the models used here>>.
Create a SignUpWePayViewModel class
Note: To Handle INotifyPropertyChanged I’m using this package.
All the settings returned will be stored using Xamarin Essentials, so that we can use it later while processing payments. <<Copy the class here>>.
Create UI
Handling sign in
To do the sign-in process there are two steps to follow:
- Get a code by using OAuth2 authentication
- Get the WePay access token needed to handle the payments
We can do that by loading the WePay OAuth2 URL in the WebView:
After completing authentication it returns a code that will be used to request the access token.
To get the access token we will integrate this endpoint: /oauth2/token
Getting user account
To get the account details you will need the WePay access token returned after sign-in/signup and then call the /account/find endpoint.
Here the result:
That’s all related to authentication, in the next part will show you how to process payments.
Check the full source code here.
Happy WePay integration!
Reference
- WePay: Wikipedia
- WePay Offical documentation