Skip to main content

​
Overview

Wallet-only checkout lets you present a streamlined flow: Apple Pay and/or Google Pay on the host page, with the card form, custom fields, and pay button hidden inside the iframe and the horizontal “OR” divider hidden on the host—when the shopper’s device and your configuration support at least one wallet. Set showOnlyWalletMethods: true in your widget configuration alongside a fully configured Apple Pay and/or Google Pay setup (merchant ids, containers, etc.).
Wallet buttons are parent-hosted (above the iframe), same as the standalone Apple Pay and Google Pay guides describe.

​
When to use it

  • You want wallet-first checkout and are fine falling back to the full card form if something goes wrong.
  • You already enable Apple Pay and/or Google Pay on the widget.

​
Requirements

ConfigPurpose
showOnlyWalletMethods: trueTurns on wallet-only mode when preconditions pass.
applePayEnabled + applePayOptionsAnd/or
googlePayEnabled + googlePayOptionsAt least one wallet must be fully configured.
You still pass applePayContainerId / googlePayContainerId (or default slots) when using those wallets—see Wallet buttons on the host page in the Configuration guide.

​
What shoppers see

AreaWallet-only (when active)
Host pageWallet button(s) above the iframe; “OR” divider hidden when the iframe is in wallet-only layout.
IframeCard fields, custom fields, and primary pay button hidden while wallets-only layout applies.
If the flow falls back to the full payment form, the “OR” divider and card UI appear again so the customer can pay with a card.

​
Fallback behavior (full card form)

The widget expands to the full card UI when:
  • showOnlyWalletMethods is off or no wallet is configured.
  • No enabled wallet is available on the device, readiness times out (~5s), or readiness reports no usable wallet.
  • A wallet payment fails (or a related processing error) while in wallet-only mode.
User cancellation of the Apple or Google sheet does not by itself force the full form—only failures and the cases above do.

​
Example

PaySightSDK.createWidget({
  targetId: 'payment-container',
  applePayContainerId: 'apple-pay-slot',
  googlePayContainerId: 'google-pay-slot',
  config: {
    productId: 7900,
    sessionId: 'unique-session-id',
    environment: 'sandbox',
    amount: 1.0,
    showOnlyWalletMethods: true,
    applePayEnabled: true,
    applePayOptions: {
      applePayMerchantId: 'merchant_xxxxxxxx',
    },
    googlePayEnabled: true,
    googlePayOptions: {
      googlePayMerchantId: 'merchant_xxx',
    },
    customer: { email: 'customer@example.com', country: 'US' },
  },
  onMessage: (msg) => { /* handle PAYMENT_SUCCESS, etc. */ },
});
React: pass the same config fields on the Widget component from @paysight/widget-sdk (see Configuration).

Configuration

Full showOnlyWalletMethods parameter and wallet container options.

Apple Pay via Widget

Apple Pay setup and domain verification.

Google Pay via Widget

Google Pay setup and testing.

Configuration reference

Field-by-field reference tables.