Tap to Pay
Tap to Pay は、対応するスマートフォンやタブレットだけで非接触決済を受け付けます。別のカードリーダーは不要です。設定と接続トークンを準備し、TerminalConnectTypes.TapToPay を使用します。
プラットフォーム要件
| プラットフォーム | 対応 | 補足 |
|---|---|---|
| Android | 対応 | NFC対応端末、位置情報権限、Stripeの利用資格。minSdkVersion 26 |
| iOS | 対応 | Tap to Pay on iPhone。アカウント確認は iOS 16.4以降 |
| Web | 非対応 | TapToPay の探索は利用不可 |
Stripe Dashboard で Terminal を設定し、Location を作成します。その locationId を discoverReaders に渡してください。
セットアップ手順
- アプリケーションレベルのリスナーを登録する。
RequestedConnectionTokenとsetConnectionTokenで認証付きトークンプロバイダーを登録し、initializeを呼ぶ。- iOS では
isTapToPayAccountLinkedを呼ぶ（結果はキャッシュしない）。 - Android では任意で
setTapToPayUxConfigurationを呼ぶ。 TapToPayとlocationIdでdiscoverReadersを実行する。- 見つかったリーダーを
connectReaderへ渡す。 - 支払いを受け付けると同様に
card_presentPaymentIntent を収集・確定する。
method initialize(...)
Initializes the Stripe Terminal SDK and its connection-token provider.
Call this once before discovering readers.
When tokenProviderEndpoint is provided, the plugin sends a POST request
and expects { secret: string }. When it is omitted, handle
RequestedConnectionToken and call setConnectionToken() instead.
initialize(options: StripeTerminalInitializationOptions) => Promise<void>
アカウント連携を確認する
isTapToPayAccountLinked は iOS 16.4以降専用です。事前に initialize() が完了している必要がありますが、リーダー接続やNFCの起動は不要です。結果は呼び出すたび Apple から取得されるため、isLinked をキャッシュしないでください。Stripe Connect では onBehalfOf に連結アカウントIDを渡します。
Android と Web では拒否されるため、プラットフォーム判定または .catch() で保護します。
method isTapToPayAccountLinked(...)
Check whether the merchant has accepted Apple's Tap to Pay on iPhone
Terms and Conditions.
iOS only, and requires iOS 16.4 or later. initialize() must have been
called first because the SDK needs a connection token provider, but no
reader connection is required and the call does not activate the device.
The answer is read from Apple on every call. Apple's Tap to Pay on iPhone
requirements state that acceptance state must be retrieved from Apple
rather than from a local variable, so do not cache the result.
isTapToPayAccountLinked(options?: IsTapToPayAccountLinkedOptions | undefined) => Promise<{ isLinked: boolean; }>
interface IsTapToPayAccountLinkedOptions
Options for isTapToPayAccountLinked.
| Prop | Type | Description | Since |
|---|---|---|---|
onBehalfOf |
string |
Connected account ID, for Stripe Connect platforms. Omit to check the account that owns the API key. | 8.2.0 |
UX設定
setTapToPayUxConfiguration は Android 専用です。initialize() 後、connectReader() 前に呼びます。iOS は未実装、Web はログを出して終了します。
Android では colors と darkMode を反映します。TypeScript の tapZone は宣言されていますが、v8.2.1 の Android Terminal SDK には渡されません。
method setTapToPayUxConfiguration(...)
Configure the Tap to Pay UX appearance (Android only).
Call this after initialize() but before connectReader().
Has no effect on iOS or web platforms.
setTapToPayUxConfiguration(options: TapToPayUxConfiguration) => Promise<void>
interface TapToPayUxConfiguration
Configuration for the Tap to Pay UX (Android only).
| Prop | Type | Description | Since |
|---|---|---|---|
colors |
TapToPayColorScheme |
Color scheme for the Tap to Pay screen. | 8.1.0 |
darkMode |
TapToPayDarkMode |
Dark-mode setting for the Tap to Pay screen. | 8.1.0 |
tapZone |
TapToPayTapZone |
Position of the tap indicator on screen. | 8.1.0 |
interface TapToPayColorScheme
Color scheme for the Tap to Pay screen.
| Prop | Type | Description | Since |
|---|---|---|---|
primary |
TapToPayColor |
Primary color for the tap-zone indicator. Use a hex string or default. |
8.1.0 |
success |
TapToPayColor |
Success-state color. Use a hex string or default. |
8.1.0 |
error |
TapToPayColor |
Error-state color. Use a hex string or default. |
8.1.0 |
type alias TapToPayColor
'default' | string
type alias TapToPayTapZone
{ type: 'default' } | { type: 'front'; xBias: number; yBias: number } | { type: 'behind'; xBias: number; yBias: number } | { type: 'above'; bias?: number } | { type: 'below'; bias?: number } | { type: 'left'; bias?: number } | { type: 'right'; bias?: number }
enum TapToPayDarkMode
| Member | Value |
|---|---|
System |
'SYSTEM' |
Dark |
'DARK' |
Light |
'LIGHT' |
探索して接続する
TerminalConnectTypes.TapToPay と locationId で探索します。シミュレーションでは TerminalConnectTypes.Simulated ではなく、initialize の isTest: true を使用します。
探索結果のリーダーを接続します。autoReconnectOnUnexpectedDisconnect は既定で false です。iOS の merchantDisplayName と onBehalfOf は接続設定へ渡され、Android では PaymentIntent 側に設定します。
method discoverReaders(...)
Discovers readers using the requested transport. The returned readers are
snapshots; listen for DiscoveredReaders when continuous discovery can
produce additional results.
discoverReaders(options: DiscoverReadersOptions) => Promise<{ readers: ReaderInterface[]; }>
method connectReader(...)
Connects to a reader returned by discoverReaders().
connectReader(options: ConnectReaderOptions) => Promise<void>
接続後、サーバーで作成した card_present PaymentIntent を collectPaymentMethod と confirmPaymentIntent で処理します。
制限事項
- Web は Tap to Pay を探索・接続できません。
- UXの色とダークモードは Android 専用です。
- アカウント連携状態は iOS 専用で、毎回 Apple から再取得します。
tapZoneは現在の Android SDK に接続されていません。- 任意のリーダー更新を決済中にインストールしないでください。
- シークレットキーと接続トークン作成はバックエンドに保持してください。
import {
StripeTerminal,
TapToPayDarkMode,
TerminalConnectTypes,
} from '@capacitor-community/stripe-terminal';
import { Capacitor } from '@capacitor/core';
// Register the authenticated RequestedConnectionToken provider first.
await StripeTerminal.initialize({ isTest: true });
if (Capacitor.getPlatform() === 'ios') {
const { isLinked } = await StripeTerminal.isTapToPayAccountLinked();
console.log(isLinked);
}
if (Capacitor.getPlatform() === 'android') {
await StripeTerminal.setTapToPayUxConfiguration({
colors: { primary: '#FF5733' },
darkMode: TapToPayDarkMode.Light,
});
}
const { readers } = await StripeTerminal.discoverReaders({
type: TerminalConnectTypes.TapToPay,
locationId: '**************',
});
const reader = readers[0];
if (!reader) throw new Error('Tap to Pay is not available on this device');
await StripeTerminal.connectReader({
reader,
autoReconnectOnUnexpectedDisconnect: true,
});