Youtube Clone

This is the youtube clone which I did from the sonny sanga tutorials in youtube, The tutorial was good ,I have learnt many things also it includes Redux for the state management with stripe.

I have added my own touch to build by adding the youtube trailer link for the movies & the stripe button with node server for stripe payments.

Please find below how I have added stripe & trailer feature for netflix clone

link to the project- https://netfllicclonne.herokuapp.com/

How I added stripe button

1. Install react-stripe-checkout from npm
2. In client code add following code

   ` import React from 'react';
    import StripeCheckout from 'react-stripe-checkout';
    import axios from 'axios';

    const StripeCheckoutButton = ({ price }) => {
    const priceForStripe = price * 100;
    const publishableKey =****;

    const onToken = token => { 
     axios({
       url: 'payment',
       method: 'post',
       data: {
        amount: priceForStripe,
        token: token
       }
      })
      .then(response => {
        alert('succesful payment');
      })
      .catch(error => {
        console.log('Payment Error: ', error);
        alert(
          'There was an issue with your payment! Please make sure 
     you use the provided credit card.'
        );
      });
    };

  return (
    <StripeCheckout
      label='subscribe'
      name='Netflix-clone'
      billingAddress
      shippingAddress

image='https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png'
      description={`Your total is $${price}`}
      amount={priceForStripe}
      panelLabel='Pay Now'
      token={onToken}
      stripeKey={publishableKey}
    />
  );
};

export default StripeCheckoutButton `

3.Add an node server to run/open the stripe popup when hit /payment route

` app.post("/payment", (req, res) => {
  console.log("inpayment");
  const body = {
    source: req.body.token.id,
    amount: req.body.amount,
    description: "test description",
    currency: "INR",
  };

  stripe.charges.create(body, (stripeErr, stripeRes) => {
    if (stripeErr) {
      console.log("abc", stripeErr);
      res.status(500).send({ error: stripeErr });
    } else {
      console.log("abc2");

      res.status(200).send({ success: stripeRes });
     }
     }) `

4.Voila!! your stripe payment is ready

How To integrate Tmdb api with youtube-trailer

1.install movie-trailer & react-youtube from npm

2.Then fetch trailers id from the below link replace movie.id by id of the movie,that trailer to be fetched https://api.themoviedb.org/3/movie/${movie.id}/videos?api_key=9d2bff12ed955c7f1f74b83187f188ae

3.store the key value from the results fetched from before ,& send it as trailer prop

   `<Youtube videoId={trailer} opts={
    height : "390",
    width : "100%",
    playerVars : {
        autoplay:1,
    }}/>`

4.Now you have working trailer popup for the movies

please do share your feedback on this blog
Thanks for your time :)