can you make a video of how to add this to a bootrap studio project. I know thats easy for you. But its the last step in me "committing" to bootstrap. Thanks! I will pay you to make the video. Thanks!

How do l remove the spaces in the credit card number and also remove the Expiry date sign "/" when submitting the form?

Hey guys I am sorta new to using these types of things, but my question is how does the form know the amount to charge (if there are multiple plans) and also can we specify for it to be only a 1 time payment OR subscription. Sorry for the lack of knowledge I'm trying to learn all I can. Thank you.

Josh

I have updated the snippet so the form will not accidentally send credit card info to users if JavaScript is disabled (or you accidentally messed up the JavaScript when you copied and pasted it).

Warning! This form is a pretty big security risk. Stripe's API clearly discourages using the "name" property of the inputs to collect the values. This form is pretty nice, and I'm going to use it, but it'll need to have the DOM changed to reflect the recommended way here: https://stripe.com/docs/tut...

OP, I'd suggest using the "data-stripe" attribute and let Stripe.js grab the values for the token from there.

Just a heads up!

I see what you're saying, but disagree that its a big security risk. The reason the Stripe docs do not use the "name" attribute in that example is because they are afraid of accidentally sending the credit card data to the server. This is because they are using the form submit() function, which would normally send all the fields in the form. However, I'm not using the form submit at all (I call e.preventDefault() first thing) and instead use AJAX to send the token to the server.

// AJAX - you would send 'token' to your server here.
$.post('/account/stripe_card_token', { token: token })

And a small aside - I don't think there is any security advantage to using data-stripe attributes vs name attributes. And the jQuery validation plugin uses the name attributes so removing them would mess it up.

It's because in the instance that a browser has javascript disabled, or a multitude other reasonable issues that causes the javascript to not be executed as expected (e.g., a typo on the ID of the form, a missing closing brace in some other function that causes all execution to fail, etc.) then there is zero chance you accidentally end up with credit card or PII submitted to your server, and in turn accidentally making it's way into log output/exception tracking services/whatever.

So what I have done is:
1. changed the subscribe button from type=submit to type=button. Therefore the form is never submitted. (Thus no need to use e.preventDefault() to cancel the default submit action of POSTing.)
2. set the form's action="javascript:void(0);" so the default action is not POSTing. So even if the form IS submitted by manually triggering it with your own custom code it simple does nothing.

I tested the new code with JavaScript turned off, and clicking the button will not submit the form.

For the record, I do not use the data-stripe attributes for two reasons. One, jQuery Validate appears to require "name" attributes. Two, I cannot simply use data-stripe="exp-month" or data-stripe="exp-year" because my date is combined in one field. If anyone has a solution to either of these, I'm all ears.

Ahhhhh... that makes sense. So it's not insecure as long as it works as intended. But if JavaScript is disabled, or people copy and paste the HTML into their own project without the JavaScript, then the form submit button becomes a hazard. I will try to update this snippet to be more robust in the case of JavaScript errors.

Hi William, will you make any updates based on the discussion here?

I did actually, but the disqus comment is out-of-order somehow.
See https://disqus.com/home/dis...

Nice.

If I download the code and just run the html-file without any editing, i get an error on row 235 "Can't find variable: validator". Any ideas?

When i click "Start Subscription", nothing happens.

if the visitor clicks 2 times on pay accidentally He will be charged twice, here is the fix for that http://bootsnipp.com/user/s.... Kindly review it and merge
Thnx

Good catch! Added the fix.

I think what imran was trying to say a few months back was the form error validation doesn't work. If you enter a good credit card number with, lets say a bad expiry date for example, and the card is declined the form will still say payment successful. The end user has no idea the card was declined and their subscription is not active.....any insight?

Try opening it in a separate window. The embedded preview doesn't operate properly.

How do you pull out the customers stripe id? and send it to a php variable??? :) noob question thanks in advance

Hopefully you figured this out a while ago, but the relevant part of the code is:
```
// AJAX - you would send 'token' to your server here.
$.post('/account/stripe_card_token', {
token: token
})

```

Then your PHP page would be '/account/stripe_card_token' and have something like:
```
<?php
$card_token= trim($_POST["token"]);
// Do Stripe server-side API stuff here
?>
```

AFAIK the card_token does *not* have a customer id associated with it. What I do is immediately create a Stripe customer object for every user who signs up, and then associate the credit card token to that customer.

Hey everybody, I have updated the BootSnipp so that it handles re-sizing better! I also updated it from Bootstrap 3.0.0 to 3.3.0 (which only matters for the visible-xs-inline class that affects whether it displays "EXPIRATION DATE" or "EXP DATE" as far as I know.)

I just noticed this snippet has gotten over 17K views and over 70 likes, making it one of the top-rated snippets at the moment! Thanks everyone! I am so humbled, and surprised, and happy that people liked this. Maybe I'll see it on a website someday? :)

localhost not complete work and many issue 1: required attribute 2: not check correct card number and all input filed are not correct work.
plz help me.

Sounds like you don't know what you're doing... sorry?

Yes, resizing this browser window caused the issues Googy pointed out. However, adding an overflow:hidden attribute to the panel-heading class fixed a lot of the issues by itself. Still a few issues between the text "Payment Details" and the card logos, but at least they stay within their container now when resized.

Yeah, sorry about the re-sizing issues. Edit: I've improved resizing, it's much better now.

Good work, has a lot of re-sizing issues though.

Thanks! Yeah. It does not resize well. At all. This was for my first bootstrap project, and I didn't think about making it responsive. I started with some else's UI and added the form validation and Stripe integration.

Edit: It resizes better now.

Pretty good thanks, some minor usability notes:
- Spaces should be allowed to make number entry easier (they can be stripped on submit)
- The CC type should be auto-selected based on the entry

- "Spaces should be allowed"
I'll do one better, and make credit card number input have fancy restrictive formatting via the jQuery.payment library. Also the expiry date!
- "The CC type should be auto-selected"
Well, if I get time that would be cool. But I'd have to a) auto-detect card type and b) have a decent collection of CC images.

clean design, like it! (y)

Thanks!