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

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

Answer 2

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
                });
            },
        })
    })
});