Shift4

Using Checkout

The easiest way to integrate with Shift4 is to use Checkout. We take care of all the complex parts. All you need to do is to add a single payment button to your website.

Checkout can be customized to meet your business needs and requirements. Still, if you need more control over the look and feel of your payment form, you can integrate with Shift4 using Components.

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

This tutorial will show you how to:

prepare Checkout request
charge card using Checkout

Step 1: Prepare Checkout Request

To open Checkout, you must create a Checkout request object and sign it with your secret key.

The Checkout Request object is used to define what you want to do with the customer's card. You can either create a single charge (by providing the amount and currency) or create an automatically recurring subscription (by providing an identifier of the existing subscription plan).

The example below shows how to create and sign a simple Checkout Request:

$shift4 = new Shift4Gateway('pr_test_tXHm9qV9qV9bjIRHcQr9PLPa');

$checkoutCharge = new CheckoutRequestCharge();
$checkoutCharge->amount(499)->currency('USD');

$checkoutRequest = new CheckoutRequest();
$checkoutRequest->charge($checkoutCharge);

$signedCheckoutRequest = $shift4->signCheckoutRequest($checkoutRequest);

Shift4Gateway shift4 =
        new Shift4Gateway("pr_test_tXHm9qV9qV9bjIRHcQr9PLPa");

CheckoutRequest checkoutRequest = new CheckoutRequest().charge(499, "USD");

String signedCheckoutRequest = shift4.signCheckoutRequest(checkoutRequest);

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

Step 2: Charge card using Checkout

Once you have signed the Checkout request, you must add the Checkout button to your website.

Opening Checkout using script tag

The fastest and simplest way to add Checkout to your website is by using the following script tag:

<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 CSS class set to shift4-button

This script tag will be automatically converted to a payment button that will open Checkout when clicked. All configuration is done using data-* attributes, and no additional JavaScript code is required.

When Checkout is successfully completed, the surrounding form tag will be submitted with Checkout results - the following fields will be added to the submitted form: shift4Email, shift4CustomerId, shift4ChargeId, shift4SubscriptionId.

Opening Checkout using JavaScript

If you need more control over opening Checkout or you want to customize the handling of Checkout results, you can open Checkout using JavaScript:

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