Scan and Parse Payment QR Codes with AWS Amplify Gen 2
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-26 09:03:35

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built
<!-- Tell us what your app does! -->
[Ripe](https://www.ripe.money/) enables users to pay everyday merchants with crypto. Payment using QR code is ubiquitous in many parts of the world. (In the US, think Venmo.) Ripe leverages this existing payment infrastructure by connecting crypto on top of it.

I built the frontend to capture QR code using a phone's camera. It parses the QR code to extract merchant information such as name. (Right now it only supports GCash QR code in the Philippines, but more are coming.) It then asks the user the amount to send. The information is submitted to a data backend and triggers a serverless function to process the payment.

## Demo
<!-- Share a link to your deployed solution on Amplify Hosting, and include some screenshots here. -->
https://pay.ripe.money/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mct0htq6vnjfuz8ad7fz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz7746hruyjwl0tfgbsb.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar7oe8q4ukverf6wgbz7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hwus48jecw7tplr1jvm.png)

## Journey
<!-- Tell us about your process, the services you incorporated, what you learned, anything you are particularly proud of, what you hop to do next, etc. . -->
Even though we're only at the beginning, we have ambitious plans for this project long term. It will be very sophisticated and will require the infrastructure to fully build out a financial services company, so choosing AWS gives us that long-term option.

However, we also want to iterate quickly to get user feedback and improve the user experience, so we didn't want to spend too much time managing infrastructure. I had used Amplify gen1 before so I knew it had what we needed while also can provide integration down the line with other AWS services. When I saw Amplify gen2 and how it improved the developer experience further, it was a no brainer.

When I first started building this, Amplify Hosting gen2 didn't support custom domain yet. I knew the feature existed in gen1, so it's only a matter of time before it's available in gen2. Sure enough, before I even finished the frontend the feature was released. So now the site is reachable at https://pay.ripe.money/

Typescript support is also really useful, as I can export the correct typing to the frontend (Nextjs typescript) automatically from the schema in the data backend. The consistency is ensured automatically.

**Connected Components and/or Feature Full**

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four features: data, authentication, serverless functions, and file storage. -->
Of the four features (data, authentication, serverless functions, and file storage), we used all of them, although authentication and file storage are used only with the development team (see below).

Payment information submitted by the user is sent to the data backend (**AppSync** and **DynamoDB**), which triggers a serverless function (**Lambda**) to process the transaction.

For the development team, they can authenticate and authorize themselves (**Cognito**) to access some hidden features. One of which is for capturing a photo of QR code that the app fails to parse. This is uploaded to file storage (**S3**) for later analysis.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! →