What's new in Wallet and Apple Pay

ハイライト

iOS 18 で Apple Pay がすべてのブラウザに対応。Safari 以外のブラウザで Apple Pay ボタンをタップすると、画面の QR コードを iPhone でスキャンして決済完了。開発者が受け取る payment response の形式は Safari と完全に同一です。

主要内容

Web 上の Apple Pay には長年の弱点がありました。Safari だけが使えたのです。EC サイトが Chrome や Firefox で開かれると、Apple Pay ボタンは表示されません。多くの開発者がブラウザ判定ロジックを書き、Safari では Apple Pay、それ以外ではクレジットカードフォームにフォールバックしていました。結果として決済体験が分断され、モバイル非 Safari ブラウザのユーザーが失われていました。

iOS 18 がこの制限を撤廃します。どのブラウザでも Apple Pay ボタンをタップすると QR コードが表示され、iPhone でスキャンして決済確認。基盤は iPhone 版 Apple Pay と同一の取引システムで、開発者が受け取る payment response のデータ形式も Safari 内決済と同一。サーバー側コードの変更は不要です。開発者の変更は 2 点のみ。Apple Pay JS SDK 1.2.0+ の導入と、CSS 実装ではなく SDK 提供のボタンコンポーネントの使用。

Session では他 2 つの決済更新もカバーします。第一に、資金振出（Disbursement）が web プラットフォームに拡張——昨年 iOS で登場した出金機能が macOS 15 の Safari でも使え、app 内残高を紐付け銀行カードへ振替可能。第二に Merchant Category Code サポート。payment request で加盟店カテゴリコードを指定すると、決済 UI がそのカテゴリ非対応カードを自動フィルタし、取引失敗率を下げます。

後半では Masha が Wallet チケットの大幅リニューアルを紹介。NFC イベントチケットに新ビジュアルレイアウト。上部にイベント logo と日付、中央に大きなイベント artwork、footer に座席情報を集約。票面下に地図ジャンプ入口と Event Guide——クイック操作（飲食注文、グッズ購入、手荷物規定確認）、天気予報、会場地図、音楽プレイリストを集約した情報ハブ。pass.json にセマンティックタグデータを入力すれば、最も関連性の高いタイミングで Live Activity が自動起動し、ロック画面と Apple Watch に入場情報を表示します。

詳細

Apple Pay on the web：非 Safari ブラウザ対応

開発者が行うことは 2 点（01:15）:

HTML の <head> に Apple Pay JS SDK 1.2.0 以降を導入。
CSS 実装ではなく SDK 提供の <applepay-button> コンポーネントを使用。CSS ボタンは非 Safari ブラウザ非対応。

また canMakePaymentsWithActiveCard() は非推奨。新しい applePayCapabilities() API を推奨（02:05）。paymentCredentialStatus には 4 値:

paymentCredentialsAvailable：デバイスが Apple Pay 対応で利用可能カードあり——Apple Pay を優先決済手段に。
paymentCredentialsUnavailable：デバイス対応だが利用可能カードなし——ボタン非表示。
paymentCredentialStatusUnknown：Apple Pay 対応だがカード情報不明（非 Safari ブラウザはこの分岐）——ボタン表示、順序は開発者判断。
applePayUnsupported：ボタン非表示。

現在 canMakePayments() のみ使用し true 時にボタン表示していれば変更不要——機能は自動で有効。

Funds Transfer on the web（05:45）

資金振出リクエストの構築は通常 PaymentRequest と類似。主要設定:

const paymentMethodData = {
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantCapabilities: [
      "supports3DS",
      "supportsInstantFundsOut"  // 即時送金を有効化
    ],
    // ...その他の設定
  }
};

const paymentDetails = {
  total: { label: "Transfer", amount: "100.00" }
};

const paymentOptions = {
  requestShipping: false  // 資金移動には配送が関係しない
};

const paymentRequest = {
  paymentMethodData: [paymentMethodData],
  paymentDetails: paymentDetails,
  paymentOptions: paymentOptions,
  modifiers: [{
    additionalLineItems: [
      { label: "Total deduction", amount: "100.00" },
      { label: "Instant transfer fee", amount: "1.50", type: "instantFundsOutFee" },
      { label: "Transfer to card", amount: "98.50", type: "disbursement" }
    ],
    disbursementRequest: {
      requiredRecipientContactFields: ["email", "name"]
    }
  }]
};

キーポイント:

supports3DS は基本能力要件。supportsInstantFundsOut で即時振出を有効化し手数料を宣言。
requestShipping は false 必須。資金振出に物理配送は関与しない。
disbursementRequest は modifiers 内。requiredRecipientContactFields が不要でも空オブジェクト必須。
additionalLineItems は 3 項目。控除総額、即時振出手数料（type: "instantFundsOutFee"——無料でも必須、金額 0）、実際の入金額（type: "disbursement"）。

エラー処理では ApplePayError に第 4 フィールドが追加され、エラー関連の取引タイプを指定（08:32）。カードが振出非対応なら unsupportedCard、受取人連絡先情報が誤りなら recipientContactInvalid。

Merchant Category Code（09:02）

payment request で加盟店カテゴリコードを指定すると、決済 UI はそのカテゴリ対応カードのみ表示し、取引失敗を減らします。MCC は ISO 79450 準拠。具体コードは決済処理業者に確認。

Wallet チケットリニューアル（09:56）

NFC イベントチケットの新ビジュアルレイアウトの前提:

pass.json に必須 Semantic Tags を提供し、システムが票面データの意味を理解。
pass.json で preferredStyle を posterEventTicket（新スタイル）または eventTicket（旧スタイル）に指定、優先順位付け可能。
Pass は NFC entitlement で署名し、スマホタップ入場を可能に。

新 pass bundle アセット: 従来の icon、logo、background に加え、artwork（イベント主ビジュアル——旧 OS は strip 画像にフォールバック）と secondaryLogo（footer 領域表示）が追加。

票面レイアウト: 上部にイベント logo + 日時、中央に artwork 大画像、footer に座席情報（最大 4 フィールド）。複数日イベント（フェスなど）は単日の代わりに relevantTimeInterval を提供。固定座席なしの場合は admission level（General Admission など）を表示。

Event Guide（13:29）: 票面下に地図ジャンプ入口と Event Guide。Guide 内はクイック操作リンク（飲食注文、グッズ購入など）、天気予報、会場詳細（地図と待ち行列ラベル含む）、音楽プレイリスト。pass.json のセマンティックタグ URL、緯度経度、performerNames / artistIDs が駆動。

Live Activity 自動起動（16:38）: pass.json にセマンティックタグデータを入力すれば、最も関連性の高いタイミングで iPhone と Apple Watch 上に Live Activity が自動起動し、入場・座席情報を表示。

重要ポイント

何を作るか：EC サイトを Apple Pay JS SDK 1.2.0+ にアップグレードし、CSS ボタンを SDK コンポーネントに置換。非 Safari ユーザーも Apple Pay ボタンを表示。なぜ価値があるか：Chrome、Firefox など非 Safari ブラウザユーザーをカバーし、決済コンバージョンを直接向上。変更量は極小（2 ファイル）。どう始めるか：HTML <head> に SDK を導入、ボタン実装を置換、applePayCapabilities() でブラウザ判定ロジックを置き換え。
何を作るか：web 端末で Funds Transfer（資金振出）を組み込み、app 内口座から紐付け銀行カードへ出金。なぜ価値があるか：ウォレット系・EC 残高系プロダクトに web 出金入口が欠け、ユーザーは app を開く必要があった。今は任意デバイスのブラウザで完了可能。どう始めるか：payment request の modifiers に disbursementRequest を追加、merchantCapabilities に supports3DS（即時振出は supportsInstantFundsOut 追加）、requestShipping を false に。
何を作るか：payment request で Merchant Category Code を指定。なぜ価値があるか：決済 UI がカテゴリ非対応カードを自動フィルタし、カード制限による取引失敗を低減。特殊業種の加盟店に直接効く。どう始めるか：決済処理業者で MCC を確認し、payment request データに対応コードを追加。
何を作るか：イベント NFC チケット pass にセマンティックタグと新ビジュアルスタイルを追加。なぜ価値があるか：新スタイルで票面情報が明確（座席情報を footer に集約）、Event Guide が天気・地図・クイック操作を集約、Live Activity 自動起動でロック画面に入場情報——入場体験が票面探しから手首を上げるだけに。どう始めるか：pass.json にセマンティックタグデータを入力、preferredStyle: "posterEventTicket" を設定、artwork と secondaryLogo アセットを追加、旧 OS 互換の primary/secondary/auxiliary fields を維持。