-
Notifications
You must be signed in to change notification settings - Fork 47
/
Copy pathbootstrap_stripejs_better.html
143 lines (132 loc) · 6.14 KB
/
bootstrap_stripejs_better.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Stripe.js example form</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>A better Bootstrap Stripe.js payment form</h1>
</div>
</div>
<!-- Better Bootstrap payment form starts here -->
<!-- Use Jquery in this example -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Font Awesome for prettier icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Stripe.js to collect payment details -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- Jquery payment library for nicer formatting -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.4.1/jquery.payment.js"></script>
<script>
// Set your Stripe publishable API key here
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
$(function() {
var $form = $('#payment-form');
$form.submit(function(event) {
// Clear any errors
$form.find('.has-error').removeClass('has-error');
// Validate the form isn't empty before requesting a token
invalidForm = false;
$('#payment-form input').each(function() {
if ($(this).val() == '') {
$('#'+this.id).parent('.form-group').addClass('has-error');
invalidForm = true;
}
});
if (invalidForm){
return false;
}
// Disable the submit button to prevent repeated clicks:
$form.find('.submit').prop('disabled', true).html("<i class='fa fa-spinner fa-spin'></i> Making payment...");
// Request a token from Stripe:
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
// Formatting
$('#number').payment('formatCardNumber');
$('#cc_exp').payment('formatCardExpiry');
// Determine & display the card brand
$('#number').keyup(function() {
card_type = $.payment.cardType($('#number').val());
card_type ? $('#card_type').html("<i class='text-success fa fa-cc-"+card_type+"'></i>") : $('#card_type').html("");
});
});
function stripeResponseHandler(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger');
$form.find('#' + response.error.param).parent('.form-group').addClass('has-error');
$form.find('button').prop('disabled', false).text('Pay $20'); // Re-enable submission
}
else { // Token was created!
$form.find('.submit').html("<i class='fa fa-check'></i> Payment accepted");
// Get the token ID:
var token = response.id;
// Insert the token and name into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// Submit the form:
$form.get(0).submit();
}
}
</script>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4><span id="card_type"></span> Make a $20 payment</h4>
</div>
<div class="panel-body">
<form action="" method="POST" id="payment-form">
<div class="payment-errors"></div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Cardholder Name</label>
<input class="form-control input-lg" id="name" type="text" data-stripe="name" placeholder="Jimmy Dean">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Card Number</label>
<input class="form-control input-lg" id="number" type="tel" size="20" data-stripe="number" placeholder="4242 4242 4242 4242">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>Expiry</label>
<input class="form-control input-lg" id="cc_exp" type="tel" size="2" data-stripe="exp" placeholder="MM / YY">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>CVC</label>
<input class="form-control input-lg" id="cvc" type="tel" size="4" data-stripe="cvc" placeholder="555" autocomplete="off">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-lg btn-block btn-success submit" type="submit">Pay $20</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Better Bootstrap payment form ends here -->
</div>
</body>
</html>