CODEWITHSUNDEEP
javascriptphpstripe-payments
Alasdair
Alasdair

Reputation: 14113

Stripe Checkout Integration

I'm trying to do the simplest possible thing: sending the user to Stripe's hosted checkout page with 1 product.

None of Stripe's examples seem to work, so far what I've got is:

PHP create-checkout-session.php

require_once 'shared.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' => $domain . '/success.html?session_id={CHECKOUT_SESSION_ID}',
    'cancel_url' => $domain . '/canceled.html',
    'payment_method_types' => ['card'], //, 'alipay'
    'mode' => 'payment',
    'line_items' => [[
        'amount' => $price,
        'currency' => 'usd',
        'name' => $product,
        'quantity' => 1,
    ]]
  ]);
  
echo json_encode(['sessionId' => $checkout_session['id']]);

That PHP page correctly returns a session ID.

HTML

<html>
  <head>
    <title>Buy cool new product</title>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <button id="checkout-button">Checkout</button>

    <script type="text/javascript">
      // Create an instance of the Stripe object with your publishable API key
      var stripe = Stripe('pk_test_key'); // 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: session.id });
        })
        .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>
  </body>
</html>

When I click the button nothing happens and I get this error on Chrome devtools:

Error: IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.
    at new t (https://js.stripe.com/v3/:1:11100)
    at Lu (https://js.stripe.com/v3/:1:152624)
    at qu (https://js.stripe.com/v3/:1:152923)
    at Fu (https://js.stripe.com/v3/:1:153599)
    at Bu (https://js.stripe.com/v3/:1:153713)
    at e.redirectToCheckout (https://js.stripe.com/v3/:1:154128)
    at https://emu.net/stripetest/test.html:24:25

I don't understand this error. It seems like the sessionId is not being passed correctly. The HTML code came directly from the Stripe doc at: https://stripe.com/docs/payments/checkout/accept-a-payment

To be honest at this point I don't know where I'm supposed to look. None of the Stripe examples seem to work. Anyone have any idea what I'm doing wrong?

Upvotes: 1

Views: 1920

Answers (2)

Aldo Prinzi
Aldo Prinzi

Reputation: 21

take a look at the error message:

Error: IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId. at new t (https://js.stripe.com/v3/:1:11100)

You need to send back "sessionId: session.sessionId".

Upvotes: 0

Mitya
Mitya

Reputation: 34556

Judging by the structure of session you need to pass

{ sessionId: session.sessionId }

not

{ sessionId: session.id }

Upvotes: 3

Related Questions