Checkout

Integration

To open Checkout, you must create a Checkout request object and sign it with your secret key. You can either create a Checkout request dynamically on your backend each time page with Checkout being displayed or pre-create needed Checkout requests and hardcode them on your website.

More information about Checkout requests can be found in the API documentation or in the Checkout creator page.

Once you have your Checkout request, there are two ways to integrate with Checkout:

• Simple integration provides a button that opens Checkout and, after successful payment, submits your payment form with Checkout results added as hidden input fields.
• Custom integration allows you to open Checkout from JavaScript and handle the Checkout results in the JavaScript callback function.

<form action="/your-payment-handler" method="post">
	<script src="https://dev.shift4.com/checkout.js"
		class="shift4-button"
		data-key="pu_test_WVMFC9GFuvm54b0uorifKkCh"
		data-checkout-request="ODViMmQ1NWEwYmNkZmMxZTI5ZTAwOGYzZDdlODhhYmRkNGQzOGUyMjE4NjU4NjA2MjkzYjk1ZDA2ZWNkMzk4Y3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJVU0QifX0="
		data-name="Shift4"
		data-description="Checkout example"
		data-checkout-button="Payment button">
	</script>
</form>

<script src="https://dev.shift4.com/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		Shift4Checkout.key = 'pu_test_WVMFC9GFuvm54b0uorifKkCh';
		Shift4Checkout.success = function (result) {
			// handle successful payment (e.g. send payment data to your server)
		};
		Shift4Checkout.error = function (errorMessage) {
			// handle integration errors (e.g. send error notification to your server)
		};
	
		$('#payment-button').click(function () {
			Shift4Checkout.open({
				checkoutRequest: 'ODViMmQ1NWEwYmNkZmMxZTI5ZTAwOGYzZDdlODhhYmRkNGQzOGUyMjE4NjU4NjA2MjkzYjk1ZDA2ZWNkMzk4Y3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJVU0QifX0=',
				name: 'Shift4',
				description: 'Checkout example'
			});
		});
	});
</script>

<button id="payment-button">Payment button</button>

Supported languages

The following languages are supported by Checkout:

• bg - Bulgarian
• cs - Czech
• da - Danish
• de - German
• el - Greek
• en - English
• es - Spanish
• et - Estonian
• fi - Finnish
• fr - French
• hr - Croatian
• hu - Hungarian
• it - Italian
• lt - Lithuanian
• lv - Latvian
• nl - Dutch
• no - Norwegian
• pl - Polish
• pt - Portuguese
• ro - Romanian
• ru - Russian
• sk - Slovak
• sl - Slovenian
• nl-BE - Dutch/Belgium