Hosted Checkout

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

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

For more information, please refer to Getting Started with Moyasar.

This guide will walk you through an easy and straightforward solution to accept payments within your React Native app. This guide requires the use of a Web View component for secure integration with Moyasar.

If you already have a React Native project, you can skip to the next part or follow the official React Native guide; Setting up the development environment.

New versions of React Native do not provide the WebView components out of the box, instead, you need to install something like react-native-webview to use this functionality.

Please follow the Getting Started guide of React Native WebView and make sure that your application compiles before proceeding to the next section.

As we have mentioned in the main guide you can host the payment form and payment logic at your backend server (web application), since this will just make integration much easier and straightforward.

If you are following this method, please implement the payment form using this guide.

Now using the react-native-webview library before, you can show a webview and navigate to the payment page as follows:

If you have read through the Form Configurations Moyasar Payment Form, you know that you can handle the on_completed event and read the new payment object before redirecting the user away.

If you host the page on your server, you can easily follow the Credit Card guide and see how to save the payment ID.