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 StripeStripeClient('sk_key'); $intent = $stripe->paymentIntents->create( [ 'amount' => $amount, 'currency' => 'usd', 'automatic_payment_methods' => ['enabled' => true], ] ); return $intent; }; ?>
Advertisement
Answer
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:
the HTML will trigger the JS function named trigger1() on window load
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”
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 StripeStripeClient('sk_key'); $intent = $stripe->paymentIntents->create( [ 'amount' => $amount, 'currency' => 'usd', 'automatic_payment_methods' => ['enabled' => true], ] ); echo $intent->client_secret;