Forem: Mayowa Julius Ogungbola

Why your environment variables aren’t safe

Mayowa Julius Ogungbola — Thu, 27 Feb 2025 11:06:39 +0000

When building fintech applications that handle sensitive payment data, you quickly learn that security isn’t something you can take lightly. Environment variables have long been considered a secure way to store sensitive credentials like API keys, OAuth tokens, and database passwords. But are they really safe?

For fintech payment apps, security is non-negotiable. While .env files are a common approach to storing sensitive data, they come with risks that make them unsuitable for building applications on production. Some of these risks involve accidental exposure through misconfigurations, lack of encryption, or being unintentionally committed to repositories.

Imagine you’re in charge of a high-security bank vault. This vault holds millions of dollars, and only authorized personnel can access it. Instead of keeping the vault’s key in a restricted, access-controlled safe, you leave it in an unlocked desk drawer in a staff-only area.
At first, this might seem fine. Only employees work there, right? But all it takes is one:

Accidental exposure (someone sees it and remembers the combination).
Insider threat (a disgruntled employee takes advantage).
Security breach (an outsider gains access to the office and finds the key).

This is how environment variables work in applications. While they seem hidden, they are often accessible to logs, memory dumps, CI/CD pipelines, and even to attackers who gain limited system access.

This article discusses how environment variables can be a security risk and shows you how to keep your system truly secure by setting up a secrets manager and implementing key rotation for your Flutterwave secret keys. We’ll also touch on using OAuth as a more secure method for authorization.

The Hidden Risks of Environment Variables

At first glance, environment variables offer a simple solution: Keep your sensitive data out of your source code. You might even feel relieved knowing your API and secret keys are tucked away in a .env file that you don’t push to Git. However, the convenience comes at a cost. Here’s why:

Accidental Exposure
It’s common for developers to expose their environment variables, maybe through a misconfigured Git repository, a CI/CD pipeline logging excess information, or an error message that prints out variables during debugging; secrets can leak out in various ways.

Git Mishaps: Even with a properly configured .gitignore, mistakes happen. A developer might accidentally commit a backup of the .env file or even a misconfigured version that contains real keys.
CI/CD Pipelines: Build tools and deployment scripts often load environment variables into memory. If these logs aren’t handled properly, your secrets can end up on a public dashboard or in an accessible log file.
Debugging and Error Reporting: Stack traces might include environment data when an error occurs. If your error logging isn’t secure, this sensitive data could be exposed to unintended parties.

Lack of Key Rotation
Environment variables, like those used to store API keys in a .env file, are typically static. Once set, they remain unchanged until someone manually rotates it. In contrast, key rotation is a process that involves periodically changing your cryptographic keys to enhance security and reduce the risk of compromise.
Without a similar rotation process, static keys in environment variables pose a significant risk: if a key is ever compromised, it might remain valid for an extended period, giving attackers ample time to exploit your system.

Risk of Internal Exposure
With environment variables, anyone who has access to the deployment environment can see the secrets. This means that even if your production environment is secure, the fact that these secrets are available in plain text means that an insider threat or even an accidental leak from a trusted developer can lead to disaster.

Moving Beyond Environment Variables

Given these risks, how can you secure your sensitive data in fintech applications, especially when dealing with payment APIs?

Let’s walk through some steps to securing your secret variables:

1. Configure a secrets manager

Consider using a dedicated secrets management tool instead of storing your secrets in a .env file. Tools like AWS Secrets Manager, Google Cloud Secrets Manager, and many others are designed to securely store, rotate, and manage access to your secrets.

How to set up a secrets manager

Let’s walk through an example using AWS Secrets Manager:

Store your secret:
- Go to your AWS secrets manager console .
- Create a new secret and choose the option “Other type of secrets” if your key fits into predefined categories (or any other sensitive data) and give it a description name, for example, flutterewave-prod-api-key.

2. Access the secret in your application

Instead of loading the key from a .env file, your application will now fetch the key at runtime.

Here’s a Node.js example using the AWS SDK:

    const AWS = require('aws-sdk');
    const secretsManager = new AWS.SecretsManager({ region: 'us-east-1' });

    const secretName = "<REPLACE_WITH_YOUR_SECRET NAME>";
    async function getSecretValue(secretName) {
      try {
        const data = await secretsManager.getSecretValue({ SecretId: secretName }).promise();
        if ('SecretString' in data) {
          return data.SecretString;
        }
        throw new Error('Secret is binary. This example only handles text secrets.');
      } catch (err) {
        console.error('Error retrieving secret:', err);
        throw err;
      }
    }
    (async () => {
      const flutterwaveApiKey = await getSecretValue('flutterwave-prod-api-key');
      console.log('Flutterwave API Key retrieved securely!');
    })();

This approach prevents your API key from being stored in plaintext on your server or repository.

3. Implement key rotation

One of the benefits of using a secrets manager is the ability to rotate keys automatically.
Configure your secrets manager to rotate keys regularly (e.g., every 30 or 90 days). This minimizes the window of opportunity for an attacker in case a key is compromised.

Encryption and Data protection

Even when you move your secret into a dedicated secrets manager, encryption remains vital for security. Rather than leaving sensitive data in plain text (even briefly), encryption keeps your data protected at rest and in transit.

Here’s why encryption matters:

Data at rest: When your secrets are stored in a manager (such as AWS Secrets Manager or HashiCorp Vault), they’re encrypted using a strong algorithm that keeps the secret unreadable without the current decryption keys.
Data in transit: Whenever your application retrieves a secret, the request should occur over an encryption channel (HTTPS/TLS); this protects your API keys and credentials from being intercepted during transmission.
Operational security: Encrypting sensitive data minimizes the risk of accidental exposure (like logging an environment variable by mistake), and a strong encryption system with strict access controls lets insiders see only what they can access.

When working with payment methods like Flutterwave’s direct card charges for card payments, an encryption key is provided to encrypt your payload, which is essential for a FinTech solution that requires transmitting users' card details when making the request.

Now that you understand the importance of encryption when building complex financial applications, let's explore how to apply it effectively by following these best practices.

Best Practices for Using Encryption

Use managed solutions: Cloud-based secrets managers automatically handle encryption and decryption. They’re designed to store security securely and platform regular key rotations.
Always use HTTPS: Make sure every call that fetches secrets or exchanges sensitive data uses HTTPS, safeguarding against man-in-the-middle attacks.
Regular auditing: Use tools to audit your encryption keys and verify that your data is being encrypted at rest and in transit.

Embrace OAuth for Secure API Authentication

For fintech payment applications, relying solely on static API keys (even with encryption) isn’t ideal, as OAuth 2.0 is widely regarded as a more robust alternative by replacing long-lived, static credentials with short-lived access tokens that can be scoped, monitored, and revoked as needed.

Why OAuth is a better alternative:

Short-lived tokens: Temporary tokens with a limited lifespan to reduce the risk of unauthorized access if compromised
Scoped permissions: Access control that restricts a token’s actions to specific resources or operations, enhancing security.
Dynamic management: The ability to adjust or rotate secrets and access permissions in real time without application downtime.

How to Implement OAuth In Flutterwave

While Flutterwave v3 APIs don’t support OAuth, v4 (coming soon) introduces OAuth support features. In v3, you can integrate with third-party providers like Auth0 to secure your API calls.

For your Flutterwave API calls you might set up an OAuth 2.0 flow that looks something like this:

Step 1: Redirect to the authorization endpoint
When users try to log into your platform, you first need to redirect them to your OAuth provider’s authorization URL. Here’s an example using Express:

    const express = require('express');
    const app = express();
    const AUTHORIZATION_URL = 'https://your-auth-provider.com/authorize';
    const CLIENT_ID = 'YOUR_CLIENT_ID';
    const REDIRECT_URI = 'http://localhost:3000/callback';
    const SCOPE = 'openid profile email';
    const RESPONSE_TYPE = 'code';
    app.get('/login', (req, res) => {
      const authUrl = `${AUTHORIZATION_URL}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=${SCOPE}&response_type=${RESPONSE_TYPE}`;
      res.redirect(authUrl);
    });

In this snippet, when users navigate to log in, they are redirected to the provider’s login page. There, they are authenticated, and the provider then redirects them back to your application with an authorization code.

Step 2: Handling the callback and exchanging the code for a token
Once the user authenticates, the provider sends an authorization code to your callback URL. Your application then needs to exchange this code for an access token:

    const axios = require('axios');
    app.get('/callback', async (req, res) => {
      const authorizationCode = req.query.code;
      try {
        const tokenResponse = await axios.post('https://your-auth-provider.com/oauth/token', {
          grant_type: 'authorization_code',
          code: authorizationCode,
          redirect_uri: REDIRECT_URI,
          client_id: CLIENT_ID,
          client_secret: 'YOUR_CLIENT_SECRET'
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        const accessToken = tokenResponse.data.access_token;
        const expiresIn = tokenResponse.data.expires_in;
        res.send(`Access Token: ${accessToken} (Expires in ${expiresIn} seconds)`);
      } catch (error) {
        console.error('Error exchanging code for token:', error);
        res.status(500).send('Authentication failed.');
      }
    });
    app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Here’s what happens:

Receive the code: Your /callback endpoint receives the authorization code as a query parameter.
Token exchange: You then send a POST request to the provider’s token endpoint. This request includes your client credentials, the received authorization code, and your redirect URI.
Retrieve the token: If successful, the provider returns an access token (and optionally a refresh token), which you can then use to authenticate subsequent API calls.

Step 3: Using the Access Token to secure API calls
Once you have the access token, you can secure your API calls. For instance, if you’re making a request to Flutterwave’s API, your call might look like this:

    app.get('/payments', async (req, res) => {
      const accessToken = 'YOUR_RETRIEVED_ACCESS_TOKEN'; 
      try {
        const apiResponse = await axios.get('https://api.flutterwave.com/payments', {
          headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json'
          }
        });
        res.json(apiResponse.data);
      } catch (error) {
        console.error('Error making secure API call:', error);
        res.status(500).send('API request failed.');
      }
    });

The example above demonstrates:

Token usage: The access token is included in the Authorization header using the Bearer schema.
Secure communication: As with all secure API calls, the request is made over HTTPS, ensuring your sensitive data isn’t exposed in transit.

Best Practices for Secure Fintech Development

Beyond just switching out environment variables for a secrets manager and OAuth, there are several additional practices you should adopt to ensure your fintech applications remain secure:

Enforce the least privilege

Always adhere to the principle of least privilege . Only grant your applications and users the minimal permissions they need to perform their tasks and minimize the potential damage if an access token or secret is compromised.

Monitor and audit

Monitor access to your secrets and audit logs for any unusual activity. Use tools that alert you to anomalies, such as multiple failed access attempts or unexpected access from new IP addresses.

Encrypt data in transit and at rest

Always use TLS/SSL for data in transit and ensure that any data stored (including secrets) is encrypted at rest. This adds an extra layer of defense against man-in-the-middle attacks and unauthorized data access.

Educate your team

Security is not just a technical challenge, it’s also a people challenge. Ensure your team understands the risks associated with storing sensitive data in environment variables and follows best practices for secure coding and deployment.

Wrapping up

You can significantly reduce the risk of sensitive data leaks by moving to a dedicated secrets manager, leveraging OAuth for dynamic token-based authorization, and following best practices like least privilege and continuous monitoring. Not only do these measures help protect your fintech payment apps, but they also ensure you remain compliant with industry standards and protect your customers’ trust.

Remember, every time you store a secret in an environment variable, you’re essentially leaving a sticky note on your desk. It’s time to upgrade to a secure vault, one that only you and your trusted systems can access.

If you’re ready to build secure fintech products following best practices and security standards to safeguard your applications, sign up for a Flutterwave account to get started and explore the developer documentation.

From Code to Cloud: Deploying your Flutter Application to Globe

Mayowa Julius Ogungbola — Thu, 16 Jan 2025 15:34:26 +0000

Learn how to build, and deploy your Flutter apps effortlessly using Globe CLI.

As a mobile developer interested in building and managing scalable and innovative ideas, you will undoubtedly need to find the right platform to build, deploy, and manage your app, in our case, for this tutorial APIs. In fact, this is quite important after all. No matter how innovative the solutions you build are, if they are never shipped to deployment, they never get recognized.

Globe is a modern, developer-focused platform that promises to simplify this process by offering a seamless infrastructure for Flutter APP deployment and features that cater to scalability, reliability, and developer experience.

In this tutorial, my goal is simple–we’ll play around with Globe by building and deploying an API function. I’ll deploy your Globe and evaluate its performance. We’ll look at the benefits and downsides of using Globe and ways to leverage the best form of its service as developers.

The Globe Developer Experience

Whether you are a flutter developer building your next big thing, exploring new tools and platforms to build on, or a team managing complex microservices, Globe positions itself as an all-in-one solution to streamline DevOps workflows out of the box. Plus, it gives you a Dashboard to help you keep track of and know everything about your app.

Globe sets a high standard when creating a smooth developer experience by focusing on ease of use, detailed documentation, and a thoughtfully designed dashboard. Here’s a breakdown of what makes deploying with Globe a developer-friendly process:

Here are some key developer Features Globe offers on deployment

Automatic load balancing and scaling
Built-in CI/CD
Logging
Usage statistics & analytics
Advanced caching algorithms for Flutter Web deployments
Zero-config by default.

Automatic load balancing and scaling: Load balancing is a method adopted by modern apps to allow a network of distributed servers to manage the traffic of application requests. In simple terms, it manages a heavy traffic volume across multiple servers after deploying an application.
This task usually requires the expertise of a DevOps team or engineering team engineers. It's a very important part of shipping an app to production because it reduces the chances of overloading your servers. When deploying with the Globe, this feature is provided out of the box, eliminating the need for manual configuration.
Built-in continuous integration/continuous delivery (CI/CD): Every developer dreams of progressively updating their application, ensuring it remains secure from development to production and that every version release is monitored and controlled without any headaches in between. Globe allows you to maintain a secure CI/CD pipeline from Github.
Logging: Building a Flutter application means that, naturally, you’re working on an application with a lot of moving parts. In order to be able to monitor all these moving parts, you need to iterate some sort of logging tool. Deploying your application on Globe gives you a logging solution that helps you keep track of events, errors, and performance issues in real-time, providing valuable insights for debugging and improving the app’s reliability, which makes it incredibly helpful when debugging.
Usage statistics & analytics: Knowing the state of your application at every time is also an important feature Globe offers on deployments. You get to monitor the performance of your application at every point using advanced analytics tools provided on your Dashboard.
Advanced caching algorithms: Globes offers an advanced feature for Flutter web apps, building upon the concept of service workers and caching strategies. It provides a more fine-tuned approach to optimizing performance and resource management dynamics over caching and adds greater control over cache expiration and data updates.
Zero-config by Default: Unlike other deployment applications where you have to create a file or add configuration snippets. Globe allows you to deploy your application by running three commands using the Globe CLI (command line interface).

Evaluating Globe: Strengths and Areas for Improvement

After experimenting with this tool, here are some strengths and areas for improvement I found out when using Globe:

Strengths

CLI Tool for Automated Deployment: Globe offers a CLI that allows you to automate deployments easily. This means developers can integrate Globe’s deployment process into their GitHub actions workflow, allowing for automated, consistent deployments whenever changes are pushed to their repositories.
Easy Integration with GitHub Actions: Globe’s CLI tool also makes integrating with GitHub action workflows easy, allowing developers to create a seamless CI/CD pipeline for deploying their apps.
Scalability and Flexibility: Globe’s platform is designed to handle deploying a wide range of flutter applications, from small projects to large-scale enterprise solutions. Whether you’re deploying a counter app or a full-functioning mobile game, Globe gives you the flexibility to support your deployment needs.
Simple and User-friendly Setup: Globe offers an intuitive setup process that allows you to get started quickly without having to deal with complicated configurations. The user-friendly experience saves you a lot of time learning as a beginner or an expert, meaning you can get started configuring your apps for deployment.

Areas of Improvements

Lack of pre-built GitHub action: Unlike other platforms (e.g., Vercel, Firebase), Globe currently does not offer a suite of pre-built GitHub Actions for CI/CD tasks like linting, testing, or building. This means developers will need to manually create these workflows, which can be time-consuming and error-prone, especially for teams that aren’t familiar with setting up these custom workflows.
Limited Support for Advanced CI/CD Features: The Globe offers advanced CI/CD and analytics features. It lacks support for more advanced CI/CD features (such as automatic rollbacks on deployment failure or advanced versioning control). This means you or someone on your team still needs to have enough experience with DevOps technology and tooling these custom features themselves to fill the gap.
Limited Version Control System Support: Globe currently only supports Github for version control, which means that companies using version control systems like GitLab, or Bitbucket have a appeal limit. They have to consider other options or perhaps migrating to github, or maybe even meaning codebase across 2 version control platforms.
Limited Ecosystem and Documentation: Even with all its amazon features, Globe;s ecosystem and documentation might is not as expensive as other widely used platforms like Firebase, and AWS.

Deploying your Flutter app to Globe

Now we’ve got the big picture of the features Globe offers, Lets deploy a Flutterwave starter app and see how it works.

Head over to your project directory or workspace and run the dart pub global activate globe_cli on your terminal to install the Globe CLI.
Enter the command globe login. You’ll be redirected to your browser to complete the login process. You’ll get the following response.
Finally, run the Command globe deploy, you’ll get a prompt to specify your project directory in this case ./ , and to enter your project name, Flutter_demo. You will then get a response like the one below.

Click on the link, and voila, your app is deployed
Head over to your Globe account, and you’ll find your newly deployed app.

You can also decide to deploy your application directly from GitHub by choosing the `import from GitHub' option on your Globe dashboard.

Wrapping Up

Now that you’ve explored how Globe works, its key features and the areas where it can improve, you’ve also taken a hands-on approach by deploying your Flutter application using the Globe CLI. This tutorial demonstrates just how intuitive and straightforward the process can be.

Whether you’re an experienced developer or just starting your deployment journey, Globe offers a streamlined, user-friendly experience that caters to a variety of development needs. With Globe, you can confidently build, deploy, and scale your Flutter projects with ease.

Ready to get started with Globe and take your projects even further? Explore our other tutorials and unlock the full potential of Globe!

How To Integrate Direct Card Payment on Your Website Using Flutterwave

Mayowa Julius Ogungbola — Wed, 27 Nov 2024 13:28:52 +0000

As the demand for online payment options increases, card payments have quickly proven to spike the interest of most customers. Their appeal lies in their speed, accessibility, and security.

Unlike some payment methods, which require multiple steps for bank approval or third-party verification (like Automated Clearing House (ACH ) transfers or wire transfers), card payments offer a more direct process. Once the issuing bank authorizes a card payment, it is then processed almost immediately, without the need for additional approval, reducing the delay in completing the transaction.

Flutterwave facilitates various payment methods, including card charges, bank transfers, and mobile money. Flutterwave’s card payment option provides a reliable and secure platform for handling card payments, fully compliant with Payment Card Industry Data Security Standard (PCI DSS). This makes collecting payments seamless, ensuring a smooth customer experience.

In this tutorial, you’ll learn how to integrate Flutterwave’s direct card payment into your web application. You’ll also learn about the available card options and understand their differences. Finally, you’ll review the best practices for making online card payments.

Prerequisites

Before delving into integration, you should have the following:

Experience with building server-side apps with Nodejs.
Experience with HTML, CSS, and Javascript.
A good understanding of how payment gateways work.
A Flutte r wave account.
The node package manager npm installed on your device. If you don't have one, here’s how to install it.

Let's look at the basic steps to follow when integrating.

Basic Steps to Integrating Card Payment

There are 3 main steps to keep in mind when integrating Flutterwave direct card charges:

Initiating the Charge: This is the initial request, where you will send the card details (Card number, expiry date, CVV). The request will also include other required payloads like:
- currency - The currency for the transaction (e.g., "NGN")
- amount - The amount to charge
- email - Customer's email address
- full_name - Customer's full name
- phone_number - Customer's phone number
- enckey - Your Flutterwave encryption key
- tx_ref - A unique transaction reference
An encryption key is needed to make this request. Encrypting sensitive card details enhances the security of the transaction data being sent.
Completing the Charge: Depending on the type of card passed in the previous request, you’ll get a response from Flutterwave regarding the next step. Here are the four possible card scenarios you can expect and the next steps for these cards.

a. PIN Cards: These are cards that require a PIN for authorization.
- Next Step: First, collect the card PIN from the customer and send it with the next request. Then, the user will be required to enter an OTP to complete the payment.
b. 3DS/VBV Cards: These cards use 3D Secure or Verified by Visa authorization.
- Next Step: Redirect the customer to their bank page to complete the charge.
c. No Authentication: These card types require completing the charge with the user’s PIN.
- Next Step: Collect the card PIN from the customer and send it with the next request.
d. Address Verification Service (AVS): These cards require the user’s billing address for authentication.
- Next Step: Collect the billing address details from the customer and send it with the next request.
Validate the Charge: This is the final step to completing the charge. It is mainly applicable to the PIN cards. You’ll need to send in a one-time password to validate and complete the card payment.

Now that you understand the basic steps for mocking different cards let’s create a work environment to integrate them.

Setting Up Work Environment

First, go to your preferred IDE and run the command below to create a new directory.
```
mkdir direct-charge
cd direct-charge
```
Next, run the command below to initiate a node project.
```
npm init -y 
```
Add a .env and a server.js file to the directory with the command.
```
touch server.js .env
```
Go to your Flutterwave dashboard and navigate to the Settings > API key section to get your API keys. Copy and paste them into the variables below in your .env file.
```
FLW_PUBLIC_KEY=<YOUR_PUBLIC_KEY_HERE>
FLW_SECRET_KEY=<YOUR_SECRET_KEY_HERE>
FLW_ENCRYPTION_KEY=<YOUR_ENCRYPTION_KEY_HERE>
```

Finally, run the command below to install the following packages.

npm install cors dotenv express Flutterwave-node-v3 nodemon

Let’s set up your node server.

Setting Up Integration Server

Now that you have the essential setup ready and understand how the payment flow works, let’s integrate Flutterwave’s direct card charges using the Flutterwave Node.js SDK.

Navigate to the server.js file and add the code below to initialize your backend server.

// server.js

const express = require('express');
const Flutterwave = require('Flutterwave-node-v3');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3000;
const dotenv = require('dotenv');
dotenv.config();

const flw = new Flutterwave(process.env.FLW_PUBLIC_KEY, process.env.FLW_SECRET_KEY);

app.use(cors());
app.use(express.json());
app.use(bodyParser.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname));

// Endpoint for rendering static HTML form
app.get('/', (req, res) => {
res.sendFile(__dirname + './index.html');
});

app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});

The code above imports and sets up the packages you’ll need to build your integration server, including the Flutterwave-node-v3 package. The first endpoint here will be responsible for rendering the HTML form you’ll create to simulate your payment flow.

Next, set up a /charge-card endpoint to initialize the card payment. The endpoint initializes the card payment by calling the flw.Charge.card method. It handles the various flows that Flutterwave requires to send the next step parameters. Add the code below:

// server.js
// Endpoint for rendering static HTML form

// Handle card charge
app.post('/charge-card', async (req, res) => {
    new_ref = "example" + Date.now();
    const payload = {
        card_number: req.body.card_number,
        cvv: req.body.cvv,
        expiry_month: req.body.expiry_month,
        expiry_year: req.body.expiry_year,
        currency: "NGN",
        amount: "100",
        email: req.body.email,
        fullname: req.body.fullname,
        phone_number: req.body.phone_number,
        enckey: process.env.FLW_ENCRYPTION_KEY,
        tx_ref: new_ref,
    };
    new_payload = payload;

    try {
        const response = await flw.Charge.card(payload);
        if (response.meta.authorization.mode === 'pin') {
            res.json({ 
                status: 'pin_required', 
            });
        } else if (response.meta.authorization.mode === 'redirect') {
            res.json({ 
                status: 'redirect_required', 
                url: response.meta.authorization.redirect, 
                tx_ref: new_ref
            });
        } else if (response.meta.authorization.mode === 'otp') {
            res.json({ 
                status: 'otp_required', 
                tx_ref: new_ref,
                flw_ref: response.data.flw_ref
            });
        } else {
            res.json({ status: 'success', data: response.data });
        }
    } catch (error) {
        console.error(error);
        res.status(500).json({ status: 'error', message: error.message });
    }
});

// app.listen(port, () => {

If the card details sent in the request are a PIN Card or a 3DS Card, Flutterwave returns a payload telling you what to send to authorize the charge.

Next, create a /complete-charge endpoint that calls Flutterwave flw.Charge.card method, but this time, passing in the authorization required by Flutterwave to authorize the charge.

// server.js
// Endpoint to Handle card charge

// Handle additional authorization
app.post('/complete-charge', async (req, res) => {
    const { authMode, pin } = req.body;
    try {
        let response;
        if (authMode === 'pin') {
            response = await flw.Charge.card({
                ...new_payload,
                authorization: {
                    mode: 'pin',
                    pin: pin
                }
            });            
        }

        if (response.status === "success") {
            res.json({ status: 'success', data: response });
        } else {
            res.json({ status: 'failed', message: response.data.processor_response });
        }
    } catch (error) {
        console.error(error);
        res.status(500).json({ status: 'error', message: error.message });
    }
});

Add an endpoint to validate the transaction, which will call the flw.Charge.validate method passing in an OTP to complete the card charge.

// server.js
// Endpoint to Handle additional authorization

// Validates the card charge
app.post('/validate-charge', async (req, res) => {
    try {
        const { otp, flw_ref } = req.body;
        const response = await flw.Charge.validate({
            otp: otp,
            flw_ref: flw_ref
        });
        res.json(response);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

Finally, run the command below to run the server. Use nodemon for this, so your server keeps running while you make changes.
```
nodemon server.js
```
Now that you have your server-side integration set up, let’s create a front-end form for users to enter their card details before making requests to Flutterwave.

Implementing the Payment Form

Create the following files index.html and styles.css, by running the command below:
```
touch index.html styles.css
```
Head over to GitHub to copy and add the CSS script to your styles.css file.

Now, let's create a basic HTML form for users to input their card details and the additional authorization parameters (PIN and OTP) required to authorize the card payment. You’ll only display the field for these inputs after the first response is sent, and you will know the type of card you’re charging and the parameters to send next.

/* index.html */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css"/>
    <title>Flutterwave Card Payment</title>
  </head>
  <body>
    <div class="container">
      <h1>Flutterwave Card Payment</h1>
      <form id="paymentForm">
        <input type="text" name="card_number" placeholder="Card Number" >
        <input type="text" name="cvv" placeholder="CVV" >
        <input type="text" name="expiry_month" placeholder="Expiry Month" >
        <input type="text" name="expiry_year" placeholder="Expiry Year" >
        <input type="email" name="email" placeholder="Email" >
        <input type="text" name="fullname" placeholder="Full Name" >
        <input type="tel" name="phone_number" placeholder="Phone Number" >
        <button type="submit">Pay Now</button>
      </form>

      <div id="authForm" style="display: none;">
        <h2>Additional Authorization Required</h2>
        <form id="additionalAuthForm">
          <div id="pinAuth" style="display: none;">
            <input type="password" name="pin" placeholder="Enter PIN" >
          </div>
          <div id="otpAuth" style="display: none;">
            <input type="text" name="otp" placeholder="Enter OTP" >
          </div>
          <button type="submit">Complete Payment</button>
        </form>
      </div>

      <div id="response"></div>
    </div>
    <script></script>
  </body>
</html>

Now that your server is running, navigate to the port http://localhost:3000/ on your browser, and you should see an image like the one below.

Next, you’ll create the flow to simulate multiple scenarios.

Note: For this tutorial, you’ll focus on simulating the PIN, 3DS, and No-Authorization card scenarios.
Head over to Flutterwave’s testing page to get card details to mock the multiple card scenarios you’ll cover.

Handling Payment Flow

Over the next few steps, you’ll simulate the payment flow for the multiple card scenarios (PIN, No Auth, and 3DS).

Step 1: Initialize Variable

Create the global variables to capture new responses from Flutterwave and use them across multiple endpoints.

    <!-- index.html  -->
    </div> 
          <script>
              let currentFlwRef = '';
              let currentAuthMode = '';
              let currentTxRef = '';
          </script>
      </body>

currentFlwRef: Stores the current Flutterwave reference for the transaction.
currentAuthMode: Tracks the current authentication mode (e.g., 'pin', 'OTP').
currentTxRef: Stores the current transaction reference.

Step 2: Handle Form Submission

Attach an event listener to the form with the ID paymentForm to enable asynchronous handling of the form submission. When the form is submitted, you’ll use a handleChargeResponse() function to handle the authorization for the next step.

    <!-- index.html -->
    <script>
    ...
    // Step 1 code goes here
    ...

      document.getElementById('paymentForm').addEventListener('submit', async (e) => {
                  e.preventDefault();
                  const formData = new FormData(e.target);
                  const payload = Object.fromEntries(formData);
                  try {
                      const response = await fetch('/charge-card', {
                          method: 'POST',
                          headers: { 'Content-Type': 'application/json' },
                          body: JSON.stringify(payload)
                      });
                      const result = await response.json();
                      handleChargeResponse(result);
                  } catch (error) {
                      console.error('Error:', error);
                  }
              });
    </script>

Step 3: Handle Payment Response

Now, let’s create a handleChargeResponse function to handle the response you get from Flutterwave depending on the type of card used to initiate the transfer so you’ll know what authorization parameters to send.

/* index.html */

<script>
...
// Step 2 code goes here
...

function handleChargeResponse(result) {
            if (result.status === 'pin_required') {
                currentFlwRef = result.flw_ref;
                currentTxRef = result.tx_ref;
                currentAuthMode = 'pin';
                showAuthForm(currentAuthMode);
            } else if (result.status === 'redirect_required') {
                // Automatically redirect to the OTP page
                window.location.href = result.url;
            } else if (result.status === 'success') {
                document.getElementById('response').innerText = 'Payment successful!';
            } else {
                document.getElementById('response').innerText = 'Payment failed. Please try again.';
            }
        }
</script>

Step 4: Show Authorization Form

After sending the initial request /charge-card and getting a response from Flutterwave, depending on the type of card details passed, you’ll display the additional form to the user, either to pass in their card PIN for PIN cards or redirect them to their bank or an OTP to validate and complete the charge.

/* index.html */
<script>
...
// Step 3 code goes here
...
        function showAuthForm(authMode) {
            document.getElementById('authForm').style.display = 'block';
            document.getElementById('pinAuth').style.display = authMode === 'pin' ? 'block' : 'none';
            document.getElementById('otpAuth').style.display = authMode === 'otp' ? 'block' : 'none';
        }
</script>

Step 5: Handle Additional Authorization Form Submission

When the additionalAuthForm is submitted, the code prevents the default behaviour of handling the submission. It collects the form data and checks the currentAuthMode to determine whether the request should proceed with PIN or OTP verification.

/* index.html */
<script>
...
// Step 4 code goes here
...
// Handle Additional Authorization Form Submission
document.getElementById('additionalAuthForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const authData = Object.fromEntries(formData);

    try {
        if (currentAuthMode === 'pin') {
            // Handle PIN submission in the next step
        } else if (currentAuthMode === 'otp') {
            // Handle OTP submission
            const response = await fetch('/validate-charge', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    otp: authData.otp,
                    flw_ref: currentFlwRef
                })
            });
            const result = await response.json();

            if (result.status === 'success') {
                document.getElementById('response').innerText = 'Payment successful!';
                document.getElementById('authForm').style.display = 'none';
            } else {
                document.getElementById('response').innerText = 'OTP validation failed. Please try again.';
            }
        }
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('response').innerText = 'An error occurred. Please try again.';
    }
});
</script>

Step 6: Handle PIN Response

If the currentAuthMode is set to pin, a request is sent to flw.Charge.validate with the entered PIN. The response is checked for success:

/* index.html */
<script>
...
// Step 5 code goes here
...
if (currentAuthMode === 'pin') {
    const response = await fetch('/complete-charge', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            authMode: 'pin',
            pin: authData.pin,
        })
    });
    const result = await response.json();

    currentFlwRef = result.data.data.flw_ref;
    currentTxRef = result.data.data.tx_ref;

    if (result.status === 'success' && result.data.data.status === 'pending') {
        currentAuthMode = 'otp';
        showAuthForm('otp');
    } else if (result.status === 'success' && result.data.data.status === 'successful') {
        document.getElementById('response').innerText = 'Payment successful!';
        document.getElementById('authForm').style.display = 'none';
    } else {
        document.getElementById('response').innerText = 'PIN validation failed. Please try again.';
    }
}
</script>

If pending, the currentAuthMode is updated to otp, prompting the user for OTP verification.

If successful, a success message is displayed like in the image below.

If validation fails, an error message prompts the user to re-enter the PIN.

You can also check out the complete demo app on GitHub.

Wrapping Up

Now that you’ve gone through the steps to integrate Flutterwave card payment into your website using the Flutterwave Node SDK, you can begin accepting seamless card payments from your customers.

With this integration, you’ve added a key feature that meets the demands of today’s economy, setting your business up for growth and customer satisfaction.

Check out our Node.js SDK for more payment methods you can integrate. You can also check out our developer documentation on best practices.

Read more on how to integrate a payment gateway into your e-commerce app.

Understand what JavaScript deobfuscation is in web scraping

Mayowa Julius Ogungbola — Mon, 18 Nov 2024 12:51:43 +0000

JavaScript deobfuscation is the process of reversing obfuscated JavaScript code to understand its functionality and extract necessary data. JavaScript is generally used in websites to generate or hide content dynamically, making it harder for scrapers to collect data directly from HTML.

Obfuscation is a technique used to make JavaScript code difficult to read or understand by modifying variable names, adding extra code, and using encryption or encoding methods.

Use Cases Of Obfuscation

Here are some common techniques used to Obfuscate Javascript:

Renaming Variables and Functions: A good example is when variables and functions can be renamed to meaningless names like a1, b2, making it harder to understand their purpose.
String Encoding/Encryption: Strings, like URLs or content, are encrypted or encoded using base64 or custom encoding methods.
Control Flow Obfuscation: A website could also employ obfuscation to alter the execution of the order, making it harder to follow the logic of the code.
Dead Code Insertion: Another good thing is when irrelevant or unreachable code is used to increase the complexity of the website.
Minification: This technique removes all unnecessary whitespace and comments, reducing readability while making the code smaller.
Function Wrapping and Indirection: Wrapping important functions with multiple layers of other functions or executing code through indirect calls.

Deobfuscation in Web Scraping

Here’s a couple of ways JavaScript deobfuscation is relevant to web scraping:

Handling Dynamic Content Many modern websites use JavaScript to load data dynamically, which might pose challenges for web scrapers For example, Imagine trying to access a website that uses AJAX or similar methods to load data after the initial HTML is rendered. This usually makes it hard for scrapers accomplish their task because they often need to analyze and understand this JavaScript code to: Retrieve data loaded asynchronously. Simulate the behavior of a web browser and interact with the JavaScript as a human user would.
Bypassing JavaScript Obfuscation Some websites may intentionally obfuscate their JavaScript to protect their data from being scraped. This means JavaScript deobfuscation helps reverse these techniques by: Identifying and translating obfuscated variables and functions into more readable forms. Analyzing the flow of JavaScript code to understand how data is loaded or manipulated.
Extracting Hidden Data Some websites store key data (e.g., product prices, stock levels, user reviews) in JavaScript variables, encoded strings, or dynamically generated HTML. Deobfuscation can help extract this hidden information.
Avoiding Anti-Scraping Measures Websites may also use JavaScript-based anti-scraping measures, such as CAPTCHAs, rate limiting, or browser fingerprinting. Deobfuscating the JavaScript helps scrapers:

Understand how these protections are implemented.
Simulate legitimate user behaviour.
Avoid or bypass these anti-scraping techniques.

Methods Used in Deobfuscation

Manual Inspection: Developers analyze the obfuscated JavaScript code to understand its logic.
Automated Tools: There are tools and libraries available to assist in deobfuscation, like JavaScript beautifiers or specialized deobfuscation software.
Headless Browsers: Tools like Puppeteer or Playwright can execute JavaScript in a headless browser, making it easier to scrape dynamic content without directly deobfuscating the code.

JavaScript deobfuscation helps web scrapers a great deal by navigating the complexities of modern websites. With a combination of manual analysis and automated tools, developers can decode obfuscated code, enabling them to access valuable information that would otherwise be difficult to retrieve.
As web technologies continue to evolve, mastering JavaScript deobfuscation will remain a crucial aspect of successful web scraping endeavours.
If you’d like to learn how to Obfuscate your Javascript code, check out this quick read.
Check out our blog for more tutorials on web scraping and how to get started.
Web Scraping with Java.
Web Scraping with Python.
How to parse table using beautiful soup.

Understand what JavaScript deobfuscation is in web scraping

Mayowa Julius Ogungbola — Mon, 18 Nov 2024 12:51:43 +0000

Obfuscation is a technique used to make JavaScript code difficult to read or understand by modifying variable names, adding extra code, and using encryption or encoding methods.

Use Cases Of Obfuscation

Here are some common techniques used to Obfuscate Javascript:

Renaming Variables and Functions: A good example is when variables and functions can be renamed to meaningless names like a1, b2, making it harder to understand their purpose.
String Encoding/Encryption: Strings, like URLs or content, are encrypted or encoded using base64 or custom encoding methods.
Control Flow Obfuscation: A website could also employ obfuscation to alter the execution of the order, making it harder to follow the logic of the code.
Dead Code Insertion: Another good thing is when irrelevant or unreachable code is used to increase the complexity of the website.
Minification: This technique removes all unnecessary whitespace and comments, reducing readability while making the code smaller.
Function Wrapping and Indirection: Wrapping important functions with multiple layers of other functions or executing code through indirect calls.

Deobfuscation in Web Scraping

Here’s a couple of ways JavaScript deobfuscation is relevant to web scraping:

Handling Dynamic Content Many modern websites use JavaScript to load data dynamically, which might pose challenges for web scrapers For example, Imagine trying to access a website that uses AJAX or similar methods to load data after the initial HTML is rendered. This usually makes it hard for scrapers accomplish their task because they often need to analyze and understand this JavaScript code to: Retrieve data loaded asynchronously. Simulate the behavior of a web browser and interact with the JavaScript as a human user would.
Bypassing JavaScript Obfuscation Some websites may intentionally obfuscate their JavaScript to protect their data from being scraped. This means JavaScript deobfuscation helps reverse these techniques by: Identifying and translating obfuscated variables and functions into more readable forms. Analyzing the flow of JavaScript code to understand how data is loaded or manipulated.
Extracting Hidden Data Some websites store key data (e.g., product prices, stock levels, user reviews) in JavaScript variables, encoded strings, or dynamically generated HTML. Deobfuscation can help extract this hidden information.
Avoiding Anti-Scraping Measures Websites may also use JavaScript-based anti-scraping measures, such as CAPTCHAs, rate limiting, or browser fingerprinting. Deobfuscating the JavaScript helps scrapers:

Understand how these protections are implemented.
Simulate legitimate user behaviour.
Avoid or bypass these anti-scraping techniques.

Methods Used in Deobfuscation

Manual Inspection: Developers analyze the obfuscated JavaScript code to understand its logic.
Automated Tools: There are tools and libraries available to assist in deobfuscation, like JavaScript beautifiers or specialized deobfuscation software.
Headless Browsers: Tools like Puppeteer or Playwright can execute JavaScript in a headless browser, making it easier to scrape dynamic content without directly deobfuscating the code.

How to Build a Product Scraper for Infinite Scroll Websites using ZenRows Web Scraper

Mayowa Julius Ogungbola — Mon, 18 Nov 2024 02:05:15 +0000

In the realm of web scraping, accessing and extracting data from web pages that use infinite scrolling can be a challenge for developers. Many websites use this technique to load more content dynamically, making it hard to scrape all available data in one go. A good solution involves simulating user actions, like clicking a "Load More" button to reveal additional content.
This tutorial will delve into scraping product data from a page with infinite scroll, utilizing Zenrows open-source web scraper, you’ll build a scraper bot that will access contents from a web page, and you’ll use Zenrows to generate more products on the page by clicking the "Load More" button, to simulate an infinite scrolling.

Prerequisites

To follow this tutorial, you need to have the following:

Python: You should have Python set up on your machine. If not, you can install it here.
Web Scraping Foundation: You should have a solid grasp of how web scraping works.
ZenRows SDK: You will be using the ZenRows service to bypass anti-scraping measures and simplify scraping dynamic content. You can sign up for a free ZenRows account here.

Getting Access to the Content

Once you have signed up for your Zenrows account and you have the prerequisites in place, the next step is to access the content from the web page; for this tutorial, you’ll be using this page https://www.scrapingcourse.com/button-click.

You'll also use ZenRows SDK to scrape the dynamic pages and handle various rendering and anti-bot measures. Let’s get you started:

Install the required Libraries:
Open the terminal of your preferred IDE and run the code to install the ZenRows Python SDK.

pip install zenrows python-dotenv

Setting Up your API

Head over to your dashboard and copy the API Key at the top right corner of your screen like in the image below.

Next, create the pages app.py and .env, then add the code below to your app.py file. And add your API key to the variable API_KEY in your .env file.

# Import ZenRows SDK
from zenrows import ZenRowsClient
from dotenv import load_dotenv
import os

# Load environment variables
load_dotenv()

# Initialize ZenRows client with your API key
client = ZenRowsClient(os.getenv("API_KEY"))

# URL of the page you want to scrape
url = "https://www.scrapingcourse.com/button-click"

# Set up initial parameters for JavaScript rendering and interaction
base_params = {
    "js_render": "true",
    "json_response": "true",
    "premium_proxy": "true",
    "markdown_response": "true"
}

The code above initiates the Zenrow SDK using your API key. It sets up the URL variable for the webpage you’ll be scraping and establishes the base_params variable for the necessary parameters. You can execute the scraper using the command:

python app.py

This will provide you with the HTML representation of the page containing only the products on the current page.
.

You can always take this one step further.

Loading More Products

To enhance your scraper, you can implement additional parameters to interact with the "Load More" button at the bottom of the webpage and load more products.

Start by modifying your imports to include the necessary packages and adding a parse_products function that filters the product response:

import re
import json
import time

def parse_products(response_json):
    try:
        data = json.loads(response_json)
        md_content = data.get('md', '')
        pattern = r'\[!\[([^\]]+)\]\(([^\)]+)\)\\*\n([^\\\n]+)\\*\n\\*\n\$(\d+)\]\(([^\)]+)\)'
        matches = re.findall(pattern, md_content)

        products = []
        for match in matches:
            product = {
                'name': match[0],
                'image_link': match[1],
                'price': int(match[3]),
                'product_url': match[4]
            }
            products.append(product)

        return products
    except json.JSONDecodeError:
        print("Error: Unable to parse JSON response")
        print("Response content:", response_json[:500])
        return []
    except Exception as e:
        print(f"Error parsing products: {str(e)}")
        return []

# Zenrow SDK code here

Next, create a while loop to continuously scrape product information from multiple pages until a specified limit (max_products). Set the limit to 50 for this tutorial:

# Zenrow SDK code goes here

max_products = 50
all_products = []
page = 1

while len(all_products) < max_products:
    print(f"Scraping page {page}...")

    # Update parameters for each request
    params = base_params.copy()
    js_instructions = [{"click": "#load-more-btn"} for _ in range(page)]
    js_instructions.append({"wait": 5000})
    params["js_instructions"] = json.dumps(js_instructions)

    try:
        # Send the GET request to ZenRows
        response = client.get(url, params=params)

        # Parse the response JSON
        new_products = parse_products(response.text)

        if not new_products:
            print("No more products found. Stopping.")
            break

        all_products.extend(new_products)
        print(f"Found {len(new_products)} products on this page.")
        print(f"Total products so far: {len(all_products)}")

        page += 1

        # Add a delay to avoid overwhelming the server
        time.sleep(2)

    except Exception as e:
        print(f"Error occurred: {str(e)}")
        break

This loop will continue to scrap products by simulating the clicking of the "Load More" button until the specified limit is reached.
Parsing Product Information
Finally, you can parse the product information you scraped in the previous step. For each product, extract the product name, image link, price, and product page URL. You can also calculate the total price of all products and print the results as follows:

# Updated Params and while loop code goes here
# Calculate the total price of all products
total_sum = sum(product['price'] for product in all_products)

print("\nAll products:")
for product in all_products:
    print(product)

# Print the total sum of the product prices
print(f"\nTotal number of products: {len(all_products)}")
print(f"Total sum of product prices: ${total_sum}")

Parsing Into a CSV file

If you would prefer to parse your response into an exported csv file, in the next few steps, you'll take the product information you've scraped and learn how to export it to a CSV file.

Modifying the Script to Save Data

First, you need to use Python's built-in CSV module to save the product data. In this case, each product has four main attributes: name, image_link, price, and product_url.

You can use them as the headers for your CSV, loop through the list of scraped products, and then write each product as a row in the CSV file.

# Parse_product function goes here

# Saving to csv
def save_to_csv(products, filename='products.csv'):
    """Save product data to a CSV file."""
    with open(filename, mode='w', newline='') as file:
        writer = csv.DictWriter(file, fieldnames=['name', 'image_link', 'price', 'product_url'])
        writer.writeheader()
        for product in products:
            writer.writerow(product)
    print(f"Saved {len(products)} products to {filename}.")

Now, after scraping the data, just call the save_to_csv(all_products) function to store the data in a CSV file named products.csv.

Run the command to automatically save the data to a CSV file once the scraping process is complete.

Python app.py

Identifying the 5 Highest-Priced Products

Now that you have all the products in a structured format, you can go a step further and identify the 5 highest-priced products, and you’ll have to visit each product page to extract extra details like the product description and SKU code.

Sorting the Products by Price: Using Python's sorted() function, you can sort the product list by the price in descending order and retrieve the top 5 products.

You’ll need to visit each page using the requests.get() function to fetch the product data for each of them. From the response, you can extract the product description and SKU code.
You can also update the csv flie from the last step to include the additional details.

Here is the code to achieve that:

# save_to_csv code goes here

# This handles the extra product details to fetch and handles errors if there are none
def extract_product_details(product_url):
    """Extract product description and SKU from a product page."""
    try:
        response = requests.get(product_url)
        response.raise_for_status()  # Check for HTTP errors
        product_data = json.loads(response.text)

        description = product_data.get('description', 'No description found')
        sku = product_data.get('sku', 'No SKU found')

        return description, sku
    except Exception as e:
        print(f"Error fetching product details from {product_url}: {str(e)}")
        return None, None

Now, after scraping, you can now identify the highest-priced products:

# While loop and zenrows updated params code goes here


# Identify the 5 highest-priced products
highest_priced_products = sorted(all_products, key=lambda x: x['price'], reverse=True)[:5]

# Print and extract extra details for each product
for product in highest_priced_products:
    description, sku = extract_product_details(product['product_url'])
    print(f"Product: {product['name']}, Description: {description}, SKU: {sku}")

After retrieving the additional information, you can either modify the CSV file or create a new one with these details included.

The Complete Code

Here is how your complete app.py file should look like.

from zenrows import ZenRowsClient
import re
import json
import time
import csv
from dotenv import load_dotenv
import os
import requests


load_dotenv()


def parse_products(response_json):
    try:
        data = json.loads(response_json)
        md_content = data.get('md', '')
        pattern = r'\[!\[([^\]]+)\]\(([^\)]+)\)\\*\n([^\\\n]+)\\*\n\\*\n\$(\d+)\]\(([^\)]+)\)'
        matches = re.findall(pattern, md_content)

        products = []
        for match in matches:
            product = {
                'name': match[0],
                'image_link': match[1],
                'price': int(match[3]),
                'product_url': match[4]
            }
            products.append(product)

        return products
    except json.JSONDecodeError:
        print("Error: Unable to parse JSON response")
        print("Response content:", response_json[:500])
        return []
    except Exception as e:
        print(f"Error parsing products: {str(e)}")
        return []


def save_to_csv(products, filename='products.csv'):
    """Save product data to a CSV file."""
    with open(filename, mode='w', newline='') as file:
        writer = csv.DictWriter(file, fieldnames=['name', 'image_link', 'price', 'product_url'])
        writer.writeheader()
        for product in products:
            writer.writerow(product)
    print(f"Saved {len(products)} products to {filename}.")


def extract_product_details(product_url):
    """Extract product description and SKU from a product page."""
    try:
        response = requests.get(product_url)
        response.raise_for_status()  # Check for HTTP errors
        product_data = json.loads(response.text)


        # Example extraction logic for description and SKU; update according to the actual structure
        description = product_data.get('description', 'No description found')
        sku = product_data.get('sku', 'No SKU found')


        return description, sku
    except Exception as e:
        print(f"Error fetching product details from {product_url}: {str(e)}")
        return None, None


client = ZenRowsClient(os.getenv("API_KEY"))


# URL of the page you want to scrape
url = "https://www.scrapingcourse.com/button-click"


# Set up initial parameters for JavaScript rendering and interaction
base_params = {
    "js_render": "true",
    "json_response": "true",
    "premium_proxy": "true",
    "markdown_response": "true"
}


all_products = []
page = 1
max_products = 50  # Set this to the number of products you want to retrieve


while len(all_products) < max_products:
    print(f"Scraping page {page}...")

    # Update parameters for each request
    params = base_params.copy()
    js_instructions = [{"click": "#load-more-btn"} for _ in range(page)]
    js_instructions.append({"wait": 5000})
    params["js_instructions"] = json.dumps(js_instructions)

    try:
        # Send the GET request to ZenRows
        response = client.get(url, params=params)

        # Parse the response JSON
        new_products = parse_products(response.text)

        if not new_products:
            print("No more products found. Stopping.")
            break

        all_products.extend(new_products)
        print(f"Found {len(new_products)} products on this page.")
        print(f"Total products so far: {len(all_products)}")

        page += 1

        # Add a delay to avoid overwhelming the server
        time.sleep(2)

    except Exception as e:
        print(f"Error occurred: {str(e)}")
        break


# Save all products to a CSV file
save_to_csv(all_products)


# Identify the 5 highest-priced products
highest_priced_products = sorted(all_products, key=lambda x: x['price'], reverse=True)[:5]


print("\nFive highest-priced products:")
for product in highest_priced_products:
    print(product)


# Visit each product page and extract details
for product in highest_priced_products:
    description, sku = extract_product_details(product['product_url'])
    print(f"Product: {product['name']}, Description: {description}, SKU: {sku}")


# Calculate the total price of all products
total_sum = sum(product['price'] for product in all_products)


print("\nAll products:")
for product in all_products:
    print(product)


# Print the total sum of the product prices
print(f"\nTotal number of products: {len(all_products)}")
print(f"Total sum of product prices: ${total_sum}")

Here is what a successful response would look like.

$ python app.py
Scraping page 1...
Found 23 products on this page.
Total products so far: 23
Scraping page 2...
Found 34 products on this page.
Total products so far: 57
Saved 57 products to products.csv.

Five highest-priced products:
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie: Expecting value: line 1 column 1 (char 0)
Product: Marco Lightweight Active Hoodie, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie: Expecting value: line 1 column 1 (char 0)
Product: Marco Lightweight Active Hoodie, Description: None, SKU: None

All products:
{'name': 'Chaz Kangeroo Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie'}
{'name': 'Teton Pullover Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg', 'price': 70, 'product_url': 'https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie'}
{'name': 'Bruno Compete Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg', 'price': 63, 'product_url': 'https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie'}
{'name': 'Frankie  Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh04-green_main.jpg', 'price': 60, 'product_url': 'https://scrapingcourse.com/ecommerce/product/frankie--sweatshirt'}
{'name': 'Hollister Backyard Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh05-white_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hollister-backyard-sweatshirt'}
{'name': 'Stark Fundamental Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh06-blue_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/stark-fundamental-hoodie'}
{'name': 'Hero Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh07-gray_main.jpg', 'price': 54, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hero-hoodie'}
{'name': 'Oslo Trek Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh08-brown_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/oslo-trek-hoodie'}
{'name': 'Abominable Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh09-blue_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/abominable-hoodie'}
{'name': 'Mach Street Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh10-blue_main.jpg', 'price': 62, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mach-street-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hyperion-elements-jacket'}
{'name': 'Montana Wind Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj03-black_main.jpg', 'price': 49, 'product_url': 'https://scrapingcourse.com/ecommerce/product/montana-wind-jacket'}
{'name': 'Kenobi Trail Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj04-black_main.jpg', 'price': 47, 'product_url': 'https://scrapingcourse.com/ecommerce/product/kenobi-trail-jacket'}
{'name': 'Orion Two-Tone Fitted Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj07-red_main.jpg', 'price': 72, 'product_url': 'https://scrapingcourse.com/ecommerce/product/orion-two-tone-fitted-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}
{'name': 'Chaz Kangeroo Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie'}
{'name': 'Teton Pullover Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg', 'price': 70, 'product_url': 'https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie'}
{'name': 'Bruno Compete Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg', 'price': 63, 'product_url': 'https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie'}
{'name': 'Frankie  Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh04-green_main.jpg', 'price': 60, 'product_url': 'https://scrapingcourse.com/ecommerce/product/frankie--sweatshirt'}
{'name': 'Hollister Backyard Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh05-white_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hollister-backyard-sweatshirt'}
{'name': 'Stark Fundamental Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh06-blue_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/stark-fundamental-hoodie'}
{'name': 'Hero Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh07-gray_main.jpg', 'price': 54, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hero-hoodie'}
{'name': 'Oslo Trek Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh08-brown_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/oslo-trek-hoodie'}
{'name': 'Abominable Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh09-blue_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/abominable-hoodie'}
{'name': 'Mach Street Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh10-blue_main.jpg', 'price': 62, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mach-street-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hyperion-elements-jacket'}
{'name': 'Montana Wind Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj03-black_main.jpg', 'price': 49, 'product_url': 'https://scrapingcourse.com/ecommerce/product/montana-wind-jacket'}
{'name': 'Kenobi Trail Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj04-black_main.jpg', 'price': 47, 'product_url': 'https://scrapingcourse.com/ecommerce/product/kenobi-trail-jacket'}
{'name': 'Orion Two-Tone Fitted Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj07-red_main.jpg', 'price': 72, 'product_url': 'https://scrapingcourse.com/ecommerce/product/orion-two-tone-fitted-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hyperion-elements-jacket'}
{'name': 'Montana Wind Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj03-black_main.jpg', 'price': 49, 'product_url': 'https://scrapingcourse.com/ecommerce/product/montana-wind-jacket'}
{'name': 'Kenobi Trail Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj04-black_main.jpg', 'price': 47, 'product_uourse.com/ecommerce/product/kenobi-trail-jacket'}
{'name': 'Orion Two-Tone Fitted Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj07-red_main.jpg', 'price': 72, 'product_url': 'https://scrapingcourse.com/ecommerce/product/orion-two-tone-fitted-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}

Total number of products: 57
Total sum of product prices: $3492

$ python app.py
Scraping page 1...
Found 23 products on this page.
Total products so far: 23
Scraping page 2...
Found 34 products on this page.
Total products so far: 57
Saved 57 products to products.csv.

Five highest-priced products:
-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}   
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/lando-gym-jacket: Expecting value: line 1 column 1 (char 0)
Product: Lando Gym Jacket, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie: Expecting value: line 1 column 1 (char 0)
Product: Marco Lightweight Active Hoodie, Description: None, SKU: None
Error fetching product details from https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie: Expecting value: line 1 column 1 (char 0)
Product: Marco Lightweight Active Hoodie, Description: None, SKU: None

All products:
{'name': 'Chaz Kangeroo Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie'}
{'name': 'Teton Pullover Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg', 'price': 70, 'product_url': 'https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie'}
{'name': 'Bruno Compete Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg', 'price': 63, 'product_url': 'https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie'}
{'name': 'Frankie  Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh04-green_main.jpg', 'price': 60, 'product_url': 'https://scrapingcourse.com/ecommerce/product/frankie--sweatshirt'}
{'name': 'Hollister Backyard Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh05-white_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hollister-backyard-sweatshirt'}
{'name': 'Stark Fundamental Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh06-blue_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/stark-fundamental-hoodie'}
{'name': 'Hero Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh07-gray_main.jpg', 'price': 54, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hero-hoodie'}
{'name': 'Oslo Trek Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh08-brown_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/oslo-trek-hoodie'}
{'name': 'Abominable Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh09-blue_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/abominable-hoodie'}
{'name': 'Mach Street Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh10-blue_main.jpg', 'price': 62, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mach-street-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hyperion-elements-jacket'}
{'name': 'Montana Wind Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj03-black_main.jpg', 'price': 49, 'product_url': 'https://scrapingcourse.com/ecommerce/product/montana-wind-jacket'}
{'name': 'Kenobi Trail Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj04-black_main.jpg', 'price': 47, 'product_url': 'https://scrapingcourse.com/ecommerce/product/kenobi-trail-jacket'}
{'name': 'Orion Two-Tone Fitted Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj07-red_main.jpg', 'price': 72, 'product_url': 'https://scrapingcourse.com/ecommerce/product/orion-two-tone-fitted-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}
{'name': 'Chaz Kangeroo Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie'}
{'name': 'Teton Pullover Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg', 'price': 70, 'product_url': 'https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie'}
{'name': 'Bruno Compete Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh03-black_main.jpg', 'price': 63, 'product_url': 'https://scrapingcourse.com/ecommerce/product/bruno-compete-hoodie'}
{'name': 'Frankie  Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh04-green_main.jpg', 'price': 60, 'product_url': 'https://scrapingcourse.com/ecommerce/product/frankie--sweatshirt'}
{'name': 'Hollister Backyard Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh05-white_main.jpg', 'price': 52, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hollister-backyard-sweatshirt'}
{'name': 'Stark Fundamental Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh06-blue_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/stark-fundamental-hoodie'}
{'name': 'Hero Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh07-gray_main.jpg', 'price': 54, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hero-hoodie'}
{'name': 'Oslo Trek Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh08-brown_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/oslo-trek-hoodie'}
{'name': 'Abominable Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh09-blue_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/abominable-hoodie'}
{'name': 'Mach Street Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh10-blue_main.jpg', 'price': 62, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mach-street-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'product_url': 'https://scrapingcourse.com/ecommerce/product/hyperion-elements-jacket'}
{'name': 'Montana Wind Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj03-black_main.jpg', 'price': 49, 'product_url': 'https://scrapingcourse.com/ecommerce/product/montana-wind-jacket'}
{'name': 'Kenobi Trail Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj04-black_main.jpg', 'price': 47, 'product_url': 'https://scrapingcourse.com/ecommerce/product/kenobi-trail-jacket'}
{'name': 'Orion Two-Tone Fitted Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj07-red_main.jpg', 'price': 72, 'product_url': 'https://scrapingcourse.com/ecommerce/product/orion-two-tone-fitted-jacket'}
{'name': 'Lando Gym Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}
{'name': 'Grayson Crewneck Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh11-white_main.jpg', 'price': 64, 'product_url': 'https://scrapingcourse.com/ecommerce/product/grayson-crewneck-sweatshirt'}
{'name': 'Ajax Full-Zip Sweatshirt', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh12-green_main.jpg', 'price': 69, 'product_url': 'https://scrapingcourse.com/ecommerce/product/ajax-full-zip-sweatshirt'}
{'name': 'Marco Lightweight Active Hoodie', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh13-blue_main.jpg', 'price': 74, 'product_url': 'https://scrapingcourse.com/ecommerce/product/marco-lightweight-active-hoodie'}
{'name': 'Beaumont Summit Kit', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj01-yellow_main.jpg', 'price': 42, 'product_url': 'https://scrapingcourse.com/ecommerce/product/beaumont-summit-kit'}
{'name': 'Hyperion Elements Jacket', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj02-green_main.jpg', 'price': 51, 'prod://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj08-gray_main.jpg', 'price': 99, 'product_url': 'https://scrapingcourse.com/ecommerce/product/lando-gym-jacket'}
{'name': 'Taurus Elements Shell', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj09-yellow_main.jpg', 'price': 65, 'product_url': 'https://scrapingcourse.com/ecommerce/product/taurus-elements-shell'}
{'name': 'Mars HeatTech&trade; Pullover', 'image_link': 'https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mj10-red_main.jpg', 'price': 66, 'product_url': 'https://scrapingcourse.com/ecommerce/product/mars-heattech&trade;-pullover'}

Total number of products: 57
Total sum of product prices: $3492

Check out the complete codebase on GitHub.

Conclusion

In this tutorial, you learned how to scrape products from a webpage with infinite scrolling using the "Load More" button. By following the outlined steps, you can extract valuable product information and enhance your scraping techniques using ZenRows.
To know more about how you can use Zenrow web scraping tools, check out the following articles on our blog.

How to parse HTML with PHP
How to use Hrequests for Web Scraping
How to use playwright in Ruby Here’s a quick video on a no-code approach to using Zenrows Web scraping tools.

How to Integrate a Payment Gateway in an E-commerce Application

Mayowa Julius Ogungbola — Tue, 15 Oct 2024 12:33:57 +0000

Integrating a payment gateway in your checkout system allows your customers to input their payment details and securely finalize purchases with confidence. A reliable payment gateway helps build trust by safeguarding sensitive financial information through encryption and compliance standards.

By offering diverse payment options such as credit or debit cards, mobile money, mobile wallets, and bank transfers, you can improve the shopping experience and reduce cart abandonment by catering to your customer's preferences. Once a payment is processed, the system automatically confirms the order and generates receipts, assuring your customers that their transaction was completed successfully.

This guide will walk you through implementing a payment gateway in your checkout system using Flutterwave. Flutterwave’s platform supports multiple payment options, such as card payments, mobile money, and bank transfers. You also have access to advanced fraud detection and encryption to protect your business and customers.

By integrating Flutterwave, you can easily track your sales, offer a secure checkout experience, and boost overall performance by building customer confidence.

Prerequisites

Before you begin integrating the payment gateway, you should have the following:

Node.js Installed on your machine. You can download it here.
An active Flutterwave business account. If you don’t have one, you can sign up here.
You should also have a basic knowledge of JavaScript and React.

Choosing the Right Integration Method

Implementing a payment method incorrectly can render your transactions prone to failures and lead to issues like abandoned carts and a loss of customer trust, which can hurt your business.

On the other hand, choosing the right method based on your project requirements, complexity, and customization level helps you avoid these problems. There are three common approaches:

The HTML Checkout Method is a quick and simple way to integrate a payment gateway using pre-built components provided by the payment gateway. This involves embedding a ready-to-use checkout form or button into your website’s HTML code.
The Inline Integration Method can be used on the client side of your application, all you need to do is include a JavaScript script on your checkout page and write a callback on your payment button. When your customer clicks on the payment button and the payment is complete, they will then be redirected back to your app.
The Standard Integration Method offers you a more flexible control over your checkout form, allowing you to design an experience to match your brand and provide custom features. All you need to do is directly call API endpoints on your server-side app passing in the the necessary parameters as payloads. You will then get a response url to complete the payment, after which they will be redirected back to your application.
Integrating with SDKs allows you to streamline your payment process by utilizing pre-built frontend libraries, simplifying the handling of payment functionalities. By incorporating these front-end SDKs into your application, you can quickly implement payments, manage transactions, and handle callbacks with ease.

Setting up your Development Environment

In the next few steps, you’ll create a minimal checkout system, Integrating Flutterwave’s react SDK to handle customer payment.

Before you start implementing, let's set up your development environment.

Run the command on your preferred terminal to create a react app.
npx create-react-app checkout-app
Change to your newly created directory with the command.
cd checkout-app
Head over to your Flutterwave dashboard and navigate to the Setting > API key section to copy your API keys.
Create a .env file and add your test secret_key to the environment variable REACT_APP_FLW_SECRET_KEY.
Run the command npm i flutterwave-react-v3 to install the Flutterwave SDK.

Building the Pre-Checkout Page

Next, you’ll create a minimal pre-checkout page for your e-commerce application.

Create the App Function
Go to the src/App.js file and delete the page content. Paste the code below to import react, and the Flutterwave react methods flutterwaveButton and closePaymentModal.
Copy and add the code below into the file to create the APP function.

      import React, { useState } from 'react';
      import { flutterwaveButton, closePaymentModal } from 'flutterwave-react-v3';
      import './App.css';

      export default function App() {
      }

Adding Dummy Data
Create an object UserDetails inside the App() function to simulate the user’s information, and add a list of items to simulate the products in the customer’s cart. Ideally, this data would come from your commerce and user management system.

    export default function App() {
    // User dummy data  
    const userDetails = {
        name: 'John Doe',
        email: 'johndoe@gmail.com',
        phonenumber: '07059514549',
        address: "Somewhere on the planet",
        delivery: "Doorstep",
      };
      export default function App() {
      // User dummy data goes here
      // Dummy items the user is buying
      const items = [
        { id: 1, name: 'Laptop', price: 30000 },
        { id: 2, name: 'Smartphone', price: 20000 },
        { id: 3, name: 'Headphones', price: 25000 },
      ];
    }

    const totalAmount = items.reduce((sum, item) => sum + item.price, 0);

    }

Track Payment Status
Add the code below to your App.js to create a paymentCompleted state to keep track of the payment status and assign the initial state to false. The code below will also create a paymentResponse state to keep track of the paymentResponse and assign the initial value to null.

    export default function App() {  
    // userDetails object code goes here
    // array of items and totalAmount goes here

      const [paymentCompleted, setPaymentCompleted] = useState(false);
      const [paymentResponse, setPaymentResponse] = useState(null); 
    }

Configure the Flutterwave Payment
Copy the code below to add a configuration object to initiate the Flutterwave package.

    export default function App() {
    // dummy data code goes here
    // paymentCompleted and paymentResponse code goes here

    const config = {
        public_key: process.env.REACT_APP_FLW_SECRET_KEY,
        tx_ref: Date.now(),
        amount: totalAmount,
        currency: 'NGN',
        payment_options: 'card,mobilemoney,ussd',
        customer: {
          email: userDetails.email,
          phone_number: userDetails.phonenumber,
          name: userDetails.name,
        },
        customizations: {
          title: 'My store',
          description: 'Payment for items in cart',
          logo: '', // Add a logo URL if you have one
        },
      }; 
    };

Configure the Flutterwave Payment Button
Now that you've set up the payment configuration, the next step is to use FlutterwaveButton to trigger the payment process. You'll define a fxConfig object in your App() component that includes properties like the button text, a callback function to handle the payment response, and conditional rendering based on the payment status.


  export default function App() {
  // Confg code goes here

  const fwConfig = {
    ...config,
    text: 'Checkout',
    callback: (response) => {
      console.log(response);
      setPaymentCompleted(true); // Set the payment as completed
      setPaymentResponse(response); // Store the response to display it on the receipt
      closePaymentModal(); // Close the modal programmatically
    },
    onClose: () => {},
  };
  }

Conditional Rendering
Now, you need to show different content to the customer based on whether the payment is completed or not. Initially, the customer will see the pre-checkout details (order summary and user information). After payment, they will be shown a receipt.
Update your App() component with the code below.

    export default function App() {

    // fwConfig object goes here

    return (
      <div className="App">
        {paymentCompleted ? (
          // Show receipt when payment is completed
          <div>
            <h1>Payment Complete</h1>
            <p>Thank you for your payment, {userDetails.name}!</p>
            <p>Transaction Reference: {paymentResponse?.tx_ref}</p>
            <p>Total Amount Paid: ₦{totalAmount}</p>
            <p>Items Purchased:</p>
            <ul>
              {items.map((item) => (
                <li key={item.id}>
                  {item.name}: ₦{item.price}
                </li>
              ))}
            </ul>
            <p>A receipt has been sent to your email: {userDetails.email}</p>
          </div>
        ) : (
          // Show order confirmation and payment button before payment
          <>
            <h1>Order Confirmation</h1>

            {/* Display the items the user is purchasing */}
            <div>
              <h3>Items in your cart:</h3>
              <ul>
                {items.map((item) => (
                  <li key={item.id}>
                    {item.name}: ₦{item.price}
                  </li>
                ))}
              </ul>
              <h3>Total: ₦{totalAmount}</h3>
            </div>

            {/* Display user details */}
            <div>
              <h3>User Information</h3>
              <p>Name: {userDetails.name}</p>
              <p>Email: {userDetails.email}</p>
              <p>Phone: {userDetails.phonenumber}</p>
              <p>Address: {userDetails.address}</p>
              <p>Method of delivery: {userDetails.delivery}</p>
            </div>

            {/* flutterwave payment button */}
            <FlutterwaveButton {...fwConfig} />
          </>
        )}
      </div>
    );
    };

Here is what it should look like after you’ve completed the App.js page.

Styling your App
Head over to your App.css file and replace the entire file with the code below to add a css styling to your checkout application.


    .App {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      background-color: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    h1, h3 {
      color: #333;
      text-align: center;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      background-color: #fff;
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    h3 {
      font-size: 1.2em;
      margin-top: 20px;
      color: #007bff;
      text-align: right;
    }
    div.user-info {
      background-color: #eef;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
    }
    .user-info p {
      margin: 5px 0;
      color: #555;
    }

    button {
      display: block;
      width: 100%;
      background-color: #28a745;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 1.1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #218838;
    }
    div.receipt {
      padding: 20px;
      background-color: #e9ffe9;
      border: 2px solid #28a745;
      border-radius: 5px;
    }
    .receipt p {
      color: #333;
    }
    .receipt ul {
      border-top: 1px solid #28a745;
      padding-top: 10px;
    }
    .receipt li {
      font-size: 1em;
    }

To start your react application, run the command.
npm start

You’ll be redirected to your browser with the URL http://localhost:3000.

Checking Out

In your browser, you should see the following screen.

When you click on the Checkout button to initiate the payment process, you will be redirected to the Flutterwave payment interface, as shown in the image below.

This page gives the customer the option to use different payment methods like card, USSD, bank or bank transfer. Here are some dummy data you can use to simulate a successful card and bank payment.

    # Successful Card Payment 
    Mastercard:{
    card_number: 5531886652142950,
    expiry: 09/32
    cvv: 564
    otp: 12345
    pin: 3310 
    }

    # Bank Transfer
    {
    bank: Access Bank (440)
    account_number: 0690000031
    otp: 123456
    }

After a successful payment, you’ll get a response from Flutterwave that looks like this on your developer console in your browser.

    {status: 'successful', customer: {…}, transaction_id: 6713260, tx_ref: 1726799191947, flw_ref: '1726799239531-FLW-MOCK-REF', …}
                amount: 75000
                charge_response_code: "00"
                charge_response_message: "Pending validation"
                charged_amount: 75000
                created_at: "2024-09-20T02:27:19.000Z"
                currency: "NGN"
                customer: {name: 'John Doe', email: 'johndoe@gmail.com', phone_number: '07059514549'}
                flw_ref: "1726799239531-FLW-MOCK-REF"
                redirectstatus: undefined
                status: "successful"
                transaction_id: 6713260
                tx_ref: 1726799191947

Flutterwave will redirect your customer back to your application where they can confirm the payment has been made, like in the image below.

Wrapping Up

Having completed the steps in this tutorial, you’ve learned how to implement Flutterwave’s payment gateway in a React-based e-commerce app, providing support for multiple payment methods and currencies.

In a production-ready workflow, it's important to verify each transaction before issuing any value to ensure that the payment was successful and legitimate. Flutterwave employs multiple fraud detection mechanisms, like advanced security protocols and 3D secure authentication, to further secure your transactions. By incorporating these practices, you can enhance the security and reliability of your payment process.

Check out the full project on GitHub. Additional payment integration methods can be found in the Flutterwave documentation:

Transaction Verification in Fintech Applications: A Step-By-Step Guide

Mayowa Julius Ogungbola — Tue, 17 Sep 2024 17:33:45 +0000

Setting up a basic transaction system for payments and transfers is usually the first step in building a fintech app in Nigeria. But as your platform scales, risks like increased fraud, contradictions in transaction data, customer disputes, and unnoticed failed transactions become major concerns. Add that to regulatory non-compliance and cross-border transaction challenges, and you’re facing potential revenue loss and loss of customer trust.

These issues generally pose a great threat, so you need a reliable transaction verification system to address them. This will ensure every transaction is legitimate, minimize fraud, and keep your platform compliant, all while protecting customer confidence.

This guide will show you how to implement transaction verification in your fintech app, giving you the tools to manage risks and scale securely.

Risks of Not Implementing Transaction Verification

When a fintech application is built without transaction verification, several risks can emerge:

Contradictions in Transaction Data: When your application runs a bulk load of transactions, errors like sending an incorrect amount or currency or even making a duplicate charge can occur. When these issues happen, and the transactions aren’t being verified, they result in financial inconsistencies that become difficult to trace.
Customer Disputes: Unverified transactions often lead to customer issues, including disputes over incorrect charges or failed payments. These disputes can harm your reputation and frustrate users.
Regulatory Non-compliance: Many financial regulations require proper transaction validation to protect customers against fraud and maintain data integrity. For example, In Nigeria, the Central Bank of Nigeria (CBN) has established strict guidelines, such as the Anti-Money Laundering (AML) Act, to ensure continuous monitoring of your fintech platform by implementing measures like transaction verification. Failing to comply with these regulations can result in legal issues and costly penalties against your platform.
Unnoticed Failed Transactions: Without a means of verifying transaction status, failed or incomplete transactions may go unnoticed. This tends to disrupt your services, causing your customers to lose confidence in the reliability of your platform.
Loss of Customer Trust: While your customers expect secure and reliable transactions, failing to implement verification can erode their confidence and trust and affect your platform’s reputation.
Revenue Loss: When errors like incorrect charges, fraudulent transfers, or chargebacks happen, they lead to significant financial losses and directly affect your business’s bottom line.
Challenges with Cross-border Transactions: When verifying cross-border transactions, the situation becomes complex due to varying regulations, currency exchanges, and inter-banking systems. Each country has its own financial laws, which must be followed during transactions. When exchange rates fluctuate, inter-bank transfers are delayed or even declined, which will, in turn, complicate the verification process. In this case, implementing a transaction verification system helps avoid costly errors and maintain the integrity of cross-border payments while minimizing fraud and unauthorized transfers.
Increased Fraud Risk: Without implementing a transaction verification process, fraudulent transactions can slip through unnoticed, leading to unauthorized charges and exposing your platform to security breaches.

Steps to Solving These Challenges

By integrating advanced technology with compliance measures, you can overcome the risks and consequences of running your fintech app without transaction verification. Flutterwave provides you with a unified system to manage varying regulations, including Know Your Customer (KYC) and Anti-Money Laundering requirements across multiple countries. By using automated compliance checks and real-time transaction monitoring, Flutterwave ensures you stay compliant with local financial laws while reducing the risk of costly errors and fraud.

Key Stakeholders You Need to Verify Transactions

Transaction verification involves a network of stakeholders, such as banks, payment gateways, regulatory bodies, and merchants. Each plays a crucial role in ensuring the integrity and security of financial transactions.

Banks: Banks are responsible for managing customers' accounts, authorizing transactions, and ensuring compliance with financial regulations. Banks validate transaction details, verify account information, and may also flag suspicious activities if necessary.
Payment Gateways: They act as intermediaries between merchants and banks, facilitating the secure transfer of transaction data. They encrypt sensitive information, such as credit card details, to protect it from unauthorized access. Payment gateways also handle the initial authorization process and provide merchants with the necessary tools to manage payments.
Regulatory Bodies: Regulatory bodies establish and enforce standards and regulations for handling financial transactions. They ensure that all stakeholders comply with legal requirements related to data privacy, anti-money laundering, and fraud prevention.
Merchants: They are responsible for implementing secure payment systems and ensuring that transaction data is handled responsibly. They work closely with payment gateways and banks to facilitate smooth and secure transactions.

How to Verify Transactions with Flutterwave

Login to your Flutterwave dashboard
Navigate to Settings, and head over to your API keys section to get your public and secret keys. Copy the keys and store them in your .env file.

After every completed transaction, you will send a GET request with your public and secret keys to the URL https://api.flutterwave.com/v3/transactions/<id>/verify passing in your transaction <id> with the actual transaction ID.

An example of an HTTP request would look like this in


    const axios = require('axios');

    // Define the transaction ID, expected amount, and expected currency
    const transactionId = '123456789'; // Replace with the actual transaction ID
    const expectedAmount = 1000; // Replace with the expected amount
    const expectedCurrency = 'NGN'; // Replace with the expected currency

    // Flutterwave API URL for transaction verification
    const url = `https://api.flutterwave.com/v3/transactions/${transactionId}/verify`;

    // Make the HTTP GET request to verify the transaction
    axios.get(url, {
        headers: {
            Authorization: `Bearer ${process.env.FLW_SECRET_KEY}` // Replace with your Flutterwave secret key
        }
    })
    .then(response => {
        const transaction = response.data.data;
        if (
            transaction.status === 'successful' &&
            transaction.amount === expectedAmount &&
            transaction.currency === expectedCurrency
        ) {
            // Success! Confirm the customer's payment
            console.log('Payment verified successfully!');
        } else {
            // Inform the customer their payment was unsuccessful
            console.log('Payment verification failed.');
        }
    })
    .catch(error => {
        console.error('Error verifying transaction:', error);
    });

Here’s an example using Flutterwave’s Node.js SDK:

    // Install with: npm i flutterwave-node-v3

    const Flutterwave = require('flutterwave-node-v3');
    const flw = new Flutterwave(process.env.FLW_PUBLIC_KEY, process.env.FLW_SECRET_KEY);
    flw.Transaction.verify({ id: transactionId })
        .then((response) => {
            if (
                response.data.status === "successful"
                && response.data.amount === expectedAmount
                && response.data.currency === expectedCurrency) {
                // Success! Confirm the customer's payment
            } else {
                // Inform the customer their payment was unsuccessful
            }
        })
        .catch(console.log);

You will get a response that returns Flutterwave's version of the completed transaction, which will either be successful or failed. You will then compare with your own record to verify all the information from the transaction.

An example response would look like this:

    # Success
    {
    "status": "success",
    "message": "Transaction fetched successfully",
    "data": {
        "id": 1163068,
        "tx_ref": "akhlm-pstmn-blkchrge-xx6",
        "flw_ref": "FLW-M03K-02c21a8095c7e064b8b9714db834080b",
        "device_fingerprint": "N/A",
        "amount": 3000,
        "currency": "NGN",
        "charged_amount": 3000,
        "app_fee": 1000,
        "merchant_fee": 0,
        "processor_response": "Approved",
        "auth_model": "noauth",
        "ip": "pstmn",
        "narration": "Kendrick Graham",
        "status": "successful",
        "payment_type": "card",
        "created_at": "2020-03-11T19:22:07.000Z",
        "account_id": 73362,
        "amount_settled": 2000,
        "card": {
        "first_6digits": "553188",
        "last_4digits": "2950",
        "issuer": " CREDIT",
        "country": "NIGERIA NG",
        "type": "MASTERCARD",
        "token": "flw-t1nf-f9b3bf384cd30d6fca42b6df9d27bd2f-m03k",
        "expiry": "09/22"
        },
        "customer": {
        "id": 252759,
        "name": "Kendrick Graham",
        "phone_number": "0813XXXXXXX",
        "email": "user@example.com",
        "created_at": "2020-01-15T13:26:24.000Z"
        }
    }
    }

While a failed request would look like this:

    #Transaction not found
    {
    "status": "error",
    "message": "No transaction was found for this id",
    "data": null
    }

After getting the response, you can check the transaction's success status and other details, like currency and amount and customer data, to ensure they match. If they match, you can credit or debit your customer.

When building the verification functionality into your application, you should also follow best practices for storing your key variables, such as, using a .env file or exporting from your terminal. Check out Flutterwave best practices for more tips.

Wrapping Up

Verifying transactions on your fintech application has proven to be important and beneficial in so many ways. It ensures the accuracy of payments on your platform and strengthens user trust by verifying sensitive financial data. In the bigger picture, you can protect your platform and its users from potential fraud and security breaches.

Now that you know why it is important to verify transactions and how to integrate them on your platform, you can confidently and positively answer the question, “Are your transaction services secure and accurate?”

Check out the resources below for more information:

A Developer’s Guide to Verifying Customer Financial Data in Nigeria

Mayowa Julius Ogungbola — Mon, 09 Sep 2024 10:02:40 +0000

One of the most essential considerations when building a successful fintech application in Nigeria is proof of customer identity. As a developer, small business or large enterprise, integrating this feature is crucial to ensuring the legitimacy of your users. It is often referred to as a Know Your Customer (KYC) process and requires some financial data, like Bank account details and Card Bank Identification Number (BIN).

This guide will walk you through integrating KYC into your application to verify your users’ financial data using Flutterwave verification service.

Requirements for Verification Process

Having a KYC process in place is a key driver behind the growth of any digital financial service in Nigeria. This process is essential to expanding access to financial services and allowing fintech companies to safely onboard more users without going through the in-person banking system.

To begin a KYC process, your users must submit certain financial information, such as their card BIN for card transactions, bank account details for bank transactions, or BVN number for customer validation.

Before making any requests to verify your customers’ financial data, you must first sign up for an account on Flutterwave. You will then need to generate a public and secret key from the API section under your Settings menu.

It’s important to secure this information during this development process, using environment variables and hashing to prevent the exposure of important customer data and secure their trust.
Once you have a secure means of handling your users’ data, you can begin verifying users with Flutterwave services, the next section will explain how to do so for different financial data.

Types of Fintech Verification

Using the Flutterwave verification service helps ensure your users are who they claim to be, which in turn helps you prevent fraudulent individuals and comply with regulatory requirements.

With Flutterwave’s API services, you can verify a user’s financial data by making requests directly to their server or using available backend SDKs. Below are key validation types to consider:

Card BIN verification
Bank verification
BVN verification

Card BIN Verification: This information should be validated before a user makes a card transaction. After your user signs up for the application, you can request that they submit their card BIN as part of the KYC process for allowing them to access card transactions on your app. Validating a user’s BIN helps you identify the bank name, location, and card type.

Bank Account: This process will require sending a user's account number and bank code using the resolve account detail endpoint or any available Backend SDKs.
You can make this check every time a user enters a bank detail to
make a transfer. It doesn't have to be a standalone component since you can tether the request to every transaction process.

BVN Verification: This part of the process would require you to send a request, including parsing in a BVN, in which you’ll be sending in a request, along with their firstname, lastname, and redirect_url. This can be done after a user signs up on your application.
Making this check the foremost information to validate before allowing your users to begin making transactions on your app. To learn more about this process, you can check the BVN verification guide.

How to Verify Customers

Once you have your API keys from your Flutterwave dashboard, you can request to verify your user data either by making an HTTPS request or using the Flutterwave backend SDK.

BIN Verification
To verify a user’s card BIN, you must send a get request with the URL https://api.flutterwave.com/v3/card-bins/:bin, putting in the customer’s BIN. Here is an example javascript snippet:

    // Install and import axios
    const axios = require('axios');

    // Define the user's card number
    const cardNumber = '<BIN-number>';
    const cardBin = cardNumber.substring(0, 6); // Extract the first 6 digits (BIN)

    // Flutterwave API URL
    const url = `https://api.flutterwave.com/v3/card-bins/${cardBin}`;

    // Make the HTTP GET request to verify the card BIN
    axios.get(url, {
        headers: {
            Authorization: `Bearer ${process.env.FLW_SECRET_KEY}` // Replace with your Flutterwave secret key
        }
    })
    .then(response => {
        console.log('Card BIN details:', response.data);
    })
    .catch(error => {
        console.error('Error verifying card BIN:', error);
    });

In curl:

    curl --request GET 'https://api.flutterwave.com/v3/card-bins/553188' \
      --header 'Authorization: Bearer YOUR SECRET_KEY'

Here is an example snippet you’ll need to verify a BIN using the Javascript SDK:

    // Import the Flutterwave SDK
    const Flutterwave = require('flutterwave-node-v3');

    // Export your API variables
    const flw = new Flutterwave(process.env.FLW_PUBLIC_KEY, process.env.FLW_SECRET_KEY);

    // Define the card number
    const cardNumber = '<users-card-number>';
    const cardBin = cardNumber.substring(0, 6);

    // Resolve card BIN
    const resolveCardBin = async (cardBin) => {
        try {
            const response = await flw.Misc.cardBin({ bin: cardBin });
            console.log(response);
        } catch (error) {
            console.error(error);
        }
    };

    // Call the function
    resolveCardBin(cardBin);

You will get a response similar to the one below:

    # Valid BIN
    {
      "status": "success",
      "message": "completed",
      "data": {
        "issuing_country": "NIGERIA NG",
        "bin": "553188",
        "card_type": "MASTERCARD",
        "issuer_info": " CREDIT"
      }
    }

    # Invalid BIN
    {
      "status": "error",
      "message": "completed",
      "data": {
        "nigerian_card": false,
        "response_code": "RR",
        "response_message": "BIN not Found",
        "transaction_reference": "FLW1590500367800"
      }
    }

Bank Account Verification
To verify a user’s bank account, you’ll need to send the account number and bank code as a payload to the request: https://api.flutterwave.com/v3/accounts/resolve. You will also need your public key and secret key, which are stored and exported from your .env file. Here is an example of what a Javascript request would look like:

    // Javascript
    // Install and import axios
    const axios = require('axios');

    // Define the account details
    const details = {
      account_number: "0690000032",
      account_bank: "044"
    };

    // Flutterwave API URL for account resolution
    const url = 'https://api.flutterwave.com/v3/accounts/resolve';

    // Make the HTTP POST request to resolve the account
    axios.post(url, details, {
        headers: {
            Authorization: `Bearer ${process.env.FLW_SECRET_KEY}`, // Replace with your Flutterwave secret key
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        console.log('Account resolution response:', response.data);
    })
    .catch(error => {
        console.error('Error resolving account:', error);
    });

In curl:

    curl --request POST 'https://api.flutterwave.com/v3/accounts/resolve' \
      --header 'Authorization: Bearer YOUR_SECRET_KEY'\
      --header 'Content-Type: application/json'\
      --data-raw '{
        "account_number": "0690000032",
        "account_bank": "044"
    }'

If you prefer to use Flutterwave’s backend SDK, you will need your public_key and your secret_key. Here is an example using the Node.js SDK:


    // Install with: npm i flutterwave-node-v3

    const Flutterwave = require('flutterwave-node-v3');
    const flw = new Flutterwave(process.env.FLW_PUBLIC_KEY, process.env.FLW_SECRET_KEY);
    const details = {
      account_number: "0690000032",
      account_bank: "044"
    };
    flw.Misc.verify_Account(details)
      .then(response => console.log(response));

You will get a response similar to the ones below:

    # Valid account
    {
        "status": "success",
        "message": "Account details fetched",
        "data": {
          "account_number": "0690000032",
          "account_name": "Pastor Bright"
        }
    }

    # Invalid account
    {
      "status": "error",
      "message": "Sorry, that account number is invalid, please check and try again",
      "data": null
    }

Handling Sensitive Data

Certain considerations, like how and when to make these requests, must be taken into account as a precaution and to have an extra layer of security.

When building your application, the verification algorithm for any information should be written on the server side, it must be done on the backend.
You must ensure the use of the environment variables to store your public, secret, and encryption keys.
Enable proper error handlers to catch and log error messages when they occur. It keep your verification process audited, it helps alert your users on caution to take and next steps.
Ensure your generated keys are not hardcoded on your server-side application.
For transaction verifications, you can implement your algorithm to fire up every time a user makes a transfer transaction.
For Card BIN verification, a customer’s card must be verified before approving the first card transaction.
For Bank account verification, you should also run this check before a customer makes the first bank transaction.

By carefully implementing these precautions, you can enhance the security of your application and ensure that sensitive data is handled with the utmost care, protecting your users while dealing with their financial data.

Wrapping Up

Flutterwave offers a wide range of fintech services, with user verification being an important component of secure user experiences. We discussed these verification services, and with them, developers can effectively validate users' financial data, such as bank accounts, card BINs, and transaction details.

Contact Flutterwave support to get started on your setup. Join the developer community to interact with other developers who are building secure financial services.

For a more in-depth read on this subject, check out the developer documentation:

The Basic Solidity Guide

Mayowa Julius Ogungbola — Sat, 25 Jun 2022 02:06:21 +0000

Introduction

As a web developer venturing into learning new languages is only a necessity, and one of the key features that make up a developer.
deeming the rise of the new iteration of the internet (web 3), solidity has proven to be one of the primary and essential tools for developers transitioning into the space of web3.
In this tutorial You'll learn all the fundamentals to get you started with understanding the basics of solidity, You'll be able to read smart contracts and make reasonable analyses of what's going on 🤔?

Solidity and Smart Contract

When transitioning into a new language, it is only logical to assume that you must have made all necessary research as to what and how a language scales in the real world, and also the kind of problem they solve.
This tutorial is not aimed to make you an expert, but rather to give you a clearer picture of the basics of Solidity and get you started with the real-world practice... A quick recap

What is Solidity

Solidity is an object-oriented programming language used to build smart contracts that run on the Ethereum blockchain.

For a better recommendation for mastery, check out the Solidity Documentation that stands as a sure guide over your course of learning.

What is a Smart Contracts

The smart contract is a set of computational instructions executing transaction protocols that are deployed on a decentralized blockchain like (Ethereum)...
they are immutable or incredibly hard to change once deployed due to consensus and
they are automatically executed

Getting Started

Unlike other languages, you can always specify the version of solidity you want to use with a line of code, which you'll see often beginning with every smart contract

pragma solidity <version number>;

Where the version number is the specific version of solidity you want to compile your code.

Note: If you don't want to use a specific version, you can specify a minimum version number by adding the caret (^).

For example, the code below means the smart contract can compile with the solidity version 0.8.0 and above,

pragma solidity ^0.8.0;

but without the caret (^) sign, it uses the 0.8.0 specifically.

pragma solidity 0.8.0;

Initializing the smart contract

Every smart contract begins by defining the contract with the keyword contract or library followed by the name of the contract which can be anything.

contract  <ContractName> {
}

For Example:

contract  FirstContract {
}

Any code written in the brackets above will be the context of the contract FirstContract.

Libraries library: are similar to contracts, but only you cannot declare any state or send ether transactions. Libraries are embedded into the contracts, only if all the library functions are internal. They help to add more functionalities to different values.
They are created just like contracts but with the keyword library.

library  <ContractName> {
}

For Example:

library  AnotherContract {
}

Types and Variable Declaration

Just like every other programming language, Solidity also supports primitive data types as such:
uint int address booleans bytes,
just like other languages, they are used to define variables.
The format of which variables are declared in solidity is

<type> <variable name> = <value>;

when you initialize a variable without adding a value the, its value is automatically assigned as 0;

Unsigned integeruint: Similarly to the unsigned data types in SQL they carry only positive numbers.

uint linesOfCodeWritten = <positive numbers>

this means that the variable linesOfCodeWritten can only be assigned a positive value.
For example:

uint256 linesOfCodeWritten = 150

when using the uint type, you can also declare a specific byte range if you're certain about its value size, an example: uint8 for 8 bytes or uint32 for 32 bytes,
but without specification, it'll automatically be declared as uint256.

Integers int: They are the opposite of uint because they carry signed integers which include positive and negative numbers, but similarly to the uint they are be prespecified in size, int16 for 16 bytes or int64 for 64 bytes

int codeLineAdded  = 10
// unsigned integer

and will also be automatically declared as int256 when size is not specified.

int codeLineRemoved  = -10
// signed integer

Boolean bool: They simple define the type true or false.

bool  hasWrittenCode = <true> or <false>

which means the variable hasWrittenCode is defined as a boolean that can either be assigned the value true
or false.

*Address *address: These are special 20byte types in the format: 0xAb098b54332Ae1Fd23Bf0e7ac83aADD123456789
used to interact with the blockchain, and are declared with the keyword address.

Strings string: They are used to define words or phrases, using the string keyword and adding quotes around its value.

string yearsOfWorking = "fifteen";

Bytes bytes: These are special types, they are similar to strings since they are also used to store text types and are used the same way, but they also allow you to prespecify their size.
byte4 for 4 bytes or byte32 for 32 bytes string.

bytes32 name = "Phensic"

their maximum and default byte size is byte32

Comments are any kind of primitive type but cannot be executed or compiled as codes. Single line comments are written by adding // at the beginning of the line, while multiline comments are written as{/* code here */}.

// single line comment 
{/* 
code line here 
code line here 
code line here 
*/}

Basic Functions

Functions in Solidity, like every other language are self contained modules that execute a subnet of code or instructions when they are called. Using the keyword function in the format:

function <function name>(<variable1>, <variable2>) public returns (<output type>) {
<subnet of code instructions>
}

To create a function using the format above, that modify the uint variable linesOfCodeWritten after adding and removing a few lines of code.

function codeEddited (uint256 _codeAddded, int _codeRemoved) public {
uint newLineOfCode = linesOfCodeWritten  + _codeAdded - _codeRemoved 
}

the returns keyword in the format is not compulsory when creating a function, but is used to predefine the type of output expected to be returned from the function.

Visibility Specifier

Unlike the returns keyword, the visibility specifiers like public are compulsorily added and are used to determine where a function can be called and accessible.

Public public: means the function can be accessed outside the current contract. When used, it creates a getter function or a state variable.

function yourName public () {
string name = "Phensic"
}

the public function above can be called outside the contract and will return the value of the variable name
denied in the function.

Private private: When used? they can only be accessible inside the contract, and they can be used to declare a variable or function.

External external: They are only visible and accessible externally and can only be used for function.

Internally internal: They are only visible and accessible internally.

Note: the underscore (_) is usually added as a naming convention for creating function variables.

Mapping Function

Mapping is a data structure that has keys mapped to a single variable. They are special types of functions similar to dictionaries because can they assign variables to values by looping through an array.
using the keyword mapping in the format:

mapping (<from type> => <to type>) public <function name>{
}

The mapping function nameToAge:

mapping (string => uint256) public nameToAge{
}

created can be used to map a set of string variable types to a set of uint256 variable types.

And to use the function, you can call the nameToAge mapping function like this:

function addPerson(string memory _name, uint256 _age) public{ 
      people.push(People(_age, _name));
      nameToAge[_name] = _age;
}

the new public function addPerson uses the mappping function nameToAge to loop through the people array and map the variable _name to the variable _age.

Note: Functions created using the keyword view or pure, simply means they disallow you to modify the state of the function, but you can only read their states from the blockchain.

Arrays & Structs

Structs in Solidity are used for creating new types by adding the keyword struct before the name of the type you want to create.

struct <type name> {
<variable1> ;
<variable2>;
}

struct People {
uint256 age;
string name;
}

the struct keyword Is used to create a new type People that has two variables names, age and name in the code above.

People public person({
age: 20
name: Phensic
});

the code above creates a new variable person with the type People:

Arrays takes the use of a struct farther by using it to create a list of objects in the same format used to create the person variable but adding a square bracket after the type name [] to declare the array;

People[] public allpeople

To reset an array of objects.

people = new People[] {0};

Dynamic and Fixed arrays:

Dynamic arrays are declared by default without adding an integer in the bracket, which means you can add as many lists as you want.

Fixed arrays are declared by adding an integer in the bracket, which means you cannot exceed a specific number of a list-objects.

Writing a function that adds to an existing array of type Peoplewould look like:

function newPerson(string memory _name, uint256 _age) public {  
people.push(People(_age, _name)); 
}

Memory Calldata and Storage

If you've noticed the keyword memory used in a few functions earlier, they are keywords used to declare where and how a variable should be stored in solidity.
There are 6 storage specifiers, stack, memory, storage, calldata, code log.

Memory memory: is used to declare temporary variables that can be modified, which means they will only exist during the time of the transaction.
For example:

function newPerson(string memory _name) public {  
string yourName = _name
}

the variable _name declared as a string with the memory keyword means that it will only exist in storage at the time of a transaction.

Calldata calldata: are used to declare temporary variables that cannot be modified, they are like constants but are also temporary since they only exist at the time of the transaction.

string name = "Julius"
function newPerson(string calldata _name = "Phensic") public {  
_name = "Julius"
}

the code above will give an error because you cannot modify a variable stored in thecalldata.

Storage storage: all variables declared by default are stored in the storage, they are permanent (can exist even after the transaction time), and can be modified.

Note: you cannot define variable storage with the stack, code, or log.

Solidity Loops

For Loops lopping in solidity is quite similar to other languages. Looping through an array or a list in solidity uses the for keyword in the following the format:

for (<starting index>; <ending index>; <step amount>) {
// code to execute on the index
}

uint256 finalIndex = 10
for (uint256 firstIndex = 0; firstIndex < finalIndex; firstIndex++) {
// code to execute on the index
}

The for loop above starts a loop from the value of firstIndex (0) and runs any code in the execution space {} as long as the firstIndex (0) is less than the value of finalIndex (10), and increases the value of firstIndex, till it is no longer less than the finalIndex (10).

Require require: the require keyword in solidity work similarly to if-else stataments in other languages, using the format:

bool isOldEnough = true;
require(<if statment>, <else-statement>)

the require keyword creates an if-else-like scenario, where if the first expression before the comma does not hold true, the statement after the comma is returned.

bool isOldEnough = true;
require(isOldEnough, "Sorry! you're not old enough.");

In the require statement above since the variable isOldEnough equals true, the statement after the comma will not be returned.

In other words the sentence "Sorry! you're not old enough." will only be returned if the expression before the comma holds false.

Composability and Smart Contracts Interactions

Composability
When working with a large-scale project that requires using more than one contract or ledger for transactions. In solidity, contracts can interact with other contracts, the same way you can import modules in javascript or python, etc. the process is called Composability.

You can either decide to write a multi-contract file, with more than one contract on one page.

pragma solidity ^0.8.0;

ledger SimpleCurrencyConversion{
// contract about currency conversion
}

contract TransactionHistory {
// contract about transaction history
}

contract usersDetails {
TransactionHistory public transactions;

function createNewTransactionHistory() public {
        transactions = new TranactionHistory();
}

In the contract file above, the userDetails contact is deploying a new TransactionHistory contract.

Here, the 3 contracts above can be composed together by calling functions from one contract into the other.

This means that a simple solidity file can hold more than one contract.

Another more flexible way to interact with other contracts, without having too many lines of code, which is not good practice is using the import keyword.
Similarly to other languages, you can import other contracts from different files using the format:

import <solidity file path>

From the multi-contract file earlier, if each contract and ledger had its own files you can import them like this:

pragma solidity ^0.8.0;

import "SimpleCorrencyConversion.sol";
import "TransactionHistory.sol";
contract usersDetails {
}

if the current contract file was the userDetails file, you would be able to import the other contract file like in the code above.

Smart Contract Interaction
In order to be able to make interactions with other contracts, like calling functions and variables defined in other contracts files. To make this interaction, you'll need to get the contracts -Application Binary Interface- ABI and the contract's address, where the contract is deployed to.

Note:
Although they are usually added automatically after importing the outer function above the bae contract.
The ABI of the contracts defines how the base contract can interact with the other outer contracts, they contain information like the outer contract's byte code, the functions, and the variable declared in the contract.

inheritance & Overrides

When interacting with functions and variables in other contracts, solidity also supports inheritance, which means you can modify the use of a function from a child contract created in the parent contract.

Parent Contract:

pragma solidity ^0.8.0;


contract TransactionHistory{
uint256 usersAge = 20

function store (uint _addedAge) public virtual{
    usersAge  =  _addedAge; 
    } 
}

In the parent contract, the store function simply changes the value of the variable userAge.

The virtual keyword tells solidity that the store function can be modified in any child contract

Child Contract:

pragma solidity ^0.8.0;
import "TransactionHistory.sol"

contract UserDetails is TransactionHistory{
function store (uint256 _yearsPast) public override {
     usersAge  =  usersAge + _yearsPast; 
    }
}

The is enables the current UserDetails contract to inherit all the functionalities of Transaction contract.

The override enables the function to rewrite the use of the store function from the parent contract.

Sending Funds In Smart Contract

When making transactions that involve sending tokens, they require creating a function with the keyword payable in the format:

function <function name> public payable {
}

When using a payable function, you get access to certain global keywords that handles payments msg. For example, you can set a value to send as msg.value.
To get the address of the sender: msg.sender.
To transfer funds in contracts:

payable(msg.sender).transfer(<address>(this).<amount>);

the transaction above will semple be reverted if it does not go through and there was an error.
Other ways of smart funding contracts are:
Using the send keyword, which will only return a boolean of true or false if the transaction was success or not.

bool sendSuccess = payable(msg.sender).send(<address>(this).<amount>);
require(sendSuccess, "Send failed");

And the call keyword is a rather lower-level command or sending fund, and can also be used to call any function in Ethereum. Using the call keyword in a format similar to the format.

(<boolean variable>, <byte variable>) = payable(msg.sender).call{value: <address>(this).<amount>}("");

(bool isSuccess, byte details) = payable(msg.sender).call{value: <address>(this).balance}("");

the two variable declared at the beginning of the function is returned by default when using the call keyword.
Therefore the bool variable is declared the store the returned boolean of if successful and if not.
And the byte variable also stores the information about the transaction.

Check out other features of payable functions, how to make a payable transactions with the .msg keyword, and other transactions on contracts.

Interfaces & package management

Interfaces are basically standardized deployed contracts.
In simple terms, interfaces are standardized smart contracts that can be accessed using the npm package manager.
They are means of interacting with already written contracts outside your projects.
To use an interface, all you need to do is import the contract directly from its location in the npm package manager or on Github. They usually start with the @ sign.
An example of how interfaces are imported into a smart contract project:

import "@chainlink/contracts/src...sol";

Constructors

*Constructors * constructor: These are similar to the constructor functions in Javascript, using the constructor keyword, they are called immediately after deploying a smart contract. The simple format.

    constructor () {
    uint256 minimumAmount = 10;
    }

Modifiers

Modifiers modifier: Are used for functions that can be reused in other functions, they help to reduce repeatability.
the format for creating and using the modifier.

modifier <name>{<code here>}

function transaction() public onlyOwner {
uint256 amountLimit = 100;
}


modifier onlyOwner {
  string owner = "Phensic";
  _;
}

The onlyOwner is a modifier function that assigns a value "Phensic" to a variable owner, and can be reused in any other function that has onlyOwner in its function declaration.
The underscore means (run any other code after the code in the modifier function), which means the value Phensic gets assigned first every time the modifier onlyPower is used before any other code.

Immutables And Constants
The constant keywords are used to create constant variables, variables you don't intend to change throughout the contact. Using the constant keyword in the format:

uint256 public constant AMOUNT_LIMIT: 1000;

Note: It's always good practice to use constants where needed, and to use the uppercase for calling their variable name for clear readability.

While immutable is used to create constants that are only assigned once after being initialized.Using the immutable keyword in the format:

address public immutable i_owner;

constructor () {
    i_owner = msg.sender;
}

Since the i_owner variable is only assigned once after being initialized, you can declare it as an immutable available, which also means it cannot be changed.

Note: Global and Local variables act exactly the same in solidity as in other programming languages.
Global variables are created directly Inside the contract and are accessible anywhere inside the contract.
Local variables are created onside functions and cannot be accessed outside their declared functions.

Conclusion

Congratulations on completing the solidity tutorial guide.

Whether you are a first-time developer learning about contracts or an experienced developer transitioning into the web3 space, you have a basic grasp of how solidity is used or writing smart contracts.

If you've completed this guide, you've taken a big step into transitioning into the web3 space.
Now you'll be able to understand the basic functionalities that make up a smart contract.

Congratulations again.

How to create a Webex Clone With 100ms

Mayowa Julius Ogungbola — Sat, 25 Jun 2022 02:04:01 +0000

In this article, we will discuss how to create a Webex clone using the 100ms JavaScript SDK.

What is 100ms?

100ms is a video and audio conferencing application created by the same team that built the video infrastructure at Disney and Facebook. It allows you to incorporate audio and video conferencing into your application by providing powerful, multi-featured APIs and SDKs. With them, you can implement telecommunication services on both the client and server-side applications.

Prerequisites

Basic knowledge of HTML, Tailwind CSS, and React.
Have node.js version 12 pre-installed.

Getting started with 100ms

Go to the link to fork and download the starter files from the GitHub repository. This will allow you to get the starter project locally.

To get started with 100ms JavaScript SDK, run npm install to install all of 100ms’ latest dependencies, and run npm start on your project terminal.

Before building the app, you have to set up a developer's account on 100ms and get your TOKEN_ENDPOINT from the developer’s section. You'll also need a ROOM_ID to join using the Webex app.

To do this, head to the dashboard, and sign up or log in with your Google/GitHub account.

Creating A Custom App

After logging into your account, you will be redirected to a page to create a new app. First, choose the Video Conferencing template, and click Next. Now choose a unique subdomain and then click Set up the app.

Now you can return to the dashboard by clicking Go to Dashboard at the bottom right corner of the screen to edit the roles.

Defining Roles

In the 100ms landscape, role refers to the set of permission a specific participant has access to while in a meeting. In other words, it determined what someone can do while in the meeting - muting/unmuting a peer, ending the session, removing all current participants from the room, etc.

In this case, leave the default roles - "Host" & "Guest”, when you chose the template “Video Conferencing”.

A peer entering the room with either of these roles will be given the following permissions during the session:

Guest: can share their screen, but do not have any special permissions such as being able to mute another participant. To create this role, turn off all their publishing abilities.

Host: can do everything a Guest can do, and also mute/unmute others. To create this role, turn on all permissions for them.

Now, make sure to save the changes you've made. Once that's done, return to the previous page and click Set up App.

Creating A Room

For 100ms users, a room represents the platform where real-time audio-video interactions take place between all peers/participants.

To create a room, return to your dashboard and click on Room on the left pane of the screen. Then click on Create Room to edit the room name (e.g. “webexroom’’). Again, click Create Room.

Click on the Room button to return to your room section and copy your ROOM_ID.

Go to the Developer section by clicking on the Developer button to view your access credentials. Copy your TOKEN_ENDPOINT.

Rename the .env.example file in the image below to just .env to store the TOKEN_ENDPOINT and your ROOM_ID as an environment variable.
Update the values of the variables with the required tokens.

REACT_APP_MEETING_ENDPOINT= <Your TOKEN_ENDPOINT>

REACT_APP_ROOM_ID= <Your ROOM_ID>

Building A Webex Clone

Now that you have set up the essentials, it’s time to get started with coding your Webex clone. In the util folder, the files you'll need to make changes to are: src > components > ConferenceRoom.js, ControlSection.js, Lobby.js, Screen.js, VideoTile.js, and getAuthToken.js.

Here is a link to the 100ms JavaScript/React docs. Review it alongside this tutorial.

Joining And Leaving A Room

Any user who wants to join the room will need an auth token: a client-side token used to authenticate the user. To generate this auth token function, go to getAuthToken.js and modify the code to add the function:

const meetingEndpoint = process.env.REACT_APP_MEETING_ENDPOINT;
const roomID = process.env.REACT_APP_ROOM_ID;

// function to get the token
export default async function getAuthToken(role) {
  const response = await fetch(`${meetingEndpoint}api/token`, {
    method: "POST",
    body: JSON.stringify({
      user_id: "6225ece844ae04b51cafe234", // a reference id for the user
      role: role, // host, guest
      room_id: roomID, // as present on the dashboard
    }),
  });
  const { token } = await response.json();
  return token;
}

After authenticating the user, modify the Lobby.js file with the code below to apply logic to join the meeting:

import { useState } from "react";
import { useHMSActions } from "@100mslive/react-sdk";
import getAuthToken from "../util/getAuthToken";

function Lobby() {
  const hmsActions = useHMSActions();
  const [inputValues, setInputValues] = useState({
    name: "",
    token: "",
  });

  const [role, setRole] = useState("guest");
  const handleInputChange = (e) => {
    setInputValues((prevValues) => ({
      ...prevValues,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // apply logic to join a meeting
    e.preventDefault();
    getAuthToken(role).then((token) => {
      hmsActions.join({
        userName: inputValues?.name,
        authToken: token,
      });
    });
  };

  return (
    <div className="bg-main h-screen flex justify-center items-center">
      <form
        className="max-w-sm container mx-auto flex flex-col gap-4"
        onSubmit={handleSubmit}
      >
        <h2>Join Room</h2>
        <div className="w-full">
          <label htmlFor="name" className="text-white text-base p-2">
            Display Name
          </label>
          <input
            required
            value={inputValues.name}
            onChange={handleInputChange}
            id="name"
            type="text"
            className="w-full p-3 my-2 rounded-xl"
            name="name"
            placeholder="Your name"
          />
        </div>
        <div className="w-full">
          <label htmlFor="name" className="text-white text-base p-2">
            Role
          </label>
          <select
            className="w-full p-3 my-2 rounded-xl"
            value={role}
            onChange={(e) => setRole(e.target.value)}
          >
            <option id="only" value="host">
              Host
            </option>
            <option value="guest">Guest</option>
          </select>
        </div>
        <button className=" bg-btnGreen p-3 rounded-lg text-white">Join</button>
      </form>
    </div>
  );
}

export default Lobby;

The Lobby.js file contains the form available to every user by default. The code above will apply a logic to join the conference call after a user has filled out the form and generated the token.

Now, go to the App.js file and update the file with the code below. The function of the code in this file is to render the conference while a peer is connected.

import {
  useHMSActions,
  selectIsConnectedToRoom,
  useHMSStore,
} from "@100mslive/react-sdk";
import { useEffect } from "react";
import Lobby from "./components/Lobby";
import ConferenceRoom from "./components/ConferenceRoom";

function App() {
  const hmsActions = useHMSActions();
  const isConnected = useHMSStore(selectIsConnectedToRoom);
  useEffect(() => {
    window.onunload = () => {
      hmsActions.leave();
    };
  }, [hmsActions]);
  return <div>{isConnected ? <ConferenceRoom /> : <Lobby />}</div>;
}

export default App;

To get the 100ms stream to reach each participant’s view, modify the VideoTile.js file from the image below.

Add the following code below, this will automatically add another element to show the other participants;

import React from "react";
import { useVideo } from "@100mslive/react-sdk";

const Participant = ({ peer }) => {
  // fetch 100ms video stream to participant view
  const { videoRef } = useVideo({
    trackId: peer.videoTrack,
  });

  return (
    <div className="w-full h-full rounded-lg overflow-hidden z-40">

      // video element to show participant stream
      <video
        ref={videoRef}
        autoPlay={true}
        playsInline
        muted={false}
        className={`object-cover h-full w-full ${peer.isLocal ? "mirror" : ""}`}
      ></video>
    </div>
  );
};

export default Participant;

Head over to ConferenceRoom.js. This file has the code responsible for interacting with the 100ms server and rendering your view as well as that of other participants.

Update the code above to display your local view.

...
// display local participant view
<div
  className={`w-full h-full relative ${
    participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
  } bg-accent rounded-lg flex items-center justify-center`}
>
  {!localPeer ? null : <Participant isLocal={true} peer={localPeer} />}

  <div className="absolute bottom-1 z-[99] left-1">
    <span className="bg-black bg-opacity-40 p-1 px-4 text-xs rounded-3xl text-white">
      {localPeer?.name} ({localPeer?.roleName === "host" ? "Host," : null} me)
    </span>
  </div>
</div>;
...

Next, add the code to display other participants' views:

...
// display other particants' views
{
  peers &&
    peers
      .filter((peer) => !peer.isLocal)
      .map((peer) => {
        return (
          <>
            {" "}
            <div
              className={`w-full h-full relative ${
                participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
              } bg-accent rounded-lg flex items-center justify-center`}
            >
              {!peer ? null : <Participant isLocal={false} peer={peer} />}
              <div className="absolute bottom-1 z-[99] left-1">
                <span className="bg-black bg-opacity-40 p-1 px-4 text-xs rounded-3xl text-white">
                  {peer?.name} ({peer?.roleName === "host" ? "Host," : null} me)
                </span>
              </div>
            </div>
          </>
        );
      });
}
...

To enable another screen to be displayed when a peer is sharing a screen, add the following code to the last comment section:

...
// display screens shared  to participants
{
  screenshareOn &&
    presenters &&
    presenters.map((presenter) => {
      return (
        presenter && (
          <>
            <div
              className={`w-full h-full ${
                participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
              } bg-accent rounded-lg flex items-center justify-center`}
            >
              <Screen isLocal={false} presenter={presenter} />
            </div>
          </>
        )
      );
    });
}
...

The file should have the following code on completion:

import React from "react";
import Screen from "./Screen";
import Participant from "./VideoTile";
import {
  useHMSStore,
  selectLocalPeer,
  selectPeers,
  selectIsSomeoneScreenSharing,
  selectPeersScreenSharing,
} from "@100mslive/react-sdk";
import ControlSection from "./ControlSection";

export default function ConferenceRoom() {
  // access room information from 100ms store

  const localPeer = useHMSStore(selectLocalPeer);
  const screenshareOn = useHMSStore(selectIsSomeoneScreenSharing);
  const presenters = useHMSStore(selectPeersScreenSharing);
  const peers = useHMSStore(selectPeers);

  // no. of active screen participants and screen presenters
  const participants = peers.length + presenters.length;

  return (
    <div className="h-screen w-full bg-main flex">
      <div className="flex flex-col w-full h-full justify-between items-center">
        <div className="max-w-6xl flex items-center justify-center mx-auto h-[80vh] mt-16 container">
          <div
            className={`grid ${
              participants <= 4
                ? "grid-cols-2 grid-rows-2"
                : "grid-cols-4 grid-rows-4"
            } items-center justify-center content-center w-full gap-3 h-full`}
          >

            // display local participant view
            <div
              className={`w-full h-full relative ${
                participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
              } bg-accent rounded-lg flex items-center justify-center`}
            >
              {!localPeer ? null : (
                <Participant isLocal={true} peer={localPeer} />
              )}
              <div className="absolute bottom-1 z-[99] left-1">
                <span className="bg-black bg-opacity-40 p-1 px-4 text-xs rounded-3xl text-white">
                  {localPeer?.name} (
                  {localPeer?.roleName === "host" ? "Host," : null} me)
                </span>
              </div>
            </div>

             // display other particants views
            {peers &&
              peers
                .filter((peer) => !peer.isLocal)
                .map((peer) => {
                  return (
                    <>
                      {" "}
                      <div
                        className={`w-full h-full relative ${
                          participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
                        } bg-accent rounded-lg flex items-center justify-center`}
                      >
                        {!peer ? null : (
                          <Participant isLocal={false} peer={peer} />
                        )}
                        <div className="absolute bottom-1 z-[99] left-1">
                          <span className="bg-black bg-opacity-40 p-1 px-4 text-xs rounded-3xl text-white">
                            {peer?.name} (
                            {peer?.roleName === "host" ? "Host," : null} me)
                          </span>
                        </div>
                      </div>
                    </>
                  );
                })}

             // display screens shared to participants
            {screenshareOn &&
              presenters &&
              presenters.map((presenter) => {
                return (
                  presenter && (
                    <>
                      <div
                        className={`w-full h-full ${
                          participants <= 4 ? "max-h-[20rem]" : "max-h-[10rem]"
                        } bg-accent rounded-lg flex items-center justify-center`}
                      >
                        <Screen isLocal={false} presenter={presenter} />
                      </div>
                    </>
                  )
                );
              })}
          </div>
        </div>
        <ControlSection />
      </div>
    </div>
  );
}

After modifying the ConferenceRoom.js file to stream the necessary views, go to the Screen.js file to create the elements that display the stream to each participant locally.

Add the code below to create a video element and attach the 100ms screen-sharing stream to the video element:

import React from "react";
import {
  useHMSActions,
  useHMSStore,
  selectScreenShareByPeerID,
} from "@100mslive/react-sdk";

const Screen = ({ presenter }) => {
  const hmsActions = useHMSActions();
  const screenRef = React.useRef(null);
  const screenTrack = useHMSStore(selectScreenShareByPeerID(presenter.id));

  // attach 100ms screen-sharing stream to a video element
  React.useEffect(() => {
    (async () => {
      if (screenRef.current && screenTrack) {
        if (screenTrack.enabled) {
          await hmsActions.attachVideo(screenTrack.id, screenRef.current);
        } else {
          await hmsActions.detachVideo(screenTrack.id, screenRef.current);
        }
      }
    })();
  }, [hmsActions, screenTrack]);

  return (
    <div className="w-full h-full rounded-lg overflow-hidden z-50">

      // video element to show screen sharing presenting screen
      <video
        ref={screenRef}
        autoPlay={true}
        playsInline
        muted={false}
        className={`object-cover h-full w-full ${presenter.isLocal ? 'local' : ''}`}
      ></video>
    </div>
  );
};

export default Screen;

Enabling The Control Functions

Lastly, go to the ControlSection.js file to write the basic functions that enable and disable audio, video, and screen sharing.
Under the first comment section to enable the functions with peers, paste the following code:

const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } =
  useAVToggle();

const { amIScreenSharing } = useScreenShare();

const toggleScreen = async () => {
  await hmsActions.setScreenShareEnabled(!amIScreenSharing);
};

In addition, paste the code below to end the conference for any guest that leaves the room, or to end the entire room when the host is leaving:

const endLeaveMeeting = () => {
       hmsActions.endRoom(false, "ended meeting") && hmsActions.leave();
 }

The ControlSection.js file should have the following code on completion:

import React from "react";
import {
  useHMSActions,
  useAVToggle,
  useScreenShare
} from "@100mslive/react-sdk";
import { UploadIcon, XIcon } from "@heroicons/react/solid";
import { MicrophoneIcon, VideoCameraIcon } from "@heroicons/react/outline";

export default function ControlSection() {
  const hmsActions = useHMSActions();

  // controls logic i.e audio, video and screen sharing
  const {
    isLocalAudioEnabled,
    isLocalVideoEnabled,
    toggleAudio,
    toggleVideo
  } = useAVToggle();

  const { amIScreenSharing } = useScreenShare();

  const toggleScreen = async () => {
    await hmsActions.setScreenShareEnabled(!amIScreenSharing);
  };

  // end meeting as host or leave as participant
  const endLeaveMeeting = () => {
        hmsActions.endRoom(false, "ended meeting") && hmsActions.leave();
  }

  return (
    <div className="h-[4rem] items-center justify-center flex gap-5 w-full">

      // UI elements controls section
      <button
        className="text-white text-base border border-accent rounded-3xl px-4 py-2"
        onClick={toggleAudio}
        active={isLocalAudioEnabled}
      >
        <div className="flex gap-x-3 items-center">
          <MicrophoneIcon className=" h-5 w-5" />
          <span>{isLocalAudioEnabled ? "Mute" : "Unmute"}</span>
        </div>
      </button>
      <button
        className="text-white text-base border border-accent rounded-3xl px-4 py-2"
        onClick={toggleVideo}
      >
        <div className="flex gap-x-3 items-center">
          <VideoCameraIcon className=" h-5 w-5" />
          <span>{isLocalVideoEnabled ? "Stop Video" : "Resume Video"}</span>
        </div>
      </button>
      <button
        className="text-white text-base border border-accent rounded-3xl px-4 py-2"
        onClick={toggleScreen}
        active={!amIScreenSharing}
      >
        <div className="flex gap-x-3 items-center">
          <UploadIcon className=" h-5 w-5" />
          {amIScreenSharing ? "Stop Sharing" : "Share"}
        </div>
      </button>
      <button
        title="End meeting"
        className="text-white bg-red-600 text-base rounded-3xl p-2"
        onClick={endLeaveMeeting}
      >
        <XIcon className="fill-white h-5 w-5" />
      </button>
    </div>
  );
}

That’s it!

Congratulations, you’ve successfully created a Webex app using the 100ms React SDK. Here’s a link to the deployed version so you can see what the app is supposed to look like and operate.

Solving The Oracle Problem

Mayowa Julius Ogungbola — Sat, 25 Jun 2022 02:01:48 +0000

Introduction

In the world of blockchains and smart contracts, where transactions are now automated into contracts deployed on blockchains. Thereby the solution to the problem of trust issues in the economic ecosystem,
but as the rule of evolution states "The solution to a problem is only the birth of another problem".

On completing this article you'll understand what the Oracle problem is, how it flaws the blockchain, and new technologies that help solve these problems.
Specifically, you'll be learning about Chainlink Oracles on Polygon.

Prerequisites
You should have test net funds in your metamask to run virtual tests, on the testnet eg. Kovan est net
You should also be familiar with working on Remix IDE Integrated Development Environment, An easy tool for compiling and deploying smart contracts.

Smart Contracts

Before diving right into the blockchain flaw, Oracle problem and how Chanlilnk provides a solution, Here's a brief reminder of what smart contracts are, and their benefit to the economic ecosystem.

Smart Contracts are a set of computational instructions executing transaction protocols that are deployed on a decentralized blockchain like (Ethereum).
they are immutable or incredibly hard to change once deployed due to consensus and
they are automatically executed.

Benefit of Smart Contracts

One of the major benefits of a smart contract is Decentralization.
Decentralization: Introducing decentralization to the system, they dispose of the system of centralization. Meaning platforms transition from Traditional agreements where a single individual or organization holds the authorization to charge and modify the system at any time, into a Cryptographic agreement that gives the authorization to change the system to the consumers of the system.

By this system of decentralization, platforms like Centralized Financial organizations (CeFi) become Decentralized Financial organizations (DeFi), by a system of DAOs Decentralized Autonomous Organizations, where the consumers of the system make an autonomous decision for the organization.

As promising as Decentralization sounds, it is "creating an immutable contract that you deploy into a blockchain like Ethereum, which automates transactions and carries out decentralized autonomous changes". It might not be all perfect after all.

The Oracle Problem

When you deploy a contract to a blockchain, how exactly does your contract interact with you real world?
Or how does your contract know the real-world price conversion rate between different tokens and other hard currencies?
After all, if your contract is deployed with fixed data, whereas real-world data are on the constant update, that doesn't make your contract smart right? much less trust efficient? The Oracle Problem
This is the Oracle Problem.
The blockchain is a deterministic platform, which means it cannot with real-world data.
and because of their ability to maintain consensus on-chain, it makes it even less efficient to use random API calls to connect off-chain data to your blockchain because inaccurate data will break the consensus.
So how do you solve the Oracle Problem, Blockchain Oracle?

Blockchain Oracles

The Solution: Blockchain Oracles are devices that interact with the off-chain world to provide external data or computation to smart contracts. But this blockchain oracle also has to be decentralized, in order to maintain the idea of decentralization.

Blockchain Oracle Networks

The oracle networks are decentralized systems that deliver valid off-chain data to the blockchain while maintaining consensus throughout the blockchain, they deliver quality data after a series of validation with original proofs and data privacy, which guarantees the crypto-graphic economy.

Smart contracts that use oracle networks to obtain off-chain components are called Hybrid Smart Contacts, because they run their transactions on chian in the smart contracts, and maintain consensus, they also require off-chain data to determine off-chain transaction details like prices, weather data, etc.

Chainlink

Chainlink blockchain oracle, that delivers off-chain data into the blockchain after a series of testing inside the chainlink node, this way the off-chain data reaches a high level of consensus during contract evaluation, even before they are consumed on the blockchain.

Chainlink Features
Chainlink provides a number of features that solves the oracle problem, Some of these are:

Chainlink Keepers

Chainlink Keepers: These are decentralized event-driven execution, smart contracts are written
codes that carry out automated transactions on the blockchain, but these codes are only triggered based on certain conditions specified on the code. The chainlink Keeper feature triggers the events on the smart contract.

Based on the code you've written, the chainlink keepers trigger the events in your smart contract like when or how to run a transaction. They simply listen for conditions on the contract to trigger events.

Chainlink API Calls

Chainlink API Calls: As the name implies, these features provide unlimited customization for decentralized applications. It runs the same system of evaluation through chainlink nodes, supplied from a large number of resources, and provides unlimited customization of applications with the API calls they provide to the blockchain.

Chainlink Verifiable Randomness Functions

Chainlink Verifiable Randomness Functions VRF: These are features in chainlink that secures verified and unified randomization of data for the use of decentralized applications like Decentralized Autonomous Organisations, DAOs, by providing secure, and cryptographic provable random data, they ensure a fair system of the selection process.
Decentralized Lottery applications, NFT Gaming applications, and DAOs can Effectively make use of random numbers to provide a fair chance of determination on their platforms.

The VRF feature is extremely easy to use. Without having to code from scratch, you can simply get access to the contract files with source code for randomizing numbers.

Chainlink Data Feeds

Chainlink data feeds: They hold massive data feeds that power decentralized platforms like in the Defi ecosystem, they mine data from a global collection of data providers, running these data through a network of chainlink nodes. The evaluated data are stored on a reference contract which is used as an interface in other smart contracts, together they make up a hybrid smart contract.
These data feeds a constantly updated into their referenced contracts, and still maintain a high level of consensus.

Conslusion

Now that you fully understand what the oracle problem is and how to solve this problem, you can decide to explore deeper into the china link features and create a hybrid contract with these functionalities. You can also explore other Blockchain Oracle Networks go get started with hybrid smart contracts to solve other bigger problems,
You can now work on DeFi, DAOs, Decentrelized Lottery games, and other projects without having to worry about issues like data feeds, data randomness, and other Oracle Problems

Congratulations on taking another big step in learning about the cutting-edge revolutionary web3 space.