Using Stripe Input (Email Field) to Fill Another Input, Without Showing Said Input
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a small app and I'm looking to expand on it some. Currently I can fill an input, and that input it pushed to the Stripe checkout form. This is great but I wondered if there was a way to have it use the email submitted in the stripe form for the input, so that I could hide said input.

In other words, I'm trying to remove the need to have 2 inputs in the apps.

Here is what I'm working with now: https://jsfiddle.net/code4ever/uLrpmxv6/

Please let me know if I can be any more clear to help you in creating a solution!

Thank you.

Are you trying to remove the input box "your email here" from the page?
kostasx 16 days ago
Yes, exactly
sharper 16 days ago
awarded to kostasx

Crowdsource coding tasks.

2 Solutions


You simply need to delete the email parameter from the stripe handler.

doing that, Stripe handle will add the email input in the modal.

working demo: https://jsfiddle.net/uLrpmxv6/7/

you could also delete the form from the webpage, and add on button click listener, since nothing is used in that form when creating the handler.

just because i haven't much free time, didn't made that. sorry about that ;)

i think the most important thing is to highlight to solution.

I appreciate your guidance! Thanks!
sharper 16 days ago
isn't that what you was looking for?
Chlegou 16 days ago
Hi, yes, but I awarded someone already. Thanks for your time
sharper 16 days ago
i was first by the way. you are free to accept any solution you want, but wasn't better to reward the first legit solution? like anyone does?
Chlegou 16 days ago
Honestly I think what happened was the latest solution was first in my email, the others were condensed in the thread, so I clicked it- followed the directions, and then saw yours. I feel bad but I can't afford to award every solution
sharper 16 days ago
It seems to me that the solution provided here was missing the part where the email from the Stripe form was automatically added to the custom input field and then POST-ed via the form. As I understood, the task was not only to disable or remove the custom email input field, but also use the email from the Stripe form and use it for the subsequent form request as seen on my solution: https://jsfiddle.net/uLrpmxv6/19/
kostasx 16 days ago
That’s correct!
sharper 16 days ago
Winning solution

This is the code to use:

HTML:

  <input type="hidden" id="cmail" name="Customer Email" placeholder="your email here">

JS:

$(function() {
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    locale: 'auto',
    amount: 8500,
    name: "Company",
    description: "Product",
    zipCode: true,
    billingAddress: true,
    shippingAddress: true
  });
  $("#formSpreeElm").on("submit", function(e) {
    e.preventDefault();
    handler.open({
      token: function(token) {
        if (token) {
          console.log(token.email);
          $("#formSpreeElm").find("#cmail").val(token.email);
          // Stripe form was submited;
          $("#formSpreeElm").off("submit").submit();
        }
      }
    });
  });
});
Thank you. Looks great! I'll tinker with this soon, too. :)
sharper 16 days ago
View Timeline