<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Thomascullen/pen/dVyORB" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css'>
<style class="cp-pen-styles">body, html {
background: #F3F5FF;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing: border-box;
}
.Container {
width: 500px;
border-radius: 6px;
position: relative;
background: #282B36;
margin: 60px auto 0 auto;
box-shadow: 0 10px 40px 0 rgba(40, 43, 54, 0.3);
}
.Container nav {
top: 15px;
left: 15px;
position: absolute;
}
.Container nav a {
z-index: 2;
color: #A5AAAF;
font-size: 13px;
padding: 5px 8px;
border-radius: 4px;
display: inline-block;
text-decoration: none;
}
.Container nav a:hover, .Container nav a.active {
color: white;
}
.Container nav .current {
top: 0;
left: 0;
z-index: 0;
width: 40px;
height: 22px;
border-radius: 3px;
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
}
.Container .Contents {
width: 100%;
display: flex;
overflow: hidden;
align-items: flex-start;
}
.Container .Content {
width: 100%;
flex-shrink: 0;
color: #FFFFFF;
font-size: 15px;
line-height: 24px;
padding: 60px 30px 30px 30px;
}
.Container .Content .hljs {
padding: 0;
font-size: 13px;
line-height: 24px;
font-family: Consolas, Monaco, monospace;
}
.hljs-number {
color: #FFC24C;
}
.credit {
left: 50%;
bottom: 30px;
width: 300px;
position: fixed;
text-align: center;
margin-left: -150px;
}
.credit p {
color: #6C738B;
font-size: 13px;
font-weight: 300;
line-height: 20px;
}
.credit p a {
color: #32325D;
font-weight: 400;
text-decoration: none;
}
.credit p a:hover {
color: #5C33FF;
}
</style></head><body>
<div class="Container">
<nav>
<div class="current"></div>
<a href="#one" class="active">Ruby</a>
<a href="#two">Python</a>
<a href="#three">Node</a>
<a href="#four">Go</a>
</nav>
<div class="Contents">
<div class="Content" id="one">
<pre><code>require "stripe"
Stripe.api_key = "..."
Stripe::Charge.create(
:amount => 2000,
:currency => "eur",
:source => "tok_mastercard", # obtained with Stripe.js
:description => "Charge for hello@thomascullen.io"
)</code></pre>
</div>
<div class="Content" id="two">
<pre class="python"><code>import stripe
stripe.api_key = "..."
stripe.Charge.create(
amount=2000,
currency="eur",
source="tok_amex", # obtained with Stripe.js
description="Charge for madison.wilson@example.com"
)</pre></code>
</div>
<div class="Content" id="three">
<pre><code>var stripe = require("stripe")(
"..."
);
stripe.charges.create({
amount: 2000,
currency: "eur",
source: "tok_visa", // obtained with Stripe.js
description: "Charge for jayden.martinez@example.com"
}, function(err, charge) {
// asynchronously called
});</code></pre>
</div>
<div class="Content" id="four">
<pre><code>stripe.Key = "..."
chargeParams := &stripe.ChargeParams{
Amount: 2000,
Currency: "eur",
Desc: "Charge for benjamin.wilson@example.com",
}
// obtained with Stripe.js
chargeParams.SetSource("tok_mastercard")
ch, err := charge.New(chargeParams)</code></pre>
</div>
</div>
</div>
<div class="credit">
<p>The code snippets in this demo are taken from Stripe's <a href="https://stripe.com/docs/api#create_charge" target="_blank">incredible documentation</a></p>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ruby.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/python.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js'></script>
<script >'use strict';
hljs.initHighlightingOnLoad();
var scrollView = document.querySelector('.Container .Contents');
var tabs = document.querySelectorAll('.Container .Contents .Content');
var nav = document.querySelectorAll('.Container nav a');
var currentNav = document.querySelector('.Container nav .current');
var currentTab = 0;
currentNav.style.width = nav[currentTab].clientWidth + 'px';
scrollView.style.height = tabs[currentTab].clientHeight + 'px';
nav.forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault();
var index = Array.prototype.indexOf.call(nav, e.target);
if (currentTab === index) return;
animateToTab(index);
});
});
var animateToTab = function animateToTab(index) {
var el = tabs[index];
var scrollStart = scrollView.scrollLeft;
var startHeight = scrollView.clientHeight;
nav[currentTab].classList.remove('active');
nav[index].classList.add('active');
var time = {
start: performance.now(),
duration: 700
};
var tick = function tick(now) {
time.elapsed = now - time.start;
var fadeOut = easeInOutCubic(time.elapsed, 1, -1, time.duration);
var fadeIn = easeInOutCubic(time.elapsed, 0, 1, time.duration);
var offset = easeInOutCubic(time.elapsed, scrollStart, el.offsetLeft - scrollStart, time.duration);
var height = easeInOutCubic(time.elapsed, startHeight, el.clientHeight - startHeight, time.duration);
var navOffset = easeInOutCubic(time.elapsed, nav[currentTab].offsetLeft, nav[index].offsetLeft - nav[currentTab].offsetLeft, time.duration);
var indicatorWidth = easeInOutCubic(time.elapsed, nav[currentTab].clientWidth, nav[index].clientWidth - nav[currentTab].clientWidth, time.duration);
currentNav.style.transform = 'translateX(' + navOffset + 'px)';
currentNav.style.width = indicatorWidth + 'px';
tabs[currentTab].style.opacity = fadeOut;
tabs[index].style.opacity = fadeIn;
scrollView.scrollLeft = offset;
scrollView.style.height = height + 'px';
if (time.elapsed < time.duration) {
requestAnimationFrame(tick);
} else {
currentTab = index;
}
};
requestAnimationFrame(tick);
};
var easeInOutCubic = function easeInOutCubic(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
};
//# sourceURL=pen.js
</script>
</body></html>
