Skip to content
Swft Docs

Express Checkout

Apple Pay and Google Pay appear automatically above the contact form when the shopper’s device and browser support them. No configuration is required — Swft detects wallet availability via the Stripe Payment Request API.

How it works

Section titled “How it works”

When a shopper reaches the checkout, Swft calls stripe.paymentRequest() with the cart total, currency, and line items from the pre-created session. The browser then calls canMakePayment() to determine whether the device has a configured wallet.

const paymentRequest = stripe.paymentRequest({
  country: 'GB',
  currency: 'gbp',
  total: {
    label: 'Order total',
    amount: session.totalPence,
  },
  requestPayerName:  true,
  requestPayerEmail: true,
  requestShipping:   true,
  shippingOptions:   session.shippingOptions,
})


const canPay = await paymentRequest.canMakePayment()

If canMakePayment() returns null — which happens when the device has no configured cards, Apple Pay domain verification has failed, or the browser does not support the API — the express button row is hidden entirely. The standard form is always rendered regardless, so no shopper ever sees a broken checkout.

Button row behaviour

Section titled “Button row behaviour”

The express button row sits above the email field, separated from the main form by an “or” divider. Up to two buttons render side by side: Apple Pay on Safari/WebKit, Google Pay on Chrome/Edge. On Android devices, Google Pay renders full-width.

After the shopper authenticates with Face ID, Touch ID, or their Google account, Swft receives a paymentmethod.created event from Stripe, confirms the PaymentIntent on the edge, and redirects to the order confirmation page — the same flow as a standard form submission.

Shipping address selection happens within the native wallet sheet. Swft listens to shippingaddresschange events and recalculates available shipping options in real time by calling the session API.

Requirements

Section titled “Requirements”
  • HTTPS — required by browsers for the Payment Request API. localhost is allowed for development.
  • Stripe Apple Pay domain verification — Swft automatically serves the .well-known/apple-developer-merchantid-domain-association file for app.swft.co.uk. If you use a custom domain, you must complete domain verification in the Stripe dashboard for that domain.
  • Stripe account country — Apple Pay requires the Stripe account to be registered in a supported country.

Disabling per merchant

Section titled “Disabling per merchant”

Set modules.expressCheckout: false in your merchant config via the dashboard or the API:

{
  "modules": {
    "expressCheckout": false
  }
}

Or via the REST API:

Terminal window
curl -X PATCH https://api.swft.co.uk/v1/merchants/{id} \
  -H "Authorization: Bearer $SWFT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"modules": {"expressCheckout": false}}'

This hides the express button row entirely, even on supported devices. The setting takes effect on the next session creation — existing pre-created sessions use the config that was current at session creation time.

Styling

Section titled “Styling”

The Payment Request button renders inside an iframe controlled by Stripe and cannot be styled with CSS. You can control the button theme (dark, light, light-outline) and button type (default, buy, donate, book) from the merchant config:

{
  "modules": {
    "expressCheckout": {
      "theme": "dark",
      "type": "buy"
    }
  }
}

The surrounding container, the “or” divider, and the spacing around the button row are all part of Swft’s UI and follow your active template’s token system.