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
- Install react-stripe-checkout from npm
- 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 :)
Top comments (0)