Integrasi Stripe Checkout

Aug 25 2020

Saya mencoba melakukan hal yang paling sederhana: mengirim pengguna ke halaman checkout yang dihosting Stripe dengan 1 produk.

Tidak satu pun contoh Stripe yang berhasil, sejauh ini yang saya dapatkan adalah:

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']]);

Halaman PHP itu mengembalikan ID sesi dengan benar.

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>

Ketika saya mengklik tombol tidak ada yang terjadi dan saya mendapatkan kesalahan ini di devtools Chrome:

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

Saya tidak mengerti kesalahan ini. Sepertinya sessionId tidak disampaikan dengan benar. Kode HTML datang langsung dari dokumen Stripe di:https://stripe.com/docs/payments/checkout/accept-a-payment

Sejujurnya saat ini saya tidak tahu ke mana saya harus mencari. Tak satu pun dari contoh Stripe tampaknya berhasil. Ada yang tahu apa yang saya lakukan salah?

Integrasi Stripe Checkout

Jawaban