CODEWITHSUNDEEP
phpstripe-paymentsstripes
AdamS92
AdamS92

Reputation: 11

stripe checkout not not working like in the demo

Hi i'm trying to insert Stripe on my php website, i took the Stripe sample from the their website but all i receive instead of a nice checkout page is nothing more than text, i'm in local using Wamp, stripe php is install through composerthe create-checkout-session.php [the server part] `

<?php

require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_51GnYWKFeoY7b2LtguaCMHEyazW1Ly9SsOhpig3V27QwSURm8xTXZQIe7toFA39v5A34CIzBrZL7o0Y5lYJkiVToC00V1gsNvwi');

header('Content-Type: application/json');

$YOUR_DOMAIN = 'http://localhost:4242';

$checkout_session = \Stripe\Checkout\Session::create([
  'payment_method_types' => ['card'],
  'line_items' => [[
    'price_data' => [
      'currency' => 'usd',
      'unit_amount' => 2000,
      'product_data' => [
        'name' => 'Stubborn Attachments',
        'images' => ["https://i.imgur.com/EHyR2nP.png"],
      ],
    ],
    'quantity' => 1,
  ]],
  'mode' => 'payment',
  'success_url' => $YOUR_DOMAIN . '/success.html',
  'cancel_url' => $YOUR_DOMAIN . '/cancel.html',
]);

echo json_encode(['id' => $checkout_session->id]);``

the checkout.html [the front part]

    <!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img
          src="https://i.imgur.com/EHyR2nP.png"
          alt="The cover of Stubborn Attachments"
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <button type="button" id="checkout-button">Checkout</button>
    </section>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51GnYWKFeoY7b2LtgWEqcinzq7f7xCsQA8RPvCcWDvF5YIl3573ueUJKBlQEMo8P5nIM3vu1dj6YmRD3auTmDaw0K00njLvdBQ1");
    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {
      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>
</html>

Here what i receive when i go on localhost 4242

{"id":"cs_test_a1jEBgtlzTJrv4MMwTCgsKgHrCLM0k31Ztrk620EV2H8StQApoptTudXrZ"}

Upvotes: 1

Views: 1247

Answers (1)

Paul Asjes
Paul Asjes

Reputation: 5847

Sounds like localhost:4242 is pointing to your create-checkout-session.php file, which is returning a Checkout Session ID as json as expected.

You need to make sure that localhost:4242 points to your checkout.html file instead. Look into your server set up to see if you can find out why it's pointing to the wrong file.

As a side note, you left your secret test API key in the question. That key is now compromised, you should roll it immediately at https://dashboard.stripe.com/test/apikeys

Upvotes: 2

Related Questions