Andrew Dorokhov
Checkout is a low-code payment integration that creates a customizable payment page so you can quickly collect payments on desktop and mobile devices.
How a payment procedure go
- A customer clicks on the payment button.
- The checkout window pops up. A customer fills in card data, presses the “Pay” button.
- The data is sent to Stripe, it returns a token. Token is written to one of the form fields (
stripeToken). - After that, the form is sent to our server, where we can charge the card using the token.
Integration
There are two options: simple and custom.
A simple one looks like this:
<form action="your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_TYooMQauvdEDq54NiTphI7jx"
data-amount="999"
data-name="Stripe.com"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true">
</script>
</form>
The custom one is a bit more complicated:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Stripe.com',
description: '2 widgets',
zipCode: true,
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>