{"size": 1300, "ext": "js", "max_stars_repo_path": "pages/checkout.js", "max_stars_repo_name": "networkandcode/shop", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/checkout.js", "max_issues_repo_name": "networkandcode/shop", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "pages/checkout.js", "max_forks_repo_name": "networkandcode/shop", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.9523809524, "max_line_length": 131, "alphanum_fraction": 0.57}
import { Button, Container, Typography } from '@material-ui/core';
import { loadStripe } from '@stripe/stripe-js';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

const CheckoutPage = () => {
    const router = useRouter();
    const [ sessionId, setSessionId ] = useState('');

    const handleSubmit = async(e) => {
        e.preventDefault();
        const stripe = await stripePromise;
        const result = await stripe.redirectToCheckout({
            sessionId
        });
        if(result.error){
            console.log(result.error.message);
        };
    };

    useEffect(() => {
        setSessionId(router.query.sessionId);
    }, [router])

    return(
        <Container>
            <br/>
            <form style={{textAlign: `center`}}  onSubmit={ handleSubmit }>
                    <Button color="primary" justifyContent="center" style={{ maxWidth: `500px` }} type="submit" variant="outlined">
                      <Typography gutterBottom variant="h5">
                          Proceed to payment gateway
                      </Typography>
                    </Button>
            </form>
        </Container>
    );
};

export default CheckoutPage;
