1

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 = '[email protected]';
    $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" . "<" . "[email protected]" . ">\n";
        $clientHeader .= "Reply-To: " . "[email protected]" . "\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";
}   

?>

1 Answer 1

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


});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.