Need help with a JS snippet

I’m helping a friend with a website, and we’re trying to integrate a payment button. The site he’s dealing with to process payments provides code snippets, and the one we’re using looks like this:

<form action="/charge" method="POST">
  <script
    src="https://checkout.foo.com/checkout.js" class="button"
    data-key="our_key"
    data-name="Site name"
    data-description="my item"
    data-amount="20">
  </script>
</form>

What we’re trying to do is use forms to feed some of those items (like the amount and description). I’ve tried a few things to get the info from the fields into those spots but they’re just treated as plain text.

Does anyone have any tips for making this work?

What payment company are you going through? Do they have instructions to follow?

Stripe.

They do, but I think these widgets are designed for single items, like a book or t-shirt, or whatever. Something of a set price. With us, we’re scheduling something that’s time-based, so I need to be able to alter the amount depending on the hours purchased.

Do I understand you correctly that you want to alter values in the form, based on other criteria (such as hours purchased)?

Exactly. I want to be able to feed form values from an on the same page, preferably without having to submit twice. When I click the widget’s submit button, the values are taken from the elements.

I tried: document.getElementsByName(‘input_name’); but the taget page just returns that text rather than the value.

Could you post a link?

A link to what? The form is on the inside of the admin section of the site, which isn’t live yet.

A link to the form would have been good, but if not possible, never mind.

Other than that, given the following markup:

<form action="/charge" method="POST">
  <script
    src="https://checkout.foo.com/checkout.js" class="button"
    data-key="our_key"
    data-name="Site name"
    data-description="my item"
    data-amount="20">
  </script>
</form>

You can manipulate the data attributes like so:

var script = document.querySelector("form > script");
console.log(script.getAttribute("data-key"));  // our_key
script.setAttribute("data-key", "my_key");
console.log(script.getAttribute("data-key"));  // my_key

However, I don’t know if that’ll really help.

Could it be that this script injects some markup and that is what you are trying to alter?

What the snipped does is create a “Pay Now” kind of button.

<button id="customButton">Purchase</button>

When you click it, you get a popup box that says:

1 Brick
$20

I want to be able to change the quantity and price without having to create a button for every possible example. I figured there must be a way to pass form variables to the values of data-description and data-amount.

The problem is, the webpage itself is template-driven, and in the CMS you can create and edit widgets, but I don’t think you can really do any real PHP coding. Also, this is all done on one page with no submit, so it sort of needs to be client-side. The only submit you do is the one that submits the payment details (above).

Unfortunately, I’m lousy when it comes to JS so I can’t get my head around what I need to do. Maybe if I had an onClick event on that submit button that grabs whatever’s entered into the form fields and plugs it into those two attributes it would work.

That seems reasonable, let’s give that a try:

The form:

<form>
  <p>
    <label for="amount">Amount: </label>
    <input id="amount" type="text" />
  </p>
  <p>
    <label for="description">Description: </label>
    <input id="description" type="text" />
  </p>
</form>

The JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $("button").on("click", function(){
    alert(
      "Amount: " + 
      $("#amount").val() + 
      "\nDescription: " + 
      $("#description").val()
    );
    
   // $("script").data("amount", amount);
    //$("script").data("description", description);    
  });
</script>

A couple of things:

  • I’m using jQuery for convenience whilst trying to find a solution. When we arrive at one, we can also code it in plain JS if you desire.
  • The script does nothing other than alert the values entered once the button is pressed. Once this is working, you’ll want to uncomment the two lines which change the data attributes.
  • The selectors I have used are very generic. You will probably need to adapt them (especially the script one). In this case it might be better to give the script an id or some such.

I hope that helps, but without seeing the page you are working on, this is a bit like taking shots in the dark.

Yep this gives me the alert box. Studying the original code more, I think what’s happening is that the JS from the checkout site is building it’s own form on the fly, or at least building something that’s generating the checkout code, so my form is ignored completely.

I noticed that they have a custom option (https://stripe.com/docs/checkout#integration-custom) but that’s even more yikes-invoking javascript.

And I get you about being in the dark. This site is basically a template-driven thing that provides a CMS-like interface, but the code is very icky. There are places to paste your own CSS, but you can do that then refresh the site and somehow nothing changes. It’s very aggravating!

Thanks for taking the time to help. I’m thinking we need to hire a JS person and let him into the site to help out.

Yup. I would guess so.

Up to you, but if you want to make me a custom login with limited privs, I don’t mind having a look for you.

Ok, I got my friend to set up a demo link that everyone can see here

Maybe this will help. The form in question is at the bottom of the right column. I’ve put the original code back in to see how it works.

Cool!

So based on that page, could you outline the steps to reproduce your problem.

Basically the idea is to get the form to be accept a dynamic value, based on an or

Yup, but I’m afraid you’re out of luck.
Load this page in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="your-key" data-image="/logos/profile/-logo-frederick-md-927.png" data-name="Demo Site" data-description="2 widgets ($20.00)" data-amount="2000"></script>
</body>
</html>

Then inspect the button using your browser tools (right click > inspect element), you see that it injects the following markup:

<button type="submit" class="stripe-button-el" style="visibility: visible;">
  <span style="display: block; min-height: 30px;">Pay with Card</span>
</button>
<iframe frameborder="0" allowtransparency="true" src="https://checkout.stripe.com/v3/someNumbersAndLetters.html" name="stripe_checkout_app" class="stripe_checkout_app" style="z-index: 9999; display: none; border: 0px none transparent; overflow-x: hidden; overflow-y: auto; visibility: visible; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.00392157);"></iframe>

The script that is creating and controlling that popup is sitting in that iframe on a different domain.
Your browser will not let you manipulate it, as this would violate the same origin policy.

If I was you, I would as Stripe support as to the recommended course of action in this case.

I see now, and ew! But thanks for all your help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.