In the previous blog, I walked you through how I searched for and found a new payment gateway called SparcoPay and how I integrated it into the Course Assist User app. In this article, I'll walk you through why and how I worked on improving the payments process in the app to make it flow better and easier to navigate for the user. Let's dive in🏊‍♀️

Why I improved the payment process🔧

The payment process in the Course Assist User app has 3 parts. The first part is where the user sees the profile of an expert and decides whether they want that particular expert or not. if they do they press the pay button which takes them to the second part. The second part is where the user makes payment on the SparcoPay payment webpage using their preferred payment method. The third part comes after the user has made a payment and is where the user approves the question-answer request.

Now because the second part takes place not in the app but on a separate webpage the transition between the first part to the second part and the second part to the third part had a lot of friction which we do not want because that's a terrible experience for the user which is why I decided to improve it.

How I improved the payment process🖌

To reduce the friction in the payment process I first started by keeping everything within the app. What do I mean by this?🤔 Instead of the SparcoPay payment portal opening in the device's default browser it instead opens within the app using React Native WebView a component that renders web content in a native view. That way everything remains localized thus the transition between the first and second parts is smooth. Next, I added some nav buttons for easy navigation when the user is on the payment webpage (the second part). I added a back button to return the user to the expert profile page (the first part) if they wish to do so and a proceed button that takes the user to the approval page (the third part) once the payment is complete. I also added some loading/progress bars to enhance the UI and UX. The picture below is a screenshot of the payments webpage with the navigation buttons I added.

With a smooth payment process now implemented I'm a step closer to the launch of Course Assist which if all goes as planned could be next week, something you'll not want to miss so stick to the blog to find out what's happening next. Thanks for reading and see you in the next🙏.