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.

Integration

To open Checkout, first create a Checkout Session on your backend and pass its clientSecret to the frontend. Then use our Checkout library, available at https://dev.shift4.com/checkout.js, to render the Checkout app in the browser.

More information about creating a Checkout Session can be found in the API documentation.

Once you have your Checkout Session, there are two ways to integrate with Checkout on the frontend:

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="pk_xxxxxxxxxxxxxxxxxxxxxxxx"
    data-client-secret="chcs_xxxxxxxxxxxxxxxxxxxxxxxx">
  </script>
</form>

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

Please check our guidelines for CSP here.

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-client-secret	The client secret found in the Checkout Session created by your backend service

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.
theme-button-background-color	Sets color of a payment button.
theme-typography	Sets fonts used in Checkout form.
data-show-payment-amount	If set to false amount on the payment button is hidden. Default setting is true.

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:

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