本文へ移動
rdlabo.devdocs
English

イベントリスナー

結果を受け取る標準経路としてイベントを使用します。JavaScript アプリケーションの起動ごとに、アプリケーションレベルの結果リスナーを一度だけ登録してください。main.ts、アプリケーション初期化処理、起動時に生成されるシングルトンサービスなどで、Stripe の UI を表示する前のできるだけ早い段階に登録します。

import {
  ApplePayEventsEnum,
  GooglePayEventsEnum,
  PaymentFlowEventsEnum,
  PaymentSheetEventsEnum,
  Stripe,
} from '@capacitor-community/stripe';

await Promise.all([
  Stripe.addListener(PaymentSheetEventsEnum.Completed, () => handleCompleted()),
  Stripe.addListener(PaymentSheetEventsEnum.Canceled, () => handleCanceled()),
  Stripe.addListener(PaymentSheetEventsEnum.Failed, (error) => handleFailed(error)),
]);

interface PluginListenerHandle

Prop Type
remove () => Promise<void>

Android Activity の再生成

Android では Stripe の UI が開いている間に Activity と JavaScript ランタイムが再生成されることがあるため、特に重要です。新しい JavaScript ランタイムは起動処理中にリスナーを登録し直す必要があります。

元の JavaScript Promise と Capacitor の PluginCall は復元できません。再生成後に Stripe がネイティブ結果を返した場合、プラグインはリスナーが利用可能になるまで対応する結果イベントを保持します。対象は PaymentSheet、PaymentFlow、Google Pay の Completed、Canceled、Failed と、PaymentFlow の Created です。

元の呼び出しが残っている場合は従来どおり、Promise が解決され、イベントも保持されずに配信されます。このフォールバックはネイティブ結果をメモリ上で受け渡すものであり、永続ストレージではありません。OS によるプロセス終了後の復旧は保証しません。

アプリケーションレベルの結果リスナーは JavaScript ランタイムの存続中ずっと登録しておいてください。Android の再生成後も支払い結果が必要なら、ボタンハンドラーで追加し、ページ破棄時に削除する設計にはしないでください。

PaymentSheet のイベント

method addListener(PaymentSheetEventsEnum.Loaded, ...)

Emitted when PaymentSheet has been created and is ready to present.

addListener(eventName: PaymentSheetEventsEnum.Loaded, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentSheetEventsEnum.FailedToLoad, ...)

Emitted when PaymentSheet could not be created.

addListener(eventName: PaymentSheetEventsEnum.FailedToLoad, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(PaymentSheetEventsEnum.Completed, ...)

Emitted after the customer completes PaymentSheet.

addListener(eventName: PaymentSheetEventsEnum.Completed, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentSheetEventsEnum.Canceled, ...)

Emitted when the customer dismisses PaymentSheet.

addListener(eventName: PaymentSheetEventsEnum.Canceled, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentSheetEventsEnum.Failed, ...)

Emitted when PaymentSheet finishes with an error.

addListener(eventName: PaymentSheetEventsEnum.Failed, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

enum PaymentSheetEventsEnum

Member Value
Loaded 'paymentSheetLoaded'
FailedToLoad 'paymentSheetFailedToLoad'
Completed 'paymentSheetCompleted'
Canceled 'paymentSheetCanceled'
Failed 'paymentSheetFailed'

標準的な流れは次のとおりです。

  1. 起動時に結果リスナーを登録する。
  2. createPaymentSheet() を呼ぶ。
  3. Loaded を待つか、FailedToLoad を処理する。
  4. presentPaymentSheet() を呼ぶ。
  5. Completed、Canceled、Failed のいずれかを受け取る。

Canceled は利用者がシートを閉じたことを表し、例外ではありません。Failed と FailedToLoad にはエラー文字列が含まれます。クライアントイベントだけで注文を確定せず、Webhook で PaymentIntent または SetupIntent を確認してください。

PaymentFlow のイベント

method addListener(PaymentFlowEventsEnum.Loaded, ...)

Emitted when PaymentFlow has been created and is ready to present.

addListener(eventName: PaymentFlowEventsEnum.Loaded, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.FailedToLoad, ...)

Emitted when PaymentFlow could not be created.

addListener(eventName: PaymentFlowEventsEnum.FailedToLoad, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.Opened, ...)

Emitted when the PaymentFlow UI is presented.

addListener(eventName: PaymentFlowEventsEnum.Opened, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.Completed, ...)

Emitted after the collected payment details are confirmed.

addListener(eventName: PaymentFlowEventsEnum.Completed, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.Canceled, ...)

Emitted when the customer dismisses PaymentFlow.

addListener(eventName: PaymentFlowEventsEnum.Canceled, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.Failed, ...)

Emitted when PaymentFlow collection or confirmation fails.

addListener(eventName: PaymentFlowEventsEnum.Failed, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(PaymentFlowEventsEnum.Created, ...)

Emitted after payment details are collected and before confirmation. The
card number contains only the last four digits.

addListener(eventName: PaymentFlowEventsEnum.Created, listenerFunc: (info: { cardNumber: string; }) => void) => Promise<PluginListenerHandle>

enum PaymentFlowEventsEnum

Member Value
Loaded 'paymentFlowLoaded'
FailedToLoad 'paymentFlowFailedToLoad'
Opened 'paymentFlowOpened'
Created 'paymentFlowCreated'
Completed 'paymentFlowCompleted'
Canceled 'paymentFlowCanceled'
Failed 'paymentFlowFailed'
  1. 起動時に結果リスナーを登録する。
  2. createPaymentFlow() を呼ぶ。
  3. Loaded を待つか、FailedToLoad を処理する。
  4. presentPaymentFlow() を呼ぶ。
  5. Opened、続いて { cardNumber } を持つ Created、または Canceled を受け取る。
  6. confirmPaymentFlow() を呼ぶ。
  7. Completed、Canceled、Failed のいずれかを受け取る。

Apple Pay のイベント

method addListener(ApplePayEventsEnum.Loaded, ...)

Emitted when the Apple Pay request is ready to present.

addListener(eventName: ApplePayEventsEnum.Loaded, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.FailedToLoad, ...)

Emitted when the Apple Pay request could not be created.

addListener(eventName: ApplePayEventsEnum.FailedToLoad, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.Completed, ...)

Emitted after Apple Pay completes successfully.

addListener(eventName: ApplePayEventsEnum.Completed, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.Canceled, ...)

Emitted when the customer cancels Apple Pay.

addListener(eventName: ApplePayEventsEnum.Canceled, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.Failed, ...)

Emitted when Apple Pay fails.

addListener(eventName: ApplePayEventsEnum.Failed, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.DidSelectShippingContact, ...)

iOS only. Emitted when the customer selects a shipping contact. Use the
supplied updateId with updateApplePaySheet().

addListener(eventName: ApplePayEventsEnum.DidSelectShippingContact, listenerFunc: (data: DidSelectShippingContact) => void) => Promise<PluginListenerHandle>

method addListener(ApplePayEventsEnum.DidCreatePaymentMethod, ...)

iOS only. Emitted after Apple Pay creates its Stripe PaymentMethod.

addListener(eventName: ApplePayEventsEnum.DidCreatePaymentMethod, listenerFunc: (data: DidCreatePaymentMethod) => void) => Promise<PluginListenerHandle>

enum ApplePayEventsEnum

Member Value
Loaded 'applePayLoaded'
FailedToLoad 'applePayFailedToLoad'
Completed 'applePayCompleted'
Canceled 'applePayCanceled'
Failed 'applePayFailed'
DidSelectShippingContact 'applePayDidSelectShippingContact'
DidCreatePaymentMethod 'applePayDidCreatePaymentMethod'

DidSelectShippingContact には contact と updateId が含まれます。iOS では、その updateId と更新後の paymentSummaryItems を指定して updateApplePaySheet を呼びます。JavaScript が応答しない場合、ネイティブシートは25秒後に元の項目へ戻ります。updateApplePaySheet は Android と Web では未実装です。

DidCreatePaymentMethod には配送先 contact が含まれます。Apple は支払いが成功するまで住所全体を返しません。

Google Pay のイベント

method addListener(GooglePayEventsEnum.Loaded, ...)

Emitted when the Google Pay request is ready to present.

addListener(eventName: GooglePayEventsEnum.Loaded, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(GooglePayEventsEnum.FailedToLoad, ...)

Emitted when the Google Pay request could not be created.

addListener(eventName: GooglePayEventsEnum.FailedToLoad, listenerFunc: (error: string) => void) => Promise<PluginListenerHandle>

method addListener(GooglePayEventsEnum.Completed, ...)

Emitted after Google Pay completes successfully.

addListener(eventName: GooglePayEventsEnum.Completed, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(GooglePayEventsEnum.Canceled, ...)

Emitted when the customer cancels Google Pay.

addListener(eventName: GooglePayEventsEnum.Canceled, listenerFunc: () => void) => Promise<PluginListenerHandle>

method addListener(GooglePayEventsEnum.Failed, ...)

Emitted when Google Pay fails.

addListener(eventName: GooglePayEventsEnum.Failed, listenerFunc: () => void) => Promise<PluginListenerHandle>

enum GooglePayEventsEnum

Member Value
Loaded 'googlePayLoaded'
FailedToLoad 'googlePayFailedToLoad'
Completed 'googlePayCompleted'
Canceled 'googlePayCanceled'
Failed 'googlePayFailed'

Google Pay は Android と Web で利用できます。iOS では実装されていません。

GitHubでこのページを編集