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", ]; StripeStripe::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 = StripeCheckoutSession::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>
Advertisement
Answer
I think you need to replace return stripe.redirectToCheckout({ sessionId: sessionId});
with return stripe.redirectToCheckout({ sessionId: session.sessionId});