Stripe php integration Error: ReferenceError: sessionId is not defined

Question

I'm stuck at integrating stripe's prebuild payment gateway to my project.

I'm coding very simple Eshop (without login/registration and shopping cart) just a simple project with a form and stripe checkout as a way to pay...

I was following official stripe documentation but I struggle to find an answer how to implement their "simple prebuilt checkout page" to procedural PHP.

Currently I'm stuck on getting this error...the provided code is what I have used from their official documentation "still getting error ReferenceError: sessionId is not defined in the console in devtools ://

Also IDK how to configure endpoint on my server when coding it all without PHP framework such as Slim/Laravel...al examples provided by stripe use Slim framework when configuring endpoints....any ideas?

<?php
//config PHP 

require_once("vendor/autoload.php");

// === SET UP STRIPE PAYMENT GATEWAY ===
$stripe = [
    "secret_key"      => "sk_test_4eC39HqLyjWDarjtT1zdp7dc",
    "publishable_key" => "pk_test_TYooMQauvdEDq54NiTphI7jx",
];

\Stripe\Stripe::setApiKey($stripe['secret_key']);
?>

<?php

//create-checkout-session.php

require_once '_includes/config.php';

// ?session_id={CHECKOUT_SESSION_ID} means the redirect will have the session ID set as a query param
$checkout_session = \Stripe\Checkout\Session::create([
    'success_url' => 'http://localhost:8888/Avanza---Eshop/success.php?session_id={CHECKOUT_SESSION_ID}',
    'cancel_url' => 'http://localhost:8888/Avanza---Eshop/canceled.php',
    'payment_method_types' => ['card'], //, 'alipay'
    'mode' => 'payment',
    'line_items' => [[
        'amount' => 2000,
        'currency' => 'usd',
        'name' => 'mikina',
        'quantity' => 1,
    ]]
]);

header('Content-type: application/json');
echo json_encode(['sessionId' => $checkout_session['id']]);

<!--order.php actual page that will be displayed to users-->

<button style="width: 100px; height: 100px" id="checkout-button"></button>

            <script type="text/javascript">
                // Create an instance of the Stripe object with your publishable API key
                var stripe = Stripe('pk_test_51HjoRfIaBaXJG6udQspXdLRNwMesCriMwZoR7nGCF0hZtu2Zp9FUxCFWwVpwwU4BZs7fTxJtYorVTuoK1vqXp2Uw002r6qvmO7'); // removed for Stackoverflow post
                var checkoutButton = document.getElementById('checkout-button');

                checkoutButton.addEventListener('click', function() {
                    // Create a new Checkout Session using the server-side endpoint you
                    // created in step 3.
                    fetch('create-checkout-session.php', {
                        method: 'POST',
                    })
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(session) {
                            return stripe.redirectToCheckout({ sessionId: sessionId});
                        })
                        .then(function(result) {
                            // If `redirectToCheckout` fails due to a browser or network
                            // error, you should display the localized error message to your
                            // customer using `error.message`.
                            if (result.error) {
                                alert(result.error.message);
                            }
                        })
                        .catch(function(error) {
                            console.error('Error:', error);
                        });
                });
            </script>

Answer 1

It's worked for me. If you see more errors or face any problems, loot at the browser console Network tab.

$(function() {
    var stripe = Stripe('<?= Config::STRIPE_PUB_KEY ?>'); // here write: pk_test_5...
    $(document).on('click', '.buy_now_btn', function(e) {
        let id = $(this).attr('id');
        $(this).text('Please wait...');
        $.ajax({
            url: 'action.php',
            method: 'post',
            data: {
                id: id,
                stripe_payment_process: 1
            },
            dataType: 'json',
            success: function(response) {
                console.log(response);
                return stripe.redirectToCheckout({
                    sessionId: response.id
                });
            },
        })
    })
});

Answer 2

I think you need to replace return stripe.redirectToCheckout({ sessionId: sessionId}); with return stripe.redirectToCheckout({ sessionId: session.sessionId});