Mobile Payments


Overview

This guide will walk you though an easy and straight forward solution to accept payments within your application. This guide requires the use of a Web View component for a secure integration with Moyasar.

On this page


Before Starting

Before you start the integration process, make sure you have completed these prerequisites:

  1. Sign up for a test account using our dashboard.
  2. Get your API Key, to authenticate your requests.
  3. Go though Web Payments guide to understand how our payment form works, which is required for this guide.

For more information, please refer to Get started with Moyasar.


Integration Methods

Moyasar requires an HTML form to accept payments, so we will show you two ways to add payments to your app using our form.

Hosting Payment Page

The first way and the easiest is to host the payment page on your backend or web application.

Using this method is easy and will grant you more control over your payments.

Your payment page can be as simple as an empty HTML page, just don’t forget to add the following tags in <head> to ensure that initial page zoom is appropriate for mobile users:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
<!-- Other elements -->
</head>
<body>
  <!-- Moyasar Payment Form -->
</body>

Now suppose that you have hosted the page on https://example.com/checkout/mobile/[order_id], you can just open a webview within your app and direct the user to it. But what happens when the user finishes the payment transaction, i.e. succeeded or failed?

You have got two options, create a deep link within you application and listen to the return URL, or control the web view navigation.

Most webview components provide a way to manage navigation changes, thus you can see what URL is being loaded, thus if the component is trying to load your callback_url that been provided in the form, you can just hide the webview and contact your backend to see if the user did pay successfully then show either success or failure.

For iOS see Managing Navigation Between Webpages in WKWebView.

For Android see shouldOverrideUrlLoading in WebViewClient.

Manage HTML within Application

This method is exactly the same as previous one, but you have to manage HTML within your application code. This approach is not recommended as it can introduce unnecessary complexity for something that can be managed by your existing backend.

To achieve this, you have to use loadHTMLString in iOS or loadDataWithBaseURL in Android, and make sure to use a base URL that starts with https e.g. https://payment.local.

Now to handle redirect, assign callback_url to a URL relative to base URL, e.g. https://payment.local/redirect-back. The same handling logic used before can be utilized here to determine the current status.


Last Modified : Jun 2021

Table of contents