本文へ移動
rdlabo.devdocs
English

プロジェクトで初期化する

Stripe をインポートし、公開可能キーを指定して initialize を呼び出します。JavaScript ランタイムごとに一度、支払い UI を作成・表示する前に実行してください。

import { Stripe } from '@capacitor-community/stripe';

export async function initialize(): Promise<void> {
  await Stripe.initialize({
    publishableKey: 'Your Publishable Key',
  });
}

method initialize(...)

Configures the Stripe SDK. Call this once before using any payment method.

initialize(opts: StripeInitializationOptions) => Promise<void>

interface StripeInitializationOptions

Prop Type Description Since
publishableKey string Stripe publishable key for the account that creates the client-side payment UI. Never pass a secret key to the client application. 3.0.0
stripeAccount string Connected account ID used when making client-side calls on behalf of a Stripe Connect account. 3.0.0

Stripe Dashboard で公開可能キーを作成します。シークレットキーをクライアントへ配布してはいけません。

Stripe Connect

連結アカウントに対してプラグイン API を呼び出すには、任意の stripeAccount を設定します。

await Stripe.initialize({
  publishableKey: 'Your Publishable Key',
  stripeAccount: 'acct_xxxxxxxxxxxxx',
});

Android の Google Pay は、アプリケーションメタデータの com.getcapacitor.community.stripe.stripe_account も読み取れます。Google Payを参照してください。

リダイレクトベースの支払い方法（iOS）

認証のためにアプリから離脱する支払い方法（PayPal や一部の銀行決済方法など）では、returnURL が必要です。iOS では、returnURL が設定されていない場合、PaymentSheet または PaymentFlow でリダイレクトベースの決済方法として適切なものを Stripe は提供しません。iOS return URL guide を参照してください。

アプリの ios/App/App/Info.plist にカスタム URL スキームを登録します。your-app をアプリ固有のスキームに置き換えてください:

ios/App/App/Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your-app</string>
    </array>
  </dict>
</array>

そのスキームを使って createPaymentSheet または createPaymentFlow に URL を渡し、条件に一致する app-open イベントを Stripe に転送します:

import { App } from '@capacitor/app';
import { Stripe } from '@capacitor-community/stripe';

const STRIPE_RETURN_URL = 'your-app://stripe-redirect';

await App.addListener('appUrlOpen', async ({ url }) => {
  if (url.startsWith(STRIPE_RETURN_URL)) {
    await Stripe.handleURLCallback({ url });
  }
});

await Stripe.createPaymentSheet({
  paymentIntentClientSecret,
  returnURL: STRIPE_RETURN_URL,
});

createPaymentFlow でも同じ設定を行います。Info.plist のカスタムスキーム、returnURL のスキーム、そしてリスナーがチェックする URL は一致している必要があります。支払い方法の利用可否は、Intent、通貨、国、Stripe アカウント、ダッシュボード設定、そして Stripe SDK のサポート状況にも依存します。

handleURLCallback

handleURLCallback は iOS 専用です。受け取った return URL を Stripe SDK に渡すことで、リダイレクトベースの認証を完了し、ブラウザを閉じられるようにします。

method handleURLCallback(...)

Passes an incoming return URL back to the Stripe SDK after redirect-based
authentication.

iOS only. Call this from your app URL handler when Stripe redirects back
to the application.

handleURLCallback(opts: StripeURLHandlingOptions) => Promise<void>

interface StripeURLHandlingOptions

Prop Type Description Since
url string Full callback URL received by the application. 4.0.0

このメソッドは Android または Web では未実装です。一致する Stripe の returnURL のみを渡してください。Stripe が URL を処理できない場合、Promise は拒否されるため、通常のディープリンク処理を続けてください。

フレームワークでの配線

選んだフレームワークの起動処理から initialize を呼び出します。各ガイドの標準パスを使ってください。

  • Vanilla JS — defineCustomElements() のあとで initialize
  • Angular — アプリケーション起動時の provideAppInitializer
  • React — CapacitorStripeProvider がプラグインを初期化
GitHubでこのページを編集