时间戳

首页 > 解决方案 > 条带未重定向到结帐页面

javascript - 条带未重定向到结帐页面

问题描述

我正在重定向到 pay.php 并在 pay.php 中获得 session.id 但我没有重定向到结帐页面:(

var checkoutButton = document.getElementById("paymentform").submit();

我正在尝试重定向到结帐页面我应该在条纹中创建产品吗？

    <!DOCTYPE html>
<html>
  <head>
    <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>
<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{ ?>
 <form name="paymentform" class="paymentform" style="display:none" id="paymentform" method="post" action="pay.php">
<input name="productname" type="hidden" value="<?=$_POST['productname'];?>">
<input name="amount" type="hidden" value="<?=$_POST['amount'];?>">
</form>
 <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_576576576576576");
    var checkoutButton = document.getElementById("paymentform").submit();

    checkoutButton.addEventListener("click", function () {
      fetch("/pay.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>
<?php } else{
header("location:http://www.example.com");
}?>

pay.php

<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{
require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_86876876876');

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

$YOUR_DOMAIN = 'https://localhost';

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

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






}else{
header("location:http://www.example.com");
}
?>

标签： javascriptphphtml

解决方案

在您的 JavaScript 代码中，您.submit()在事件侦听器之前添加了一个。这会导致在不提交信息的情况下重定向页面。请检查以下代码。

<html>
<head>
    <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>
<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{ ?>
    <form name="paymentform" class="paymentform" style="display:none" id="paymentform" method="post" action="pay.php">
        <input name="productname" type="hidden" value="<?=$_POST['productname'];?>">
        <input name="amount" type="hidden" value="<?=$_POST['amount'];?>">
    </form>
    <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_576576576576576");
    var paymentform = document.getElementById("paymentform");

    let formData = new FormData();
    formData.append('productname', paymentform.elements["productname"]);
    formData.append('amount', paymentform.elements["amount"]);

    fetch("/pay.php", {
        method: "POST",
        body: formData
    })
    .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>
<?php } else{
header("location:http://www.example.com");
}?>

推荐阅读