Last active
November 27, 2018 20:30
-
-
Save ColeTownsend/2c2dbc1be1ae660c35b23cc9de9828df to your computer and use it in GitHub Desktop.
The Micro Stripe demo front end.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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