Movie Streaming App with Signup Payment Using Yoco in React

This document outlines the implementation of a movie streaming app with a signup payment feature using the Yoco payment gateway in React. Below are the key components involved in the application, followed by the example code.

Prerequisites

• Node.js: Ensure Node.js is installed on your machine.
• Create React App: Command-line tool for creating React applications.
• Yoco API Key: You’ll need an API key from Yoco to set up payments.

Project Setup

1. Initialize a React App:

   npx create-react-app movie-streaming-app
   cd movie-streaming-app

2. Install Dependencies:

   npm install axios yoco-sdk-js

Directory Structure

movie-streaming-app/
├── src/
│   ├── components/
│   │   ├── PaymentForm.js
│   │   └── Signup.js
│   ├── App.js
│   └── index.js

Code Implementation

PaymentForm Component

This component handles payment processing through Yoco.

// src/components/PaymentForm.js

import React, { useState } from 'react';
import Yoco from 'yoco-sdk-js';

/**
 * PaymentForm component to handle payment processing.
 * 
 * @param {function} onSuccess - Function to handle successful payment.
 * @param {function} onError - Function to handle payment error.
 * @returns {JSX.Element} Payment form UI.
 */
const PaymentForm = ({ onSuccess, onError }) => {
  const [amount, setAmount] = useState('');

  const handlePayment = async (e) => {
    e.preventDefault();
    const yoco = new Yoco({ publicKey: 'YOUR_YOCO_PUBLIC_KEY' });

    try {
      const session = await yoco.session.create({
        amount: amount * 100, // Amount in cents
        currency: 'ZAR',
      });
      onSuccess(session);
    } catch (error) {
      onError(error);
    }
  };

  return (
    

       setAmount(e.target.value)}
        required 
      />
      Pay
    
  );
};

export default PaymentForm;

Signup Component

This component manages user signup and integrates the payment process.

// src/components/Signup.js

import React, { useState } from 'react';
import PaymentForm from './PaymentForm';
import axios from 'axios';

/**
 * Signup component to manage user registration and payment.
 * 
 * @returns {JSX.Element} Signup form UI.
 */
const Signup = () => {
  const [userDetails, setUserDetails] = useState({ name: '', email: '' });
  const [paymentSuccess, setPaymentSuccess] = useState(false);

  const handleSignup = async (e) => {
    e.preventDefault();
    try {
      await axios.post('/api/signup', userDetails); // Endpoint for user registration
      setPaymentSuccess(true);
    } catch (error) {
      console.error("Signup Failed:", error);
    }
  };

  const handleSuccess = (session) => {
    alert('Payment Successful! Session ID: ' + session.id);
  };

  const handleError = (error) => {
    console.error('Payment Error:', error);
  };

  return (
    

      
Sign Up for Movie Streaming
      

         setUserDetails({ ...userDetails, name: e.target.value })} 
        />
         setUserDetails({ ...userDetails, email: e.target.value })} 
        />
        Sign Up
      
      {paymentSuccess && }
    
  );
};

export default Signup;

App Component

The main application component that ties everything together.

// src/App.js

import React from 'react';
import Signup from './components/Signup';

/**
 * Main App component rendering the Signup component.
 * 
 * @returns {JSX.Element} App UI.
 */
const App = () => {
  return (
    

      
    
  );
};

export default App;

Usage Example

To run the application, follow these steps:

1. Start the Application:

   npm start

2. Access the app: Open your browser and navigate to http://localhost:3000.

3. Sign up: Fill out the sign-up form and process payment via Yoco.

Conclusion

This example shows how to create a simple movie streaming app with a signup feature and Yoco payment integration in React. Customize this template further for a production-ready solution. For advanced data analysis and courses, consider exploring the offerings on the Enterprise DNA Platform.