TOPIC:

Once Stripe Payment is Sumittied form is cleared regarless of payment errors 2 weeks 17 hours ago #245945

  • Topic Author
  • cheddarnines
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 36
  • Thanks: 0
OK here is what I think I did to get that alternate version of Stripe Working.

The key factors here are that Stripes modal appears above the form before it is submitted and only submits if there are no errors and the payment goes though.

This way if the user dismisses the Stripe payment modal, there are payment errors, or other problems the users form entries are all still in tact on the form.

I did this a long time ago and forgot how I even coded this thing, so hopefully this summarized version is correct. If not, I have attached the package which is working (its directly from the site I built). Note that all of this was from stripes original API but I am sure that a similar deployment could be used with their latest API to allow the new google / apple pay features ETC . . .

Summary of the code from the Signs 2 Fleet site:
//you need this submit piece in the form
<?php
//REMOVE PHP TAGS  you done need them in a submit piece in Breezing Forms!!!!!!
$this->execPieceByName('ff_InitLib');
require_once JPATH_BASE .'/stripe-php-1.14.1/lib/Stripe.php';
Stripe::setApiKey("sk_test_THE-TEST-OR-LIVE-SECRET-STRIPE-KEY-GOES-HERE");

if($_POST) {
$token = $_POST['stripeToken'];
$description = ff_getSubmit('signType');
$amount = ff_getSubmit('amountowing');
$amountStriped = str_replace('.', '', $amount);
try {
$charge = Stripe_Charge::create(array(
 "amount" => $amountStriped, // amount in cents, again
  "currency" => "usd",
  "card" => $token,
  "description" => $description)
);
} catch(Stripe_CardError $e) {
// The card has been declined Do Something About it
}
}
//REMOVE PHP TAGS !!!!!!
?>



// You need this in your Initialization Script
function ff_YOUR FORMS INIT SCRIPT NAME_init()
{

function ff_buy_a_sign_init()
{
var handler = StripeCheckout.configure({
    key: 'pk_test_THE-TEST-OR-LIVE-PUBLIC-STRIPE-KEY-GOES-HERE', //pk_test or pk_live
    token: function(token, args) {
		var token = token.id;
		var form = jQuery("#ff_form1");
		form.append(jQuery('<input type="hidden" name="stripeToken" />').val(token));
                form.get(0).submit();
        //ff_submitForm();
    }
  });

jQuery(document).ready(
    function()
    {
      jQuery( "#ff_elem382" ).click(function(e) {
	  var email = ff_getElementByName('email_repeat').value;
	  var description = ff_getElementByName('signType').value;
	  var amount = (ff_getElementByName('amountowing').value)*100;
	  handler.open({
		  image: '../images/logo.png',
		  name: 'Signs2Fleet',
		  email: email,
		  description: description,
		  amount: amount
    });
    e.preventDefault();
      });
    }    
);
    
} // ff_ YOUR FORMS INIT SCRIPT NAME_init

    
// this is for your submit button in this example the button was named "submit_Payment"
    function ff_submit_Payment_action(element, action)
{
    switch (action) {
        case 'click':
jQuery(function($) {
	jQuery('#ff_form1').submit(function(event) {
		var form = jQuery(this);
	
		// Disable the submit button to prevent repeated clicks
		form.find('button').prop('disabled', true);
	
		Stripe.card.createToken(form, stripeResponseHandler);
	
		// Prevent the form from submitting with the default action
		return false;
	});
});
            break;
        default:;
    } // switch
} // ff_submit_Payment_action

    
    
    
    
// You need some form fields and or hidden fields to deal with your total charge and it HAS TO BE IN CENTS
// In this example there are various charges for extras and a posible discount    
 function ff_signtally(element, action)
{
// Check to see if its a trailer sign
var signStyle = ff_getElementByName('signType').value;//the sign type
console.log("the sign type is " + signStyle);

var quantity = Number(ff_getElementByName('quantity').value); // how many signs

var castVinylCharge = 0; //zero out all extra charges and discounts 
var laminationCharge = 0;
var customArtCharge = 0;
var discount = 0;

var orderTotal = 0; // zero out the totals
var finalTotal = 0;

//CALCULATIONS BASED ON FORM DATA WOULD GO HERE


console.log("the discount is " + discount); // whats the discount
console.log("the discount totals " + (orderTotal * discount)); // whats the total of the discount
orderTotal = orderTotal - (orderTotal * discount); // re tally the order with the discount
console.log("the total after discount is " + orderTotal);

orderTotal = orderTotal + customArtCharge; // add in the art charge
console.log("the total after the art charge is " + orderTotal);

finalTotal = orderTotal.toFixed(2); // change the order total to 2dec places for dysplay
console.log("the total to display is "+finalTotal);
ff_getElementByName('amountowing').value = finalTotal; // put the total in the total field
 
//THIS IS THE IMPORTANT BIT FOR STRIPE - a hidden field is used to store the total named "amountToStripe" that vaule is converted to CENTS    
ff_getElementByName('amountToStripe').value = finalTotal * 100; //convert amount to cents
console.log("the total being sent to stripe in cents is " + ff_getElementByName('amountToStripe').value);
}

I don't recall if I had to put some specific Stripe PHP files on the server as well. I think I just integrated that into Breezing forms pieces. You do however have to call the stripe checkout js in the head for sure like this:
<script src="https://checkout.stripe.com/checkout.js"></script>

Attached is the package of the working form for truck signs that I built with all of this implemented. Hope this helps.

And if you install the package you just have to change the Stripe Keys in 2 places (the form's Initialization Script at the top, and in the submit piece which is "Charge on Stripe" - ff_chargeOnStripe) both in the package. Note that there is a lot of other test pieces and scripts in the library that have stripe in the names and those were other tests I used while getting this stuff to work and can be ignored.

Cheers - DS
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: Post by cheddarnines.

Once Stripe Payment is Sumittied form is cleared regarless of payment errors 2 weeks 15 hours ago #245963

  • TheMuffinMan's Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Posts: 9789
  • Karma: 167
  • Thanks: 785
Wow, thank you! I gonna try it out now.

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.046 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

Summer Sale!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!