Shift4

Checkout

Demo

Try Checkout by clicking on the example payment button below and fill in one of our test cards (ex. card number: 4242 4242 4242 4242) together with any 3-digit CVC and valid expiration date.

Checkout creator

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.

The simple integration uses <script> tag that must be added inside your payment <form> tag. That script tag is replaced with a payment button that will open Checkout when clicked. After successful payment, the Checkout results will be added to surrounding <form> as hidden <input> tags, and that form will be automatically submitted along with any other existing <input> tags.

<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>

NOTE: script tag must have the CSS class set to shift4-button to work correctly.

Configuration parameters

These parameters can be added to your <script> tag to configure and customize Checkout.

Required

Parameter	Description
data-key	Your public key (either live or test).
data-checkout-request	The checkout request signed with your secret key. For more information see the API documentation.

Optional

Parameter	Description
data-image	The relative (or absolute) URL to image of your brand or product. Recommended image size is 70×70 pixels. Recommended image types are .png, .jpeg, and .gif.
data-name	The name of your company or website.
data-description	The description of the product that is being sold.
data-payment-button	The text that will appear on the payment button in Checkout. If the text contains {{amount}}, it will be replaced by a charge amount. Otherwise, the charge amount will be appended at the end.
data-email	If provided, it will be used to the pre-fill email field in Checkout.
data-checkout-button	The text that will appear on the button that will be added on your website.
data-class	Value of the HTML "class" attribute that will be set on the payment button on your website.
data-locale	The language that will be used in Checkout. If not provided, Checkout will be displayed in the user's preferred language (defined in the browser).
data-shipping-address	If set to true, Checkout will collect the customer's shipping address.
data-billing-address	If set to true, Checkout will collect the customer's billing address.

Result parameters

These parameters are added to your payment <form> tag after a successful payment.

Parameter	Description
shift4Email	The email address that was provided by the user in Checkout.
shift4CustomerId	Identifier of the customer object that was used by Checkout. It can be either a customer provided in Checkout Request or a new customer created by Checkout.
shift4ChargeId	Identifier of the charge object that was created by Checkout.
shift4SubscriptionId	Identifier of the subscription object that was created by Checkout. Only present if Checkout Request was configured to create a recurring subscription.

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