Connecting Arduino Nano 33 IoT With Real Payment Gateway for Product Dispensing/Action-after-payment

by omtomar in Circuits > Microcontrollers

553 Views, 3 Favorites, 0 Comments

Connecting Arduino Nano 33 IoT With Real Payment Gateway for Product Dispensing/Action-after-payment

By Om (2).png

In this project, we will create an IoT-based vending machine that accepts real payments through a website interface. The machine uses an Arduino Nano 33 IoT to interact with the website and dispense products once payments are confirmed via Stripe.

Supplies

nano.png
touchscreen.jpg
  • Arduino Nano 33 IoT
  • A touch screen or any display (to necessitate interface)
  • Computer with Internet access
  • Sensors (if needed)
  • Wiring components
  • Power source
  • Firebase account
  • Stripe account
  • HTML, CSS, and JavaScript knowledge

Setting Up Your Website(for GUI)

loading-page.png
GUI.png
quant.png

In this step, we will set up the website interface for your IoT vending machine. This interface will allow users to select products and make payments through Stripe. We'll use HTML, CSS, and JavaScript to create a user-friendly experience.


Your code may look this,

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Smart Pour</title>
 <link rel="stylesheet" href="styles.css">
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
 <!-- ... (previously defined sections) ... -->

 <!-- code for loadingPage -->
 <div id="loadingPage">
  <h1>Smart Pour</h1>
  <div id="animationContainer"></div>
 </div>

 <!-- code for productPage -->
 <div id="productPage" class="hidden mt-10 px-4">
  <!-- Product cards (you have provided these) -->

  <!-- ... (previously defined product cards) ... -->
 </div>

 <!-- code for qualityQuantityPage -->
 <div id="qualityQuantityPage" class="hidden mt-10 px-4">
  <!-- Quality and quantity selection (you have provided these) -->

  <!-- ... (previously defined quality and quantity selection elements) ... -->
 </div>

 <!-- ... (previously defined scripts) ... -->
</body>
</html>

JavaScript (index.js):

// JavaScript for animation loader, product selection, quantity, and more (you have provided these)
// ...

// Initialize Firebase (you have provided this as well)
const firebaseConfig = {
 // ... (your Firebase configuration)
};

// Function for updating sensor data (you have provided this)
// ...

// Function for Stripe payment initiation (you have provided this)
// ...

// Function to handle Stripe webhook and send data to Firebase (you have provided this)
// ...

In this step, we have provided an overview of the HTML structure and the JavaScript code you've previously shared. These sections include loadingPage, productPage, qualityQuantityPage, and relevant scripts. Make sure to adjust the code as needed and include it in your project.

Note: Ensure that you have the necessary CSS styles defined in your "styles.css" file for proper website styling, or you can use tailwindcss like me.

This is just the beginning of setting up the website interface. Continue to the following steps to integrate Stripe for payments, configure Firebase, program the Arduino Nano, and complete the project.

Integrating Stripe Payment Gateway

payment.png
create links.png
products.png

In this step, we will integrate the Stripe payment gateway into your website to facilitate real payments. Stripe is a widely used payment processing platform that allows you to securely accept payments from users. We'll create payment links for respective products, and after successful payments, redirect customers to your website's success page where you'll add logic to send payment meta data to Firebase.

1. Create a Stripe Account:

If you haven't already, sign up for a Stripe account at Stripe. Follow the registration process and verify your account.

2. Obtain Stripe API Keys:

Once your Stripe account is set up, you'll need your Stripe API keys: the publishable key and the secret key. You can find these keys in your Stripe Dashboard. These keys are essential for communicating with Stripe.

3. Set Up Payment Links:

To create payment links, follow these steps:

  1. Go to the "Create" option located at the top right corner of your Stripe Dashboard.
  2. Select "Payment Links."

For each product, generate unique payment links using the "Add Products" option. These links will be utilized to initiate payments for specific products. Each payment link should include comprehensive product details and the corresponding payment amount. Below is an example of how to structure payment links for your products:

Configuring Firebase for Real-time Communication

Firebase.png
firebase rules.png

In this step, we'll guide you through the process of setting up a Firebase account, creating a database, and configuring it for real-time communication with your Arduino Nano 33 IoT. Firebase is a powerful platform for real-time data storage and synchronization, making it ideal for IoT projects.


1. Create a Firebase Account:

If you don't already have one, start by creating a Firebase account at Firebase. Sign in using your Google account and follow the setup instructions.

2. Create a Firebase Project:

Once logged in, click on the "Go to Console" option, and then click "Add Project." Follow the prompts to create a new Firebase project.

3. Set Up a Firebase Realtime Database:

  • In your Firebase project dashboard, navigate to the "Develop" section on the left sidebar and select "Database."
  • Click "Create Database."
  • Choose "Start in locked mode" for security (you can adjust the rules later).
  • Select a location for your database.

4. Adjust Firebase Rules:

By default, Firebase security rules are set to deny all read and write access. You need to adjust these rules to allow communication with your Arduino Nano.

In your Firebase project, go to "Database" > "Realtime Database" and click on the "Rules" tab. Modify the rules to allow read and write access as needed for your project. Here's a simple example for testing purposes:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

5. Integrate Firebase in Your Project:

To enable communication between your website and your Arduino Nano, you'll need to integrate Firebase into both. Here are basic code examples for initializing Firebase in your website's JavaScript:

<!-- Add Firebase scripts to your web app project -->
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-database.js"></script>

<script>
 const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
  measurementId: "your-measurement-id"
 };

 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);
</script>

Replace the placeholders with your actual Firebase configuration details.

6. Firebase Integration in Arduino:

For your Arduino Nano 33 IoT to communicate with Firebase, you'll need to include Firebase libraries in your Arduino sketch. You can find these libraries in the Arduino Library Manager. After installing the libraries, you can use the Firebase API to read and write data in real-timeHere's a basic example of how to read data from Firebase using Arduino:

#include <Arduino.h>
#include <FirebaseESP8266.h>


#define FIREBASE_HOST "your-firebase-host.firebaseio.com"
#define FIREBASE_AUTH "your-firebase-auth"


FirebaseData firebaseData;


void setup() {
  Serial.begin(115200);
  delay(1000);


  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);


  if (!Firebase.beginStream(firebaseData, "/your/firebase/path")) {
    Serial.println("Could not begin stream.");
  }
}


void loop() {
  if (Firebase.readStream(firebaseData)) {
    Serial.println("Data: " + firebaseData.dataPath() + " - " + firebaseData.stringData());
  }
}

Make sure to replace "your-firebase-host", "your-firebase-auth", and "/your/firebase/path" with your Firebase project details.

By following these steps, you'll have Firebase set up for real-time communication between your website and your Arduino Nano 33 IoT, enabling data synchronization and interaction with your product dispensing machine.


Programming the Arduino Nano 33 IoT

Programming arduino.png

In this step, we'll guide you through programming the Arduino Nano 33 IoT to interact with your website, read data from Firebase, and respond to payment confirmations. You can use the provided starter code for Firebase integration as a basis. Additionally, we'll provide a clear wiring diagram for connecting the Arduino to the vending machine components.

Starter program for Arduino Nano 33 IoT:

#include <Arduino.h>
#include <WiFiNINA.h>
#include <Firebase_Arduino_WiFiNINA.h>


#define FIREBASE_HOST "your-firebase-url.firebaseio.com" // Replace with your Firebase database URL
#define FIREBASE_AUTH "your-firebase-auth-token"         // Replace with your Firebase authentication token
#define WIFI_SSID "your-wifi-ssid"
#define WIFI_PASSWORD "your-wifi-password"


FirebaseData firebaseData;


void setup() {
  Serial.begin(9600);
  while (!Serial);


  // Connect to Wi-Fi
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");


  // Initialize Firebase
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH, WIFI_SSID, WIFI_PASSWORD);


  pinMode(LED_BUILTIN, OUTPUT);
  digitalWrite(LED_BUILTIN, LOW);
}


void loop() {
  if (Firebase.getInt(firebaseData, "/paymentStatus")) {
    // Payment confirmed, take action (e.g., dispense product)
    Serial.println("Payment confirmed, dispensing product...");
    digitalWrite(LED_BUILTIN, HIGH); // Turn on an LED as an example


    // You can add your custom actions here
    // For example, controlling a motor to dispense a product
  } else {
    Serial.println("Waiting for payment confirmation...");
    digitalWrite(LED_BUILTIN, LOW); // Turn off the LED
  }


  delay(1000);
}


Testing and Troubleshooting

Entire Circuit Diagram.png

After setting up your system to connect the Arduino Nano 33 IoT with your website, it's essential to thoroughly test the system to ensure everything functions as expected (you can refer my circuit diagram from above). Additionally, you should be prepared to troubleshoot and resolve any issues that may arise during the setup. Here are the key steps for testing and troubleshooting:

Testing the System:

  1. Test Payment Process:
  2. Start by visiting your website and simulating a payment to ensure that the payment gateway (Stripe) is working correctly.
  3. Verify that the payment status is being correctly updated in your Firebase database.
  4. Testing Arduino Interaction:
  5. Confirm that the Arduino Nano 33 IoT is connected to your Wi-Fi network and Firebase.
  6. Check if the Arduino responds to changes in Firebase data. For example, if you update the /paymentStatus field, it should trigger the Arduino to take action.
  7. Sensor Data(if using):
  8. Monitor sensor data (like in my case it was pH, fat percentage, RGB color values) in the Arduino's serial monitor. Ensure that the data is being read correctly and sent to Firebase.
  9. Hardware Components:
  10. Verify that the hardware components (sensors, actuators) are connected properly and functioning as expected. For example, the pH sensor should provide accurate pH readings, and the flow meter should measure flow rates accurately.
  11. Real-time Communication:
  12. Check if the Arduino can receive real-time data from Firebase. Make sure the Firebase database is correctly structured to accommodate the data you're sending from the website.

Troubleshooting:

Common issues that may arise and their solutions:

  1. Arduino Connectivity:
  2. Issue: The Arduino is not connecting to Wi-Fi or Firebase.
  3. Solution: Double-check your Wi-Fi credentials (SSID and password) in the Arduino code. Ensure that the Firebase URL and authentication token are correct.
  4. Sensor Data Inaccuracy:
  5. Issue: Sensor data is inaccurate or inconsistent.
  6. Solution: Calibrate your sensors if needed. Ensure that the sensors are clean, correctly wired, and have stable power sources.
  7. Firebase Data Not Updating:
  8. Issue: Firebase data is not updating as expected.
  9. Solution: Check the Firebase paths and data types in your Arduino code. Verify that you are using the correct paths to read and write data.
  10. Payment Gateway Issues:
  11. Issue: Payment processing is not working as expected.
  12. Solution: Review your Stripe configuration and ensure that payment links from your website are correctly linked to the Firebase database. Check Stripe webhooks for any errors.
  13. Hardware Issues:
  14. Issue: Hardware components (e.g., actuators) are not responding.
  15. Solution: Inspect the wiring and connections. Ensure that the components are powered correctly and that the Arduino can control them.
  16. Data Security:
  17. Issue: Concerns about data security and privacy.
  18. Solution: Implement proper security measures in your system, including secure communication protocols (e.g., HTTPS) and data encryption, to protect sensitive information.
  19. Real-time Updates:
  20. Issue: Real-time updates from Firebase are not reaching the Arduino.
  21. Solution: Verify that Firebase data is correctly structured for real-time communication (using Firebase's real-time database capabilities).
  22. Serial Monitor Debugging:
  23. Solution: Utilize the Arduino's serial monitor for debugging. Print relevant information to the serial monitor to help identify issues.

Note: Learners, remember to document your own testing process and any issues you encounter. This documentation will be helpful for future maintenance and improvements to your embedded system.

By following these testing and troubleshooting guidelines, you can ensure that your Arduino Nano 33 IoT vending machine system works reliably and efficiently.

Conclusion

In this project, we have successfully integrated an Arduino Nano 33 IoT with a real payment gateway and IoT-based Milk-Dispensing machine system. We used a website as the graphical user interface (GUI) for the vending machine, which allowed users to select products, make payments through Stripe, and trigger actions such as dispensing products. The system also employed Firebase for real-time communication, enabling seamless interaction between the website and the Arduino Nano 33 IoT.

This project demonstrates the vital connection between the world of embedded systems and the growing ecosystem of real-world online transactions. By merging the capabilities of IoT devices with secure payment gateways, we have opened up exciting possibilities for various applications, including vending machines, smart appliances, and more.


Key points of this project:


  1. Real-time Communication: The use of Firebase allowed for real-time data exchange between the website and the Arduino Nano 33 IoT. This feature is essential for ensuring prompt responses to payment confirmations.
  2. Secure Payments: Integration with Stripe, a widely recognized payment gateway, ensures the security of financial transactions. This is of paramount importance in any system dealing with real payments.
  3. Sensor Integration: We incorporated sensors such as pH sensors, flow meters, and color sensors to collect data for quality control and user interaction. This sensor data can be used to make informed decisions, such as product dispensing.
  4. User Interface: The website served as the user-friendly interface for product selection and payment. It is the bridge that connects the end-user with the IoT device, making the system accessible and intuitive.
  5. Assignment Submission: Please note that this project is part of an assignment submitted to Deakin University, School of IT, Unit SIT210 - Embedded Systems Development.


In conclusion, the fusion of IoT and real payment systems presents a plethora of opportunities in the modern world. From enhancing the user experience in product-based dispensing machines to streamlining payment processes in various applications, this project serves as a testament to the incredible potential of embedded systems development.

As technology continues to evolve, it is important to stay at the forefront of innovation and explore new horizons in the field of embedded systems. This project is a step in that direction, paving the way for exciting developments in IoT and payment integration.

Thank you for joining us on this journey, and we hope that this project has inspired your own exploration of embedded systems and IoT applications.


Having troubles?

Refer to my GitHub to get my code: https://github.com/omsenpaiii/Smart-Pour

Watch Tutorial Video of a similar project: https://youtu.be/bArPJPXHNUs?si=tjlejP0QFk3-j0y5


This article is part of assignment submitted to Deakin University, School of IT, Unit SIT210 - Embedded Systems Development.