PDD#12: Building Payment Apps in Hours (Using ChatGPT, Figma, Stripe)

Preface

Welcome to the 12th edition of this newsletter, the last one of 2023. And a warm welcome to the 30 new subscribers!

In the last article article (??link), we looked at how the AI is being used in the product space. We looked at some specific examples of where the generative and pattern detection feature of these Machine Learning (ML) models are being used across industries to make life of customer easy and secure.

In today's article let us explore hands-on product development to leverage the flows learnt in the past editions of this newsletter, and develop your own prototypes within hours. In this edition, we will look at:

1. Leveraging ChatGPT to build eCommerce site in < 20 Minutes.
2. Spin up eCommerce site using Figma's Templates in < 30 Minutes.
3. Accepting payments on your website using Stripe, in < 20 minutes.

Disclaimer: The information provided in this article is for general informational purposes only and should not be considered as professional advice. The content is based on my knowledge and research, and I have endeavored to ensure its accuracy. However, please note that information can change over time, and I cannot guarantee the accuracy, completeness, or relevance of the content at all times. The views expressed in this article are solely my own and do not necessarily reflect the views of any organizations I am affiliated with.

1. Leverage ChatGPT to build eCommerce site in < 20 Minutes

The advanced language models of today not only enables interesting interactions but can also help you in rapid development. While ChatGPT is most popular, there are various other options like Google Bard, LLaMa via Perplexity, HuggingChat etc.

Developers can use ChatGPT to expedite the development process, significantly reducing the time required to build functional payment applications. Creating an eCommerce website involves various components, but for this demonstration, let's focus on setting up the payments page using ChatGPT-generated code snippets in conjunction with a payment gateway like Stripe.

Instead of manually coding each aspect of the payment page, ChatGPT can expedite this process by generating foundational code snippets. Start by describing what you aim to build and then prompt ChatGPT to generate code snippets, for instance:

Prompt 1: "Imagine you're a web developer who specializes in developing ecommerce website. You're going to design a page for an online merchant to accept credit cards for payments, and generate invoice online. The website should be mobile-friendly and responsive. Do not add explanations for any of the code you write. Can you help me generate the code snippets for this page with a modern design?"

ChatGPT, leveraging its understanding of multiple programming languages, will generate the code for your page based on this prompt. It will provide you with:

• HTML Structure for Payment Form: Code snippets for laying out the payment form, including fields for card details, billing address, etc.
• CSS Structure for Visual Layout: Code snippets that are used to style the layout of specific HTML elements.
• JavaScript Functionality: Handle user interactions, such as validating card information and initiating payment transactions.

You can then visualize and play around with the code using another free online tool called CodePen. Just use my ChatGPT prompt link above or make changes to create your own version, and then copy-paste the HTML, CSS and JS into the three panes on CodePen.

Here is how CodePen showed the response to me for code snippets given by ChatGPT:

Once the payment form is ready, the next step would be to handle the payment information that we get from this page. This is done usually by simply integrating with a payment gateway or by doing a deeper integration with payment services. For a plug-and-play option, consider using Stripe to handle your payment flow via hosted checkouts or payment links (Option 3 below).

PS: You can utilize ChatGPT to map out entire user journey and site structure within minutes. You can prompt ChatGPT to generate the home page, product pages, and a checkout pages (green, yellow and red scenarios).

2. Spin up eCommerce site using Figma's Templates in < 30 Minutes

Figma design is a collaborative interface-design tool, and offers a vast array of existing templates (free and paid) for quick project kickstarts. Its ready-to-use templates enable developers and designers to kickstart their projects with pre-designed elements that can be easily customized.

With Figma's ready-to-use templates, teams can expedite the design process by selecting templates aligned with their project requirements. The cloud-based collaboration facilitates rapid iteration, real-time feedback, and action.

Below visual shows the look and feel of this tool, and I have taken a sample templates of "FREE e-commerce website for travel agency" added by Taguhi Tamrazyan and "E-commerce app" added by Prince.

You can have ChatGPT provide the codebase for these screens by requesting code page by page or section by section to avoid overwhelming the tool. ChatGPT can go into a rabbit hole if you ask for too much!

3. Accept payments on your website using Stripe in < 20mins

When asking for personal information like payment details, name, address, phone number etc. one has to be REALLY careful that the information is being entered and processed securely. Most businesses prefer entrusting checkout processes to certified payment processors or gateways to avoid handling sensitive information. For those processing information within their servers, tokenization is often used as an extra layer of security.

? Have questions on payment gateways? Catchup on PDD#06: Digital Payment Highways

? Have questions on tokenization? Catchup on PDD#09: Payment Tokenization explained

Lets see how can you leverage Stripe's hosted checkout (you will need to create a free account at Stripe's website first:

Step 1: Obtain Stripe API keys

• From Stripe Dashboard, navigate to "Developers" → "API keys" section.
• You'll find both your "??Publishable key" and "??Secret key" here. Ensure these keys are kept secure.

Step 2: Integrate Stripe Checkout

• Integrate Stripe Checkout by including the Stripe JavaScript library in your HTML file
• Update the Checkout button to have id="checkout-button"
• Add JavaScript to add event listener and initialize Stripe passing your ??Publishable key
• On your backend server, create a route (e.g., /create-checkout-session) that creates a Checkout Session along with your ??Secret key

Voila! You are done ??

Customize your checkout flow by adding features like Coupons, Shipping info, etc., on Stripe's site as shown below:

Feeling overwhelmed? You can also opt for creating a Payment Link that will take your customers to Stripe hosted page, where they can make the payment online.

These are just a few tools; there are many others available for you to play around with and learn from. If you wish to dig deeper into any specific option, you can leverage ChatGPT prompts or DM me for more detailed steps.

Using these AI tools along with the low code/no code options given by payment providers can expedite the development of your payment processing applications.

That is a wrap up for now. Your comments, opinions, and corrections are all much welcomed. If you enjoyed this article and think others will too, give this article a like below and share it. Thank you!