Basically, the problem im having is between php and javascript, where my php function is createPayment() I can't put javascript variable so I can't enter the amount ($) of the order I'm really stuck on what to do.

Maybe a post event to the server to create payment via javascript but I don't know how to do that

Javascript:

document.getElementById("stripe").onclick = function(){
    const stripe = Stripe('public_key');
    const options = {
        clientSecret: "<?php include('payments.php'); $payment = createPayment(500); echo $payment->client_secret ?>",
        // Fully customizable with appearance API.
        appearance: {/*...*/},
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');   
}

Server side:

<?php
    require_once('vendor/autoload.php');

    function createPayment($amount){
        $stripe = new \Stripe\StripeClient('sk_key');
        $intent = $stripe->paymentIntents->create(
            [
              'amount' => $amount,
              'currency' => 'usd',
              'automatic_payment_methods' => ['enabled' => true],
            ]
          );
        return $intent;
    };    
?>

CodePudding user response：

METHOD ONE

One of the ways to tackle the problem is to add an intermediate PHP (e.g. intermediate.php)

So if your original flow is

cart.php > processpayment.php (with javascript) calling payment.php to get client_secret

then change the flow to

cart.php > intermediate.php > processpayment.php(with javascript) calling payment.php to get client_secret

So for the cart.php, first call intermediate.php with a parameter of the amount, say intermediate.php?amount=1234 :

intermediate.php

<?php
session_start();
$_SESSION["amount"]=$_REQUEST["amount"]; 
header('Location: processpayment.php');
exit;
?>

Now in the processpayment.php

change

clientSecret: "<?php include('payments.php'); $payment = createPayment(500); echo $payment->client_secret ?>",

to

clientSecret: "<?php include('payments.php'); $payment = createPayment($_SESSION["amount"]); echo $payment->client_secret ?>",

Note: Make sure you have <?php session_start(); ?> at the top of processpayment.php too

METHOD TWO # (use ajax)

An alterative is to pass the amount value (e.g. 1234) thru ajax to the server script which will return the client secret, and the use the client secret in the stripe payment processing

Hence , use the following html/js:

1. the HTML will trigger the JS function named trigger1() on window load

2. the JS trigger1() will run an ajax function, passing the amount (e.g. 1234) to server2.php and wait for the return of the client secret , then put it into a hidden input field known with ID "secret"

3. now you can get the correct client secret for the stripe payment function thru document.getElementById("secret").value, so can now just use:

clientSecret: document.getElementById("secret").value;

So , the following is the HTML/JS:

<script>
document.getElementById("stripe").onclick = function(){
    const stripe = Stripe('public_key');
    const options = {
        clientSecret: document.getElementById("secret").value;
        // Fully customizable with appearance API.
        appearance: {/*...*/},
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');   
}

</script>

<input type=hidden id=secret value="">

<script>
function trigger1() {
$.ajax({
   type: 'GET',
   url: 'server2.php',
   data: {"amount": 1234},
   success: function (response) {
document.getElementById("secret").value=response
      },
      error: function () {
        alert("Error !!");
      }
});
}


window.onload= trigger1();

</script>

and use the following php (server2.php)

<?php
    require_once('vendor/autoload.php');


    $amount=$_GET["amount"];

        $stripe = new \Stripe\StripeClient('sk_key');
        $intent = $stripe->paymentIntents->create(
            [
              'amount' => $amount,
              'currency' => 'usd',
              'automatic_payment_methods' => ['enabled' => true],
            ]
          );
        
        echo $intent->client_secret;