Stripe Custom Integration Code Syntax Error

[DrOAPRN]

Does any one know why the following code produces a DreamWeaver syntax error for the input type line of code following the form closure tag?

//JavaScript Document

<form id="myForm" action="XXXXXX" method="POST">

    <input type="text" id="amount" name="amount" />

    <input type="hidden" id="stripeToken" name="stripeToken" />

    <input type="hidden" id="stripeEmail" name="stripeEmail" />

    <input type="hidden" id="amount" name="amount" />

</form>

<input type="button" id="customButton" value="Pay">

var handler = StripeCheckout.configure({

    key: 'pk_test_hxEmKqbOV4MKCIw0PcbUgdqX',

    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',

    token: function (token) {

        $("#stripeToken").val(token.id);

        $("#stripeEmail").val(token.email);

        $("#amount").val($("#amount").val() * 100);

        $("#myForm").submit();

    }

});

$('#customButton').on('click', function (e) {

    var amount = $("#amount").val() * 100;

    var displayAmount = parseFloat(Math.floor($("#amount").val() * 100) / 100).toFixed(2);

    // Open Checkout with further options

    handler.open({

        name: 'Demo Site',

        description: 'Custom amount ($' + displayAmount + ')',

        amount: amount

    });

    e.preventDefault();

});

// Close Checkout on page navigation

$(window).on('popstate', function () {

    handler.close();

});

</body>

</html>

Thanks!

O

[Rob Hecker2 · Accepted solution]

Your form block is HTML. You don't switch to javascript after the form. (ex: <script type="text/javascript" >)

Also, your input button is meaningless unless you include it within the form block.

I use STRIPE with PHP. The script I use is very different from what you have. Are you working from one of the sample scripts that STRIPE provides?

Lastly, you should post your STRIPE questions in the STRIPE forum. I don't think many people here are using it.

[DrOAPRN]

1.  Thank you so much for your response!

2.  The code is from [Stripe] Checkout w/ user-specified amount - JSFiddle

I am trying to set up a custom form where the customer requests a pay by the minute consultation process.

As envisioned it would work like this:

a.  Customer chooses the number of minutes they want to buy.

b.  The number of minutes they chose is multiplied by a dollar amount and converted to an amount to be charged.

c.  The amount appears on the screen.

d.  The customer clicks pay to initiate the payment process

e.  Once payment is authorized, customer is notified on screen that "Thank you, your payment has been accepted.  Your session will start in a minute or so."

As I understand it, I need javascript to implement such a scenario.  Although, I'm not very proficient in php or javascript; I'm comfortable with DW; so, I thought I should try to use it to implement the Stripe payment process using the JSFiddle code.

3.  When you suggest using the Stripe forum, are you suggesting there is a Stripe forum on Adobe or were you advising me to try one sponsored by Stripe?

4.  If you can think of another way for me to implement the above payment process, I am open to anything that works and is inexpensive to implement.

Thanks again for your speedy and very helpful response!

[Rob Hecker2]

Forget that jsfiddle code.

If your coding skills are not strong, the STRIPE website says: " If you'd rather not build your own payment form, consider Checkout, our embedded, optimized payment tool. They provide a tutorial to walk you through that integration."

To write your own code, the API reference has many examples in Ruby, Python, PHP, and Java.

STRIPE uses javascript heavily, so whatever integration you use, it will include some javascript AJAX.

2. The interaction that precedes the payment process is probably best handled with jQuery and AJAX. You will need to work through some jQuery training, with a focus on AJAX. jQuery makes building javascript processes easier for those who lack strong javascript skill.

Is the consultation going to be through a chat session? or VOIP? Have you figured out how to combine it with the website and payment process?

If you don't have strong coding skills, you may find it very difficult to accomplish what you are after. You might see if there is a WordPress plug-in that provides this functionality. There are WordPress plug-ins that integrate with STRIPE, such as WooCommerce.

3. No, there isn't a STRIPE forum at the Adobe forum site, but STRIPE provides some support. Looks like they don't actually have a forum, but you can contact their staff via email and IRC.

[DrOAPRN]

Thanks again, Rob!

I, LOL, was referred to the Fiddler code by Stripe.  I have used Webplus and DW over the years to design and publish websites (DW since its macromedia debut) with good results and few problems.  I think this is because my websites have been pretty simple free, health education information sites that I published as a community service (see www.bodymeasures.info).  

And, yes, the consults will be by live chat.  I was planning to go with Zenchat but like the chat email system used by UpWork.  I saw it after using UpWork to hire a freelancer to implement my Stripe payment process.  Needless to say, the freelancer didn't get the job done and so I contacted Stripe for advice. 

I also wish to put a soft bell-tone start and stop timer in the process and allow customers to add more time if they choose or end their session.  But that is way above anything I would attempt to do myself.

Do you do any of your Stripe and DW work on a fee for service basis?  If so, what is your business contact info?

[Rob Hecker2]

Yes, I can create what you need. You can click my photo to see my email address.

I require a $100 payment (via STRIPE) before an initial 1 hour phone consultation with a new client.

After the phone consult, I prepare a detailed proposal with a cost. Generally, payment of 1/2 the project cost is expected before I begin work, with the remainder due after completion. For your project, I would anticipate the total cost would be $5000 or more. There are many details of your project we have not yet identified. Would your clients have accounts? What happens if no one is available to take a consultation when someone registers for one? How many consultants do you have? If more than one, a way of tracking and reporting time would be needed.

Normally, code I write is licensed to you but owned by me, meaning that you cannot sell it or give it away.

If you are interested in working with me, send me an email and I will send you a link to pay for the initial consultation. You can include questions and additional info in that email.

If the option to use me is out of your budget, then I think you should explore the WordPress option, although a complete solution using that method could still involve coding challenges.

R

[DrOAPRN]

I'm pretty sure that I don't want a WP solution. 

I've dabbled back and forth and taken many tutorials over the years because I'm interested in webdesign as a useful hobby that is something akin to knowing how to change the oil in one's car but taking it to the dealer for its tuneups.

I've dabbled back and forth and taken many tutorials over the years because I'm interested in webdesign as a useful hobby that is something akin to knowing how to change the oil in one's car but taking it to the dealer for its tuneups. 

Thanks again.  Unfortunately, you are outside my budget but I will definitely keep you in mind!

[Rob Hecker2]

you are outside my budget

I understand.

Your project will involve writing backend programming code, integration with a database, and some fairly involved javascript (or jQuery). Lynda.com is a tutorial website that is not free but has good quality tutorials on all the technologies you would need to put together your solution.

Best of luck to you!

[DrOAPRN]

I appreciate your kindness and advice.  I have found the Stripe tech support engineers to be be equally kind and helpful. I did not ask them about my entire workflow process, just the Stripe payment part.  I'm sharing their response just  in case it may be useful to future folks searching for help about Stripe.

     In most cases, Stripe users (merchants) know exactly how much they're planning on charging their customers, so they can fill Checkout's `data-amount` attribute with the appropriate value. However, in some cases such as yours, the amount must be explicitly set by the customer themselves. This is also something that is supported by Stripe, but it requires some additional complexity.

     Instead of using Checkout's "simple integration", you would have to use the "custom integration" [1]. The custom integration lets you bind Checkout's popup form to any event (via Javascript), and dynamically supply configuration values to Checkout. In this case, what we want to do is:

1. have a field where the customer (patient) can input the amount
2. use the field's value to configure Checkout's `amount` parameter

     Here is a very basic example that does just this: https://jsfiddle.net/ywain/g2ufa8xr/. In this example, there is a text field (`amount`) and a "Pay" button. When the button is clicked, the Javascript code takes the value from the `amount` field, multiplies it by 100 (Checkout expects an amount in cents, and presumably customers prefer to enter an amount in dollars) and uses it when invoking Checkout's popup (via `handler.open(...)`).

     When the customer fills the form, the `token()` callback function is called which sets the values of the `stripeToken`, `stripeEmail` and `amount` fields in the form and submits it to the server. Upon receiving those values, your backend (PHP) code can use them to create the actual charge [2], using code very similar to what you shared in your previous message (your code expects the amount to be in the `payment_amount` POST parameter, while the JSFiddle example I shared uses the `amount` POST parameter instead, but the rest of the code should work without any changes).

     I hope this helps, but as always, don't hesitate to reply if anything's unclear!

I've taken a fair number of Lynda's courses and found most to be as you say.  Also, I like your website!