Powerful React Native Stripe Template with Next.js Backend

What do you get when you purchase this project?

By investing in this project, you will receive a comprehensive, fully functional full-stack application. On the frontend, you'll gain access to a pre-built React Native application that is primed and ready to accept payments and subscriptions seamlessly using Stripe. On the backend, you'll receive a cutting-edge Next.js application that is equipped with all the essential APIs required for effortless payment, customer, and subscription management. Simply insert your Stripe API keys, and you'll be set to start selling your product right away, without any hassle!.

You'll also receive the full source code for the project, including both the frontend and backend. With the source code, you can customize and modify the application to fit your specific use case or add additional features as needed.

As part of your purchase, you'll receive lifetime access to the project, which means you'll be able to access and use the application indefinitely. Additionally, you'll be able to access the project from your profile, where you can see all the projects you've purchased.

Frontend Details:

• Framework: React Native Expo (SDK 48) 🚀
• Language: TypeScript
• Stripe React Native: SDK 0.27.2 - 2023-05-15 (Latest)

Backend Details:

• Framework: NextJS (13.4.3)
• Language: TypeScript
• Stripe: 12.6.0

Prerequisites:

Before getting started with this project, please ensure you have the following:

• Stripe account: You will need a Stripe account to process payments and manage subscriptions. If you don't have one yet, you can sign up today on the Stripe website

• Familiarity with Next.js and React Native Expo: It's important to have a basic understanding of these frameworks to effectively work with the provided templates.

• Basic knowledge of handling APIs and webhooks on the backend: Understanding how to handle APIs and webhooks will be helpful in customizing and extending the backend functionality.

• Node.js: Make sure you have Node.js installed on your machine. You can download it from the official Node.js website.

• Make sure you have Yarn installed on your machine. You can install it by following the instructions on the official Yarn website.

How to Run

• Download the project to your local machine.
• Once downloaded, navigate to the project folder.
• Inside the project folder, you will find two subfolders: one containing the Frontend React Native App and the other containing the Backend Next.js App.

Running the NextJS App

• Open your favorite IDE (such as VSCode) and navigate to the backend folder.

• In the backend folder, run the following command to install the required dependencies:

  yarn

• Set up your Stripe keys:

  • Locate the .env.local.example file in the backend folder.
  • Place your own Stripe keys in the file.
  • Rename the file to .env.local

• That's it! You're now ready to start the server. Run the following command:

  yarn dev

The Next.js app will start running, utilizing the configured Stripe keys and serving the necessary APIs for payment processing, customer management, and subscription handling.

Running the React Native App

To run the React Native app, please follow these steps:

• Open your favorite IDE (such as VSCode) and navigate to the frontend folder.

• In the frontend folder, run the following command to install the required dependencies:

  yarn

• Configure your publishable API key:

  • Locate the .env.example file in the frontend folder.
  • Place your publishable API key in the file.
  • Rename the file to .env.

• To ensure Stripe integration works correctly, we need to build the app. Run the following command to create the android and ios folders.

  npx expo prebuild

• Finally run the following command based on your platform:

  • For IOS:

  yarn ios

  • For Android:

  yarn android

That's it 🎉

I hope you enjoy this project, If you don't have it already go to resources to get it today!

If you have any questions please contact support.

Go back to Resources