Rapyd Charge

Inspiration

Some of the barriers experienced by customers arise during the initial steps of checkout process where customers have to sign in, remember their passwords, re-enter credit card details, fill out tedious checkout forms and take extra steps to retrieve OTPs. Why can't we pay using security features already available in our mobile phones? Why can't we pay with just a quick glance or touch? As we see more devices use biometric authentication and web standards adopting this feature, sellers should be able to leverage this feature to offer faster and secure checkout experience for customers.

What it does

Rapyd Charge is a platform where merchants create and share payment links to customers.
For customers, they only have to create one account and use it for every merchants.
Customers pay using their biometric IDs - no apps needed. For devices that do not support biometric authentication, a magic link will be sent to the user's email or phone number for quick verification.

How I built it

Rapyd Charge creates an authentication layer that replaces the traditional passwords with a more secure and frictionless checkout experience. By adding biometric authentication on top of Rapyd Checkout Toolkit, returning customers can securely and automatically retrieve their default payment methods and reduce the steps in the checkout process.
The platform leverage Web Authentication API (WebAuthn) which works in most mobile browsers. To speed up the development, I decided to integrate Passage API for the biometric authentication. All successful authentication are mapped with the corresponding Rapyd customer object.
This feature works best using credit card as payment method and Rapyd checkout's "save card details" feature enabled. Whenever customer signs in, the customer's default payment methods and credit card details are automatically loaded regardless of who the merchant is.

Challenges I ran into

Testing was a little challenging and time consuming - at least during the early stage of development. Although this project will work on any desktop browsers, my focus was to build a better checkout experience for mobile devices with biometric authentication. Additionally, Rapyd checkout does not allow localhost for webhooks and redirect urls, so testing and development requires proper configurations

Accomplishments that I am proud of

Creating the entire project alone is already something I am so proud of. But more than that, I am happy that I managed to build what I am looking for in a checkout process:

One account for all payments
No more passwords to remember
No more tedious forms for returning customers
No more inconvenient and (sometimes) unreliable OTP
Complete checkout in just a few seconds
Pay like it's the year 2022 - using our phone's biometric features

What I learned

A small improvement in authentication process can significantly improve the checkout experience and conversion rate
Creating Rapyd checkout is generally simple - just a few lines of code and you are connected to hundreds of supported payment methods.
Using third party services can improve your development process instead of re-inventing the wheel.

What's next for Rapyd Charge

This project can be simplified further by creating a Javascript package that would automatically integrate and sync Passage's user data and Rapyd's customer object. In this way, developers can easily create their own biometric powered Rapyd Checkout, without creating backend application.
Using other features of Rapyd Checkout, I would want to improve the payment page by creating a complete checkout solution using carts and dynamic data set by the customer.
Find clients who wants to test drive the tool for an actual payment system.
Explore other authentication methods.

Demo

Payment Link Demo

For payment link demo:

To test the biometric authentication, please use supported mobile devices (iOS or Android) and scan the QR code above or clink the link below and open it in your mobile browsers

https://rapyd-charge.vercel.app/checkout/MSYdLgWyyG3vGetF