The Micro Stripe demo front end.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Micro Stripe Checkout</title> | |
<meta charSet='utf-8' /> | |
<meta name='viewport' content='initial-scale=1.0, width=device-width' /> | |
<script src="https://js.stripe.com/v3/"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
<style> | |
* { | |
font-size: 15px; | |
font-variant: normal; | |
padding: 0; | |
margin: 0; | |
} | |
html { | |
height: 100%; | |
} | |
body { | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; | |
background: #F6F8FA; | |
color: #4C555A; | |
min-height: 100%; | |
-webkit-font-smoothing: antialiased; | |
} | |
main { | |
-ms-align-items: center; | |
align-items: center; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
height: 100vh; | |
justify-content: center; | |
} | |
.container { | |
max-width: 720px; | |
padding: 100px 0; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
} | |
.form-container { | |
display: block; | |
} | |
footer { | |
width: 100%; | |
padding: 40px; | |
text-align: center; | |
} | |
h1 { | |
font-size: 24px; | |
font-weight: 500; | |
text-align: center; | |
} | |
form { | |
width: 480px; | |
margin: 20px 0; | |
} | |
.group { | |
background: white; | |
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), | |
0 3px 6px 0 rgba(0,0,0,0.08); | |
border-radius: 4px; | |
margin-bottom: 20px; | |
} | |
label { | |
position: relative; | |
color: #8898AA; | |
font-weight: 400; | |
height: 40px; | |
line-height: 40px; | |
margin-left: 20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
-moz-flex-direction: row; | |
-ms-flex-direction: row; | |
-o-flex-direction: row; | |
flex-direction: row; | |
} | |
.group label:not(:last-child) { | |
border-bottom: 1px solid #F0F5FA; | |
} | |
label > span { | |
width: 80px; | |
text-align: right; | |
margin-right: 30px; | |
} | |
.field { | |
background: transparent; | |
font-weight: 400; | |
border: 0; | |
color: #31325F; | |
outline: none; | |
flex: 1; | |
padding-right: 10px; | |
padding-left: 10px; | |
cursor: text; | |
} | |
.field::-webkit-input-placeholder { color: #CFD7E0; } | |
.field::-moz-placeholder { color: #CFD7E0; } | |
button { | |
float: left; | |
display: block; | |
background: #666EE8; | |
color: white; | |
pointer: cursor; | |
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), | |
0 3px 6px 0 rgba(0,0,0,0.08); | |
border-radius: 4px; | |
border: 0; | |
margin-top: 20px; | |
font-size: 15px; | |
font-weight: 500; | |
width: 100%; | |
height: 40px; | |
line-height: 38px; | |
outline: none; | |
} | |
button:focus { | |
background: #555ABF; | |
} | |
button:active { | |
background: #43458B; | |
} | |
.outcome { | |
float: left; | |
width: 100%; | |
padding-top: 8px; | |
min-height: 24px; | |
text-align: center; | |
} | |
.success, .error { | |
display: none; | |
font-size: 13px; | |
} | |
.success.visible, .error.visible { | |
display: inline; | |
} | |
.error { | |
color: #E4584C; | |
} | |
.success { | |
color: #666EE8; | |
} | |
.success .token { | |
font-weight: 500; | |
font-size: 13px; | |
} | |
</style> | |
</head> | |
<body> | |
<main> | |
<div className="container"> | |
<h1>Test Checkout with Micro-Stripe</h1> | |
<form class="form-container"> | |
<div class="group"> | |
<label> | |
<span>Name</span> | |
<input name="cardholder-name" class="field" placeholder="Jane Doe" /> | |
</label> | |
<label> | |
<span>Email</span> | |
<input class="field" placeholder="youremail@domain.com" type="email" /> | |
</label> | |
</div> | |
<div class="group"> | |
<label> | |
<span>Card</span> | |
<div id="card-element" class="field"></div> | |
</label> | |
</div> | |
<button type="submit">Pay $25</button> | |
<div class="outcome"> | |
<div class="error"></div> | |
<div class="success"> | |
Success! Your Stripe token is <span class="token"></span> | |
</div> | |
</div> | |
</form> | |
</div> | |
</main> | |
<script> | |
var stripe = Stripe('pk_test_JS759ictlRv2JtrZ9aRgqFKR'); // @TODO replace with your public test key! | |
var elements = stripe.elements(); | |
var card = elements.create('card', { | |
style: { | |
base: { | |
iconColor: '#666EE8', | |
color: '#31325F', | |
lineHeight: '40px', | |
fontWeight: 400, | |
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto', | |
fontSize: '15px', | |
fontSmoothing: 'antialiased', | |
'::placeholder': { | |
color: '#CFD7E0', | |
}, | |
}, | |
} | |
}); | |
card.mount('#card-element'); | |
function setOutcome(result) { | |
var $form = $('form'); | |
var successElement = document.querySelector('.success'); | |
var errorElement = document.querySelector('.error'); | |
successElement.classList.remove('visible'); | |
errorElement.classList.remove('visible'); | |
if (result.token) { | |
// Use the token to create a charge or a customer | |
// https://stripe.com/docs/charges | |
successElement.querySelector('.token').textContent = result.token.id; | |
successElement.classList.add('visible'); | |
var token = result.token.id; | |
// Insert the token ID into the form so it gets submitted to the server: | |
$form.append($('<input type="hidden" name="stripeToken">').val(token)); | |
return token; | |
} else if (result.error) { | |
errorElement.textContent = result.error.message; | |
errorElement.classList.add('visible'); | |
} | |
} | |
function createCharge(token) { | |
$.ajax({ | |
type: "POST", | |
contentType: "application/json; charset=utf-8", | |
dataType: "json", | |
url: 'https://micro-stripe-api.twnsnd.co/', | |
beforeSend: function (xhr) { | |
xhr.setRequestHeader('Authorization', 'Bearer pk_test_JS759ictlRv2JtrZ9aRgqFKR'); | |
}, | |
data: JSON.stringify({ | |
"amount": 2500, | |
"currency": "usd", | |
"source": token | |
}), | |
success: function () { | |
alert('successfully charged!'); | |
}, | |
error: function (xhr, status, error) { | |
console.log(error.message, xhr, status) | |
} | |
}); | |
} | |
card.on('change', function(event) { | |
setOutcome(event); | |
}); | |
document.querySelector('form').addEventListener('submit', function(e) { | |
e.preventDefault(); | |
var form = document.querySelector('form'); | |
var extraDetails = { | |
name: form.querySelector('input[name=cardholder-name]').value, | |
}; | |
stripe.createToken(card, extraDetails).then(setOutcome).then(createCharge); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment