Pass calculation total form calcuation widget to Stripe

Thats it. How to pass the value from the calculation widget total to Stripe amount total. I was told in the former thread to create this thread for a Javascript code to achieve this. Thanks.

Do you have form already that you wanted to accomplish this on or is this just a general question for something custom? 

Also I am currently thinking about ways to do this and I'm not sure what my colleague whom told you to open this thread had in mind or you may have had in mind for this matter. But I think that this may be a bit tricky to do but we'll see what we can figure out for it if it's feasible. One way I am thinking of currently is maybe we override the form's payment value to railroad the calculated value into it. 

Were you intending to use the calculation alongside the payment into stripe? Or is this going to be the calculated payment value itself?

Thanks for the quick response. This will be the calculated payment value itself. Yes I already have a form for this but this is also general as I may make new forms requiring this.

Thank you for your input, please provide the URL of the form you are referring to. My colleague should get back to you with a response on his suggested actions to achieve  what you need.

Thank you.

https://secure.myjotform.com/jsform/40882366100550

Thank you for sharing your form. Just want to confirm that the "Enter the above amount total" will be passed on to the redirection page once you hit submit or the "amount total" will automatically passed to "Enter the above amount total". We'll see what we can do and me and my colleague or whoever can come up with a custom javascript will let you know in this thread. 

The "amount total" will automatically passed to "Enter the above amount total". So when done instead of the user entering the above total, that total will have been passed to that field. And that is the amount that will be charged. I will hide the "amount total" field once this is complete. And again, thanks for your quick response. For a free service you guys cover your product well. I will be very happy to buy a subscription once I reach the limits.

Hello,

Here's a working copy of your form's source code: https://shots.jotform.com/titus/PaymentForm.html

You can copy the source code from this unlisted link and use it on your website: http://pastebin.com/NbhJH4Tp

How to do this by yourself:

A. To Implement, get your forms source code and add in the standard HTML page structure

B. Identify the input ID attribute for the two textbox fields - in this case:

1. Amount Total= input_15

2. Stripe Input field = input_16_donation

C. Next, add the following within the Amount Total field input tags -

onDISABLEDkeyup="sync(this)"

D. Next, add the following script right before the close of the form tags (</form>)

<script type="text/javascript">
function sync(textbox)
{
  document.getElementById('input_16_donation').value = textbox.value;
}
</script>

Notice the input id attribute for the stripe textbox is the one placed inside the function parenthesis.

E. Save your changes and publish your page - and your form should capture the total from the Amount Total field into the stripe entry field.

Please let us know if this helps.

Thanks for that. But the only problem I am getting now is that the calculation widget is not calculating the total as the user makes his selection. It just keeps the value at zero.

Hi,

Can you share to us the URL of the website where you have implemented this. We can check this further on your website.

As you can test on our colleague TitusN provided demo here https://shots.jotform.com/titus/PaymentForm.html the idea is working.

Make sure you also followed his provided instructions to accomplish it.

We will wait for your update

Thanks.

I may have shared the wrong pastebin link:

http://pastebin.com/NbhJH4Tp

Sorry about that.

You can copy the source code from there to use on your website.

Hi. Have been busy but am implementing it now. Will update soon. Thanks you guys are great!

Having problems with hosting the form on the site. How do I call the form from within an article? Basically I am inserting the form at the bottom of an article. When I do that using the <script> tag, nothing shows up. I have created a directory with the form and made the src point to that directory. When I link the form directly from outside the article, I get the form. For example if I make a menu link www.mypage.com/form i get the form but if I insert the embed script code into an article, the form does not show. I hope that explains it. Do I need to remove the html page structure for this? Or anything else?

Okay i just used the source without HTML struture and its called. So the form is there. But it leads with this text on the page when viewing: '); JotForm.setCalendar("7", false); JotForm.displayLocalTime("hour_7", "min_7", "ampm_7"); $('input_9').hint('ex: 8'); JotForm.description('input_10', 'Choose the vehicle type you would like'); $('input_13').hint('ex: 5'); $('input_18').hint('ex: 23'); JotForm.setStripeSettings('pk_live_G2KbsoExGFcxF9i6prAUd9G3', 'none'); JotForm.setCalculationValues("10|50|200|200", 10); });

Also it would be nice if it can call the CSS from the Jotform server. The calculation is not being done when values are entered. Can that be related to the leading text?

 

Update: Yes i want to do what i mentioned in the last post to host all files with CSS and JS on my server. But will need a good way to embed the form in an article. Hope you get what i am saying.

Also all permissions are set correctly. I have only changed the name of the folder that has the form sources.

@tuyeni

Since you are already hosting the form resources to your server, the only way to embed the form on your article is to use iframe embed code. You can also place the entire form source code, but I'm afraid it will cause script conflict so I would recommend using iframe.

You can use the following iframe if you want to and make sure to replace the link on the src value with your form URL and change the height so the form displays nicely on your article.

<iframe allowtransparency="true" src="http://www.yoursite.com/form/yourform.html" frameborder="0" style="width:100%; height:515px; border:none;" scrolling="no"></iframe>

If you need further assistance, let us know here. Regards!

Thanks very much guys. All good. Great support for a semi-free product!