Shift4 Checkout is a hosted payment form that handles the entire payment flow for you. It collects card details, validates input, handles 3D Secure authentication, and creates the charge.
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.
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.
Both are shown in Using Checkout.
Please check our guidelines for CSP here.
A Checkout Session is a server-created configuration that defines what the customer is paying for and how the Checkout form behaves. Sessions must be created using a secret API key, which allows Shift4 to enforce rate limiting and prevent abuse scenarios such as automated card testing.
Once created, a session is immutable. If changes are required, create a new session.
See the Create a checkout session endpoint in the API Reference.
These parameters can be added to your <script> tag to configure and customize Checkout.
| 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, provided as a two-letter code from Supported languages. 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. |
data-payment-button-background-color | Sets color of a payment button. |
data-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. |
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 when Checkout was initialized, 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 was configured to create a recurring subscription. |
These parameters are added alongside the ones above. Billing parameters are only populated when data-billing-address is set to true, and shipping parameters only when data-shipping-address is set to true.
| Parameter | Description |
|---|---|
shift4BillingName | The name provided in the billing details. |
shift4BillingAddressLine1 | First line of the billing address. |
shift4BillingAddressZip | Postal code of the billing address. |
shift4BillingAddressCity | City of the billing address. |
shift4BillingAddressCountry | Country of the billing address. |
shift4BillingVat | The VAT number provided in the billing details. |
shift4ShippingName | The name provided in the shipping details. |
shift4ShippingAddressLine1 | First line of the shipping address. |
shift4ShippingAddressZip | Postal code of the shipping address. |
shift4ShippingAddressCity | City of the shipping address. |
shift4ShippingAddressCountry | Country of the shipping address. |
The following languages are supported by Checkout:
| Code | Language |
|---|---|
be | Belarusian |
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 |
iw | Hebrew |
lt | Lithuanian |
lv | Latvian |
nl | Dutch |
no | Norwegian |
pl | Polish |
pt | Portuguese |
ro | Romanian |
ru | Russian |
sk | Slovak |
sl | Slovenian |
If the requested code is not on this list, Checkout falls back to English.
- Using Checkout -- create a Checkout Session and render Checkout in the browser.
- Checkout customization -- customize Checkout appearance and behavior in your Account Settings.
- Charges -- understand the charge object created behind the scenes.