本文へ移動
rdlabo.dev
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を参照してください。

handleURLCallback

handleURLCallback は iOS 専用です。PaymentSheet または PaymentFlow の returnURL と組み合わせ、利用者が銀行ページから戻った後に Stripe が 3D Secure を完了できるようにします。

await Stripe.createPaymentSheet({
  paymentIntentClientSecret,
  returnURL: 'your-app://stripe-redirect',
});

// iOS の URL オープンハンドラーから、返された URL を渡して呼び出します。
await Stripe.handleURLCallback({ url });

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 が URL を処理しなかった場合、Promise は拒否されるため、通常のディープリンク処理を続けてください。

使用例

Angular

ルートコンポーネントから初期化します。Angularを参照してください。

src/app/app.component.ts
import { Component } from '@angular/core';
import { Stripe } from '@capacitor-community/stripe';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {
  constructor() {
    void Stripe.initialize({ publishableKey: 'Your Publishable Key' });
  }
}

React

CapacitorStripeProvider がプラグインを初期化します。Reactを参照してください。