Apple Pay and Google Pay with Payment components

A wallet payment built with Payment components: the backend creates a Checkout Session, and shift4.js renders the Apple Pay and Google Pay buttons in the page. It follows Apple Pay and Google Pay.

There is no Pay button and no continue() call: the payment starts when the customer taps a wallet button and authorises it in the wallet's own sheet. The wallet provides the customer's email and, when the Checkout Session collects them, their addresses.

This example runs in the sandbox; no real payment is made.

Potted plant

Qty 1

$24.99

Pay with a wallet

Tap a button to pay with a card saved in your wallet. The wallet provides your email address.

Each button appears only on devices and browsers that support its wallet.

Before you try it

Google Pay
Use a browser that supports Google Pay and is signed in to a Google account with a card saved. Google restricts some business categories; see Business eligibility.
Apple Pay
Apple only shows the payment sheet over HTTPS on domains registered through Shift4 support, so the button can appear here without being able to take a payment. See Domain registration.

How it works

Create a Checkout Session

Your backend creates a Checkout Session for the order and passes its clientSecret to the page, exactly as for a card payment. See Create a Checkout Session.

# Run on your backend. SHIFT4_ACCESS_TOKEN is your Access Token - keep it on the server.
curl -X POST https://api.shift4.com/api/rest/v1/checkoutsessions/create \
  -H "AccessToken: $SHIFT4_ACCESS_TOKEN" \
  -H "InterfaceVersion: 1.0" \
  -H "InterfaceName: YourApp" \
  -H "CompanyName: YourCompany" \
  -H "Content-Type: application/json" \
  -d '{
    "checkoutSession": {
      "lineItems": [
        {
          "product": {
            "name": "Potted plant",
            "currencyCode": "USD",
            "amount": { "total": 24.99 }
          }
        }
      ]
    }
  }'

Mount the wallet buttons

Load shift4.js, open the Checkout Session, and mount each wallet button into an empty element. Both buttons can share one Checkout Session; card fields need a separate one, see Offer wallets alongside cards. The result arrives as a checkout_session.succeeded or payment.failed event; if the customer dismisses the wallet sheet, no event fires.

If your page uses a Content Security Policy, add Apple's and Google's entries to the baseline policy: script-src https://applepay.cdn-apple.com https://pay.google.com and frame-src https://pay.google.com.

<script src="https://js.shift4.com/v1/shift4.js"></script>

<div id="google-pay-button"></div>
<div id="apple-pay-button"></div>

<script>
  (async function () {
    // Replace with your own values:
    // - your Platform Public Key (sandbox keys start with pk_sandbox_)
    // - the clientSecret your backend received in step 1
    var shift4 = Shift4('pk_sandbox_XXXXXXXXXXXXXXXXXXXX');
    var checkout = await shift4.createCheckout('{{clientSecret}}');

    checkout.addEventListener('checkout_session.succeeded', function () {
      // show a confirmation, then confirm the Checkout Session on your backend
    });
    checkout.addEventListener('payment.failed', function (event) {
      // show event.error.message to the customer
    });

    checkout.createComponent('google-pay-button').mount('#google-pay-button');
    checkout.createComponent('apple-pay-button').mount('#apple-pay-button');
  })();
</script>

Confirm the payment

When checkout_session.succeeded fires, show the customer a confirmation, then retrieve the Checkout Session on your backend and check that its status is paid before you fulfil the order. See Confirm the payment.

# Run on your backend: retrieve the Checkout Session and check that its status is paid.
curl https://api.shift4.com/api/rest/v1/checkoutsessions/retrieve \
  -H "AccessToken: $SHIFT4_ACCESS_TOKEN" \
  -H "InterfaceVersion: 1.0" \
  -H "InterfaceName: YourApp" \
  -H "CompanyName: YourCompany" \
  -H "CheckoutSessionId: {{checkoutSessionId}}"