stripe not redirecting to checkout page

Question

i am getting redirect to pay.php and got session.id in pay.php but i am not redirecting to checkout page :(

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

i am trying to redirect to checkout page should i create product in stripe ?

 <!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"); } ?>

Answer 1

In your JavaScript code, you have added a .submit() before the Event Listener. This causes to redirect the page without submitting the information. Please check the below code.

<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");
}?>

stripe not redirecting to checkout page

Question

1 answers

solution1
0 2020-11-20 01:28:04

stripe not redirecting to checkout page

Question

1 answers

solution1 0 2020-11-20 01:28:04

solution1
0 2020-11-20 01:28:04