Skip to content

Instantly share code, notes, and snippets.

@jakul

jakul/gist:460a0d3e8bb3c716517c

Created May 16, 2014 10:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jakul/460a0d3e8bb3c716517c to your computer and use it in GitHub Desktop.
Save jakul/460a0d3e8bb3c716517c to your computer and use it in GitHub Desktop.
Download ZIP
stripe_error
Raw
gistfile1.html
<html><head><script src="https://js.stripe.com/v1/"></script><script src="/v3/checkout/desktop.js?version=5OyUDUGyG0xeMH4JaPbJjQ"></script><script src="/js/raven.min.js?version=l0KqNMHa_QhUOamdDvGk-A"></script><link rel="stylesheet" href="/v3/checkout/desktop.css?version=hvwqnmNhaMPYEMeoD4oDFQ">
<meta charset="utf-8">
<title>Stripe Checkout</title>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<style>
.stripeErrorMessage {
position: absolute;
top: 160px;
left: 40px;
right: 40px;
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
color: #050507;
text-align: center;
display: none;
}
</style>
</head>
<body class="appView iframe desktop">
<style type="text/css">
.stripeInitialSpinner {
position: absolute;
top: 35%;
left: 50%;
margin-left: -14px;
width: 28px;
height: 28px;
z-index: 1000;
opacity: 1;
display: none;
}
.stripeInitialSpinner.animated {
-webkit-animation: fadeIn 0.25s ease-in 1.5s 1 forwards;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-animation: fadeIn 0.25s ease-in 1.5s 1 forwards;
-moz-transition: opacity 0.25s ease-in-out;
animation: fadeIn 0.25s ease-in 1.5s 1 forwards;
transition: opacity 0.25s ease-in-out;
}
.stripeInitialSpinner.hidden {
opacity: 0;
}
@-webkit-keyframes fadeIn {
from {opacity:0;} to {opacity:1;}
}
@-moz-keyframes fadeIn {
from {opacity:0;} to {opacity:1;}
}
@keyframes fadeIn {
from {opacity:0;} to {opacity:1;}
}
.stripeInitialSpinner > span {
background: #050507;
left: 12px;
width: 4px;
height: 8px;
position: absolute;
border-radius: 2px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.stripeErrorMessage {
position: absolute;
top: 160px;
left: 40px;
right: 40px;
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
color: #050507;
text-align: center;
}
span.stripeInitialSpinnerFade0 {
-webkit-transform: rotate(-45.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade0 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade0 {
0% {opacity:0;}
25% { opacity:1; }
0%,100% { opacity:0.0000 }
}
span.stripeInitialSpinnerFade0 {
-moz-transform: rotate(-45.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade0 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade0 {
0% {opacity:0;}
25% { opacity:1; }
0%,100% { opacity:0.0000 }
}
span.stripeInitialSpinnerFade0 {
transform: rotate(-45.0deg) translateY(16px);
animation: stripeInitialSpinnerFade0 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade0 {
0% {opacity:0;}
25% { opacity:1; }
0%,100% { opacity:0.0000 }
}
span.stripeInitialSpinnerFade1 {
-webkit-transform: rotate(0.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade1 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade1 {
11% {opacity:0;}
36% { opacity:1; }
0%,100% { opacity:0.1250 }
}
span.stripeInitialSpinnerFade1 {
-moz-transform: rotate(0.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade1 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade1 {
11% {opacity:0;}
36% { opacity:1; }
0%,100% { opacity:0.1250 }
}
span.stripeInitialSpinnerFade1 {
transform: rotate(0.0deg) translateY(16px);
animation: stripeInitialSpinnerFade1 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade1 {
11% {opacity:0;}
36% { opacity:1; }
0%,100% { opacity:0.1250 }
}
span.stripeInitialSpinnerFade2 {
-webkit-transform: rotate(45.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade2 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade2 {
21% {opacity:0;}
46% { opacity:1; }
0%,100% { opacity:0.2500 }
}
span.stripeInitialSpinnerFade2 {
-moz-transform: rotate(45.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade2 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade2 {
21% {opacity:0;}
46% { opacity:1; }
0%,100% { opacity:0.2500 }
}
span.stripeInitialSpinnerFade2 {
transform: rotate(45.0deg) translateY(16px);
animation: stripeInitialSpinnerFade2 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade2 {
21% {opacity:0;}
46% { opacity:1; }
0%,100% { opacity:0.2500 }
}
span.stripeInitialSpinnerFade3 {
-webkit-transform: rotate(90.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade3 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade3 {
32% {opacity:0;}
57% { opacity:1; }
0%,100% { opacity:0.3750 }
}
span.stripeInitialSpinnerFade3 {
-moz-transform: rotate(90.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade3 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade3 {
32% {opacity:0;}
57% { opacity:1; }
0%,100% { opacity:0.3750 }
}
span.stripeInitialSpinnerFade3 {
transform: rotate(90.0deg) translateY(16px);
animation: stripeInitialSpinnerFade3 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade3 {
32% {opacity:0;}
57% { opacity:1; }
0%,100% { opacity:0.3750 }
}
span.stripeInitialSpinnerFade4 {
-webkit-transform: rotate(135.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade4 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade4 {
43% {opacity:0;}
68% { opacity:1; }
0%,100% { opacity:0.5000 }
}
span.stripeInitialSpinnerFade4 {
-moz-transform: rotate(135.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade4 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade4 {
43% {opacity:0;}
68% { opacity:1; }
0%,100% { opacity:0.5000 }
}
span.stripeInitialSpinnerFade4 {
transform: rotate(135.0deg) translateY(16px);
animation: stripeInitialSpinnerFade4 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade4 {
43% {opacity:0;}
68% { opacity:1; }
0%,100% { opacity:0.5000 }
}
span.stripeInitialSpinnerFade5 {
-webkit-transform: rotate(180.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade5 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade5 {
54% {opacity:0;}
79% { opacity:1; }
0%,100% { opacity:0.6250 }
}
span.stripeInitialSpinnerFade5 {
-moz-transform: rotate(180.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade5 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade5 {
54% {opacity:0;}
79% { opacity:1; }
0%,100% { opacity:0.6250 }
}
span.stripeInitialSpinnerFade5 {
transform: rotate(180.0deg) translateY(16px);
animation: stripeInitialSpinnerFade5 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade5 {
54% {opacity:0;}
79% { opacity:1; }
0%,100% { opacity:0.6250 }
}
span.stripeInitialSpinnerFade6 {
-webkit-transform: rotate(225.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade6 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade6 {
64% {opacity:0;}
89% { opacity:1; }
0%,100% { opacity:0.7500 }
}
span.stripeInitialSpinnerFade6 {
-moz-transform: rotate(225.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade6 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade6 {
64% {opacity:0;}
89% { opacity:1; }
0%,100% { opacity:0.7500 }
}
span.stripeInitialSpinnerFade6 {
transform: rotate(225.0deg) translateY(16px);
animation: stripeInitialSpinnerFade6 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade6 {
64% {opacity:0;}
89% { opacity:1; }
0%,100% { opacity:0.7500 }
}
span.stripeInitialSpinnerFade7 {
-webkit-transform: rotate(270.0deg) translateY(16px);
-webkit-animation: stripeInitialSpinnerFade7 .8s linear infinite;
}
@-webkit-keyframes stripeInitialSpinnerFade7 {
75% {opacity:0;}
100% { opacity:1; }
0%,100% { opacity:0.8750 }
}
span.stripeInitialSpinnerFade7 {
-moz-transform: rotate(270.0deg) translateY(16px);
-moz-animation: stripeInitialSpinnerFade7 .8s linear infinite;
}
@-moz-keyframes stripeInitialSpinnerFade7 {
75% {opacity:0;}
100% { opacity:1; }
0%,100% { opacity:0.8750 }
}
span.stripeInitialSpinnerFade7 {
transform: rotate(270.0deg) translateY(16px);
animation: stripeInitialSpinnerFade7 .8s linear infinite;
}
@keyframes stripeInitialSpinnerFade7 {
75% {opacity:0;}
100% { opacity:1; }
0%,100% { opacity:0.8750 }
}
</style>
<div id="stripeSpinner" class="stripeInitialSpinner" style="display: block;">
<span class="stripeInitialSpinnerFade0"></span>
<span class="stripeInitialSpinnerFade1"></span>
<span class="stripeInitialSpinnerFade2"></span>
<span class="stripeInitialSpinnerFade3"></span>
<span class="stripeInitialSpinnerFade4"></span>
<span class="stripeInitialSpinnerFade5"></span>
<span class="stripeInitialSpinnerFade6"></span>
<span class="stripeInitialSpinnerFade7"></span>
</div>
<div id="stripeLoadError" class="stripeErrorMessage"><p>
Sorry, there was a problem loading Checkout. If this persists, please <a href="mailto:support@stripe.com">email support@stripe.com</a>
</p></div>
<script type="text/javascript">
(function(){
var hideSpinner = function() {
var spinner = document.getElementById('stripeSpinner');
if(spinner) {
spinner.className += ' animated';
setTimeout(function() {
spinner.className += ' hidden';
setTimeout(function() {
document.body.removeChild(spinner);
}, 300);
}, 1);
}
}
var showError = function() {
hideSpinner();
document.getElementById('stripeLoadError').style.display = 'block';
};
var initApp = function(){
var App = StripeCheckout.require('desktop/controllers/app');
var helpers = StripeCheckout.require('lib/helpers');
window.app = new App({
el: document.body,
mixpanelKey: 'd7513b16d5649171f045ecd9a0de5c1b',
onOpen: function() {
var spinner = document.getElementById('stripeSpinner');
if(spinner)
spinner.style.display = 'block';
},
onLoad: function() {
hideSpinner();
},
onError: function() {
showError();
}
});
};
var head = (document.getElementsByTagName('head')[0] || document.documentElement);
var insert = function(el){
head.insertBefore(el, head.firstChild);
};
var cssTag = document.createElement('link');
cssTag.rel = 'stylesheet';
cssTag.href = '/v3/checkout/desktop.css?version=hvwqnmNhaMPYEMeoD4oDFQ';
insert(cssTag);
var loadScript = function(src, load, err){
var scriptTag = document.createElement('script');
scriptTag.src = src;
if(typeof load === 'function'){
// From http://stackoverflow.com/questions/6568890
var done;
scriptTag.onload = scriptTag.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
// Give the script a chance to execute on IE
// Otherwise the Stripe.endpoint global gets clobbered
// and possibly other bad things happen
setTimeout(load, 0);
// Handle memory leak in IE
scriptTag.onload = scriptTag.onreadystatechange = null;
}
};
}
if(typeof err === 'function'){
scriptTag.onerror = err;
}
insert(scriptTag);
};
loadScript(
"/js/raven.min.js?version=l0KqNMHa_QhUOamdDvGk-A",
function(){
var options = {
ignoreErrors: [
/Error connecting to extension hkcaohgalm/,
]
};
Raven.config('https://4e1e572dc6dc445ea955329cd5bb6329@errors.stripe.com/11').install();
}
);
var loadedToInit = 0;
loadScript('/v3/checkout/desktop.js?version=5OyUDUGyG0xeMH4JaPbJjQ', function(){
loadedToInit += 1;
if(loadedToInit == 2)
initApp();
}, function(){
showError();
});
loadScript('https://js.stripe.com/v1/', function(){
loadedToInit += 1;
if(loadedToInit == 2)
initApp();
});
})();
</script>
<div class="preloader"><div style="background-image: url(https://networklocum.com/static//img/stripejs_icon.png);"></div></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment