WalletJS

One JavaScript library for Apple Pay, Google Pay, and more — with a single init call. WalletJS hides the platform differences and hands you a token.

WalletJS is moat's unified client-side wallet library. It detects which wallets are available on the current device, renders the appropriate buttons, and on selection returns a payment token you can charge. Compared to integrating Apple Pay and Google Pay directly, WalletJS saves you from maintaining two separate integrations with diverging APIs.

Include the library

<script src="https://sandbox.fluidpay.com/js/walletjs/v1/wallet.js"></script>
<div id="wallet-buttons"></div>

Initialize

const wallet = new MoatWallet({
  apikey: "pub_YOUR_PUBLIC_KEY",
  container: "#wallet-buttons",

  amount: 2500,              // in cents
  currency: "USD",
  country: "US",

  label: "Your Store",       // shown on the native payment sheet
  lineItems: [
    { label: "Subtotal", amount: 2000 },
    { label: "Tax",      amount: 250 },
    { label: "Shipping", amount: 250 }
  ],

  wallets: ["apple_pay", "google_pay"],  // optional: restrict to a subset

  onPaymentAuthorized: (resp) => {
    // resp.token is a moat token you can use to charge
    fetch("/api/your-server/checkout", {
      method: "POST",
      body: JSON.stringify({ token: resp.token })
    });
  },

  onError: (err) => {
    console.error("Wallet payment failed", err);
  }
});

Options

Option	Type	Description
`apikey`	string	required. Your public key.
`container`	string	required. CSS selector where wallet buttons render.
`amount`	integer	required. Amount in cents.
`currency`	string	required. ISO 4217 code.
`country`	string	required. Merchant country, ISO 3166 alpha-2.
`label`	string	Display name on the native sheet. Defaults to your business name.
`lineItems`	array	Line items shown on the sheet. Should sum to `amount`.
`wallets`	array	Which wallets to offer. Default: all supported on the current device.
`requireBillingAddress`	boolean	Collect billing address from the wallet.
`requireShippingAddress`	boolean	Collect shipping address.
`onPaymentAuthorized`	function	Called with a token after the user approves on their device.
`onShippingAddressChange`	function	Called when the customer picks a shipping address — use to recompute shipping costs.
`onCancel`	function	Called when the user dismisses the sheet without paying.
`onError`	function	Called on any failure.

Supported wallets

Wallet	Required setup
`apple_pay`	Apple merchant ID, domain verification, processing cert uploaded to moat. See Apple Pay.
`google_pay`	Google Pay merchant ID. Register your domain in the Google Pay Business Console.

Dynamic updates

When a customer selects a shipping address, their chosen options might change the total. Handle it in onShippingAddressChange and return updated line items:

onShippingAddressChange: (address, update) => {
  const shippingCost = calculateShipping(address);
  update({
    status: "success",
    newLineItems: [
      { label: "Subtotal", amount: 2000 },
      { label: "Shipping", amount: shippingCost }
    ],
    newTotal: 2000 + shippingCost
  });
}

Styling the buttons

Apple Pay and Google Pay enforce their own button branding — you cannot recolor or restyle beyond a short list of allowed variants. WalletJS exposes those variants via options:

buttons: {
  apple_pay: { style: "black", type: "buy" },    // black | white | white-outline; buy | pay | donate | ...
  google_pay: { style: "black", type: "buy" }
}

Charging the token

The token returned to onPaymentAuthorized is a moat payment token. Use it exactly as you would use a Tokenizer token:

{
  "type": "sale",
  "amount": 2500,
  "payment_method": {
    "token": { "id": "tok_01H9XK..." }
  }
}

Availability detection

If neither Apple Pay nor Google Pay is available on the current device, the container renders nothing — you do not need to guard for that. If you want to hide your whole wallet section when neither is present, read wallet.available after onReady fires.