Stripe Custom Checkout with dynamically amount

Question

I need to implement a stripe solution for a registration system. In this registration, users pay a single time payment and have the choice to make a donation. My problem is how to show dynamically the total amount (Registration + donation)with checkout.js ?

The payment works perfectly on Stripe Dashboard. Donation + Registration fee are added together. My problem is to dynamically put the amount on the checkout window. On this window, just appear "Pay", I want if it's possible to have Pay $amount.

For information, I'm using Wordpress.

Thank you.

Here is my page.php :

<form action="myURL/charge.php" method="POST" id="payment-form">

<!-- //Header -->
<!--<div class="form-header"><p>Powered by Stripe</p></div>-->
<span  id="card-errors" class="payment-errors" style="color: red; font-size: 22px; "></span>

<!-- // First and Last Name -->
<div class="form-row left"><label for="firstname" class="next-line">First Name</label><input type="text" name="fname" value="<?php ( isset( $_POST['fname'] ) ? $first_name : null ) ?>"></div>
<div class="form-row right"><label for="lastname" class="next-line">Last Name</label><input type="text" name="lname" value="<?php ( isset( $_POST['lname'] ) ? $last_name : null ) ?>"></div>

<!-- //Email -->
<div><label for="email">Email <strong>*</strong></label><input type="text" name="email" value="<?php ( isset( $_POST['email'] ) ? $email : null ) ?>"></div>
<!-- //Phone-->
<div><label for="phone">Phone</label><input type="tel" name="phone" value="<?php ( isset( $_POST['phone'] ) ? $phone : null ) ?>"></div>
<select name="registration_fee" id="registration_fee" required>
    <option selected="selected" disabled>Choose registration </option>
    <option value="1200">18 - 29 year</option>
    <option value="1600">30 - 39 year</option>
</select>
    <div class="form-row left"><label for="donation" class="next-line">Donation</label><input type="text" name="donation" value="<?php ( isset( $_POST['donation'] ) ? $donation : null ) ?>"></div>


<div id="card-element">
  <!-- a Stripe Element will be inserted here. -->
</div>

<!--Submit-->
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="XXXXXXXxXXXXXXXX"
data-amount="$registration_fee + $donation"
data-name="XXXX XXXXX"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="eur">

And charge.php :

<?php 
$email = $_POST['email'];
$phone = $_POST['phone'];
$first_name = $_POST['fname'];
$last_name = $_POST['lname'];
try {
    require_once('Stripe/init.php');

    // Use Stripe's library to make requests...
    \Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXXXXXXX");

    $token  = $_POST['stripeToken'];

    isset ($_POST['registration_fee']) ? $registration_fee = $_POST['registration_fee'] : '';
    isset ($_POST['donation']) ? $donation = $_POST['donation'] : '';


    $response = \Stripe\Charge::create(array(
        //'customer' => $customer->id,
        'amount' => $registration_fee + $donation ,
        'currency' => "eur",
        'source' => $token,
        // "source" => "tok_mastercard", // obtained with Stripe.js
        //"metadata" => array("order_id" => "6735")


    ));

    //print_r($response);

    /*===========================
        send email
    ============================*/

    $strTo = '[e-mail]';
    $strName = $first_name . ' ' . $last_name;

    $strEmail = $email;
    $strPhone = $phone;
    // Uniqid Session //
    $strSid = md5(uniqid(time()));
    $strHeader = "";
    $strHeader .= "From: ".$strName."<".$strEmail.">\nReply-To: ".$strEmail."";
    $strSubject = 'Form Submission from ' . $strName;
    $strHeader .= "\nMIME-Version: 1.0\n";
    $strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
    $strHeader .= "This is a multi-part message in MIME format.\n";
    $strHeader .= "--".$strSid."\n";
    $strHeader .= "Content-type: text/html; charset=utf-8\n";
    $strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
    $strHeader .= "Name: \n";
    $strHeader .= $strName."\n\n";
    $strHeader .= "Email: \n";
    $strHeader .= $strEmail."\n\n";
    $strHeader .= "Phone: \n";
    $strHeader .= $strPhone."\n\n";

    $flgSend = mail("$strTo", "$strSubject", $strHeader);  // @ = No Show Error //

    if($flgSend) {

        $clientHeader = "";
        $clientHeader .= "From: " . "NAME_HERE" . "<" . "[e-mail]" . ">\n";
        $clientHeader .= "Reply-To: " . "[e-mail]" . "\n";

        $clientSubject = 'Thank you, ' . $strName . ' for your purchase of XXXXXXXXXXXXXXX.';

        $clientHeader .= "\nMIME-Version: 1.0\n";
        $clientHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
        $clientHeader .= "This is a multi-part message in MIME format.\n";
        $clientHeader .= "--".$strSid."\n";
        $clientHeader .= "Content-type: text/html; charset=utf-8\n";
        $clientHeader .= "Content-Transfer-Encoding: 7bit\n\n";

        $clientHeader .= "Congrats, " . $strName . " paid $XX.00 to XXXX for XXXXXXXXXXXXXXXXXXXX!" . "\n\n";
        $clientHeader .= "Name: \n";
        $clientHeader .= $strName."\n\n";
        $clientHeader .= "Email: \n";
        $clientHeader .= $strEmail."\n\n";
        $clientHeader .= "Phone: \n";
        $clientHeader .= $strPhone."\n\n";

        $emailtoClient = mail($strEmail, "$clientSubject", $clientHeader); 

        header("Location: https://XXXXXXXX.com/thank-you");
        die();
    } else {
        echo "Cannot send mail.";
    }


} catch(\Stripe\Error\Card $e) {
    // Since it's a decline, \Stripe\Error\Card will be caught
    $body = $e->getJsonBody();
    $err  = $body['error'];
    print('Status is:' . $e->getHttpStatus() . "\n");
    print('Type is:' . $err['type'] . "\n");
    print('Code is:' . $err['code'] . "\n");
    // param is '' in this case
    print('Param is:' . $err['param'] . "\n");
    print('Message is:' . $err['message'] . "\n");
} catch (\Stripe\Error\RateLimit $e) {
    // Too many requests made to the API too quickly
     echo "Too many requests sent to Stripe's API too quickly";
} catch (\Stripe\Error\InvalidRequest $e) {
    // Invalid parameters were supplied to Stripe's API
    print_r($response);
    //echo ("test");
    echo " Invalid parameters were supplied to Stripe's API";
} catch (\Stripe\Error\Authentication $e) {
    // Authentication with Stripe's API failed
    // (maybe you changed API keys recently)
    echo " Authentication with Stripe's API failed";
} catch (\Stripe\Error\ApiConnection $e) {
    // Network communication with Stripe failed
    echo " Network communication with Stripe failed";
} catch (\Stripe\Error\Base $e) {
    // Display a very generic error to the user, and maybe send
    // yourself an email
    echo "You have encountered an error!";
} catch (Exception $e) {
    // Something else happened, completely unrelated to Stripe
     echo "Error: Something else happened, completely unrelated to Stripe";
}   

?>

Answer 1

Here is my solution. Use jQuery/Javascript. I advise adding the id="donation" to the donation input field, and also a placeholder="10.00" as an example of donation input.

jQuery(document).ready(function($) {
    var first_price = 0;
    var second_price = 0;
    var total_price = 0;

  $('#registration_fee').on( "change", function() {
    first_price = $('#registration_fee').val(); 
    first_price = parseInt( first_price );
    //console.log( first_price );
  });

  $('#donation').on( "change", function() {
    second_price = $('#donation').val(); 
    second_price = parseInt( second_price );
    //console.log( second_price );
  });

  $('#payment-form').on( "change", function() {
    total_price = first_price + second_price;
    //console.log( "total: " + total_price );
    $('.stripe-button-el span').html( "Pay with Card $" + total_price );
  });


});