From b397cc97327408e1a385e0ea4083de76aa45f39a Mon Sep 17 00:00:00 2001 From: rdlabo Date: Wed, 19 Aug 2026 19:48:06 +0900 Subject: [PATCH 1/6] docs(stripe): sync initialize guide with upstream iOS return URL flow Align EN/JA Initialize docs with capacitor-community/stripe main, including Info.plist URL scheme setup and appUrlOpen forwarding. Co-authored-by: Cursor --- .../generated/projects/stripe.ja.generated.ts | 9 ++- src/stripe/docs/initialize.md | 58 +++++++++++++++---- src/stripe/docs/ja/initialize.md | 53 ++++++++++++++--- 3 files changed, 97 insertions(+), 23 deletions(-) diff --git a/src/app/generated/projects/stripe.ja.generated.ts b/src/app/generated/projects/stripe.ja.generated.ts index 1707ae5..2a266ff 100644 --- a/src/app/generated/projects/stripe.ja.generated.ts +++ b/src/app/generated/projects/stripe.ja.generated.ts @@ -342,7 +342,7 @@ export const PROJECT = { "file": "initialize.md", "section": "メソッド", "path": "/projects/capacitor-stripe/docs/initialize", - "html": "

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

\n
import { Stripe } from '@capacitor-community/stripe';\n\nexport async function initialize(): Promise<void> {\n  await Stripe.initialize({\n    publishableKey: 'Your Publishable Key',\n  });\n}\n

method initialize(...)

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

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

\n\n\n

interface StripeInitializationOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionSince
publishableKeystringStripe publishable key for the account that creates the client-side payment UI. Never pass a secret key to the client application.3.0.0
stripeAccountstringConnected account ID used when making client-side calls on behalf of a Stripe Connect account.3.0.0

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

\n\n\n

Stripe Connect

\n

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

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

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

\n

handleURLCallback

\n

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

\n
await Stripe.createPaymentSheet({\n  paymentIntentClientSecret,\n  returnURL: 'your-app://stripe-redirect',\n});\n\n// iOS の URL オープンハンドラーから、返された URL を渡して呼び出します。\nawait Stripe.handleURLCallback({ url });\n

method handleURLCallback(...)

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

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

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

\n\n\n\n

interface StripeURLHandlingOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionSince
urlstringFull callback URL received by the application.4.0.0

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

\n\n\n

使用例

\n

Angular

\n

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

\n
src/app/app.component.ts
import { Component } from '@angular/core';\nimport { Stripe } from '@capacitor-community/stripe';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: 'app.component.html',\n  styleUrls: ['app.component.scss'],\n})\nexport class AppComponent {\n  constructor() {\n    void Stripe.initialize({\n      publishableKey: 'Your Publishable Key',\n    });\n  }\n}\n

React

\n

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

\n", + "html": "

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

\n
import { Stripe } from '@capacitor-community/stripe';\n\nexport async function initialize(): Promise<void> {\n  await Stripe.initialize({\n    publishableKey: 'Your Publishable Key',\n  });\n}\n

method initialize(...)

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

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

\n\n\n

interface StripeInitializationOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionSince
publishableKeystringStripe publishable key for the account that creates the client-side payment UI. Never pass a secret key to the client application.3.0.0
stripeAccountstringConnected account ID used when making client-side calls on behalf of a Stripe Connect account.3.0.0

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

\n\n\n

Stripe Connect

\n

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

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

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

\n

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

\n

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

\n

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

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

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

\n
import { App } from '@capacitor/app';\nimport { Stripe } from '@capacitor-community/stripe';\n\nconst STRIPE_RETURN_URL = 'your-app://stripe-redirect';\n\nawait App.addListener('appUrlOpen', async ({ url }) => {\n  if (url.startsWith(STRIPE_RETURN_URL)) {\n    await Stripe.handleURLCallback({ url });\n  }\n});\n\nawait Stripe.createPaymentSheet({\n  paymentIntentClientSecret,\n  returnURL: STRIPE_RETURN_URL,\n});\n

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

\n

handleURLCallback

\n

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

\n

method handleURLCallback(...)

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

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

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

\n\n\n\n

interface StripeURLHandlingOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropTypeDescriptionSince
urlstringFull callback URL received by the application.4.0.0

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

\n\n\n

使用例

\n

Angular

\n

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

\n
src/app/app.component.ts
import { Component } from '@angular/core';\nimport { Stripe } from '@capacitor-community/stripe';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: 'app.component.html',\n  styleUrls: ['app.component.scss'],\n})\nexport class AppComponent {\n  constructor() {\n    void Stripe.initialize({\n      publishableKey: 'Your Publishable Key',\n    });\n  }\n}\n

React

\n

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

\n", "headings": [ { "id": "method-initialize(...)", @@ -359,10 +359,15 @@ export const PROJECT = { "text": "Stripe Connect", "level": 2 }, + { + "id": "%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E6%94%AF%E6%89%95%E3%81%84%E6%96%B9%E6%B3%95%EF%BC%88ios%EF%BC%89", + "text": "リダイレクトベースの支払い方法（iOS）", + "level": 2 + }, { "id": "handleurlcallback", "text": "handleURLCallback", - "level": 2 + "level": 3 }, { "id": "method-handleurlcallback(...)", diff --git a/src/stripe/docs/initialize.md b/src/stripe/docs/initialize.md index 0970867..3b80060 100644 --- a/src/stripe/docs/initialize.md +++ b/src/stripe/docs/initialize.md @@ -16,9 +16,9 @@ export async function initialize(): Promise { } ``` -!::initialize:: + -!::StripeInitializationOptions:: + Create a publishable key in the [Stripe Dashboard](https://dashboard.stripe.com/register). Never ship the secret key to the client. @@ -33,27 +33,61 @@ await Stripe.initialize({ }); ``` -On Android, Google Pay can also read `com.getcapacitor.community.stripe.stripe_account` from application metadata. See [Google Pay](/docs/google-pay). +On Android, Google Pay can also read `com.getcapacitor.community.stripe.stripe_account` from application metadata. See [Google Pay](./google-pay.md). -## handleURLCallback +## Redirect-based payment methods on iOS -`handleURLCallback` is iOS only. Use it with `returnURL` on PaymentSheet or PaymentFlow so Stripe can finish [3D Secure](https://stripe.com/docs/payments/3d-secure#return-url) after the customer returns from the bank page. +Payment methods that leave your app for authentication, such as PayPal and some bank payment methods, require a return URL. On iOS, Stripe does not offer otherwise eligible redirect-based payment methods in PaymentSheet or PaymentFlow when `returnURL` is not configured. See Stripe's [iOS return URL guide](https://docs.stripe.com/payments/mobile/accept-payment?platform=ios#ios-set-up-return-url). + +Register a custom URL scheme for your app in `ios/App/App/Info.plist`. Replace `your-app` with a scheme unique to your application: + +```xml plist:ios/App/App/Info.plist +CFBundleURLTypes + + + CFBundleTypeRole + Editor + CFBundleURLName + $(PRODUCT_BUNDLE_IDENTIFIER) + CFBundleURLSchemes + + your-app + + + +``` + +Pass a URL using that scheme to `createPaymentSheet` or `createPaymentFlow`, then forward matching app-open events to Stripe: ```ts +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: 'your-app://stripe-redirect', + returnURL: STRIPE_RETURN_URL, }); - -// Call from the iOS URL open handler with the returned URL. -await Stripe.handleURLCallback({ url }); ``` -!::handleURLCallback:: +Use the same setup with `createPaymentFlow`. The custom scheme in `Info.plist`, the scheme in `returnURL`, and the URL checked by the listener must match. Payment-method availability also depends on the Intent, currency, country, Stripe account, Dashboard settings, and Stripe SDK support. + +### handleURLCallback + +`handleURLCallback` is iOS only. It passes the incoming return URL to the Stripe SDK so redirect-based authentication can finish and the browser can close. + + -!::StripeURLHandlingOptions:: + -The method is not implemented on Android or web. If Stripe did not handle the URL, the promise rejects and you should continue with your normal deep-link handling. +The method is not implemented on Android or web. Only pass matching Stripe return URLs to it. If Stripe does not handle the URL, the promise rejects and you should continue with your normal deep-link handling. ## Example diff --git a/src/stripe/docs/ja/initialize.md b/src/stripe/docs/ja/initialize.md index 9b2e2f4..d0c4836 100644 --- a/src/stripe/docs/ja/initialize.md +++ b/src/stripe/docs/ja/initialize.md @@ -34,24 +34,59 @@ await Stripe.initialize({ Android の Google Pay は、アプリケーションメタデータの `com.getcapacitor.community.stripe.stripe_account` も読み取れます。[Google Pay](/docs/google-pay)を参照してください。 -## handleURLCallback +## リダイレクトベースの支払い方法（iOS） + +認証のためにアプリから離脱する支払い方法（PayPal や一部の銀行決済方法など）では、returnURL が必要です。iOS では、`returnURL` が設定されていない場合、PaymentSheet または PaymentFlow でリダイレクトベースの決済方法として適切なものを Stripe は提供しません。[iOS return URL guide](https://docs.stripe.com/payments/mobile/accept-payment?platform=ios#ios-set-up-return-url) を参照してください。 + +アプリの `ios/App/App/Info.plist` にカスタム URL スキームを登録します。`your-app` をアプリ固有のスキームに置き換えてください: + +```xml plist:ios/App/App/Info.plist +CFBundleURLTypes + + + CFBundleTypeRole + Editor + CFBundleURLName + $(PRODUCT_BUNDLE_IDENTIFIER) + CFBundleURLSchemes + + your-app + + + +``` -`handleURLCallback` は iOS 専用です。PaymentSheet または PaymentFlow の `returnURL` と組み合わせ、利用者が銀行ページから戻った後に Stripe が [3D Secure](https://stripe.com/docs/payments/3d-secure#return-url) を完了できるようにします。 +そのスキームを使って `createPaymentSheet` または `createPaymentFlow` に URL を渡し、条件に一致する app-open イベントを Stripe に転送します: ```ts +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: 'your-app://stripe-redirect', + returnURL: STRIPE_RETURN_URL, }); - -// iOS の URL オープンハンドラーから、返された URL を渡して呼び出します。 -await Stripe.handleURLCallback({ url }); ``` -!::handleURLCallback:: -!::StripeURLHandlingOptions:: +`createPaymentFlow` でも同じ設定を行います。Info.plist のカスタムスキーム、returnURL のスキーム、そしてリスナーがチェックする URL は一致している必要があります。支払い方法の利用可否は、Intent、通貨、国、Stripe アカウント、ダッシュボード設定、そして Stripe SDK のサポート状況にも依存します。 + +### handleURLCallback + +`handleURLCallback` は iOS 専用です。受け取った return URL を Stripe SDK に渡すことで、リダイレクトベースの認証を完了し、ブラウザを閉じられるようにします。 + + + + -このメソッドは Android と Web では未実装です。Stripe が URL を処理しなかった場合、Promise は拒否されるため、通常のディープリンク処理を続けてください。 +このメソッドは Android または Web では未実装です。一致する Stripe の returnURL のみを渡してください。Stripe が URL を処理できない場合、Promise は拒否されるため、通常のディープリンク処理を続けてください。 ## 使用例 From 84764b076978bc7233d12831e720463e297295d8 Mon Sep 17 00:00:00 2001 From: rdlabo Date: Wed, 19 Aug 2026 20:39:43 +0900 Subject: [PATCH 2/6] fix(docs): let TOC take remaining width Co-authored-by: Cursor --- src/app/docs/docs-page.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/docs/docs-page.ts b/src/app/docs/docs-page.ts index 43fdb9b..9050dd4 100644 --- a/src/app/docs/docs-page.ts +++ b/src/app/docs/docs-page.ts @@ -27,8 +27,8 @@ import { SeoService } from './seo.service'; [class]=" 'grid items-start justify-center pt-[42px] max-[960px]:block max-[960px]:pt-7 ' + (doc.codes.length - ? 'grid-cols-[minmax(420px,680px)_minmax(420px,1fr)_220px] max-[1500px]:grid-cols-[minmax(420px,800px)_minmax(420px,1fr)] max-[1100px]:grid-cols-[minmax(380px,1fr)_minmax(380px,1fr)]' - : 'grid-cols-[minmax(0,800px)_220px] max-[1500px]:grid-cols-[minmax(0,800px)]') + ? 'grid-cols-[minmax(420px,680px)_minmax(420px,1fr)_minmax(0,1fr)] max-[1500px]:grid-cols-[minmax(420px,800px)_minmax(420px,1fr)] max-[1100px]:grid-cols-[minmax(380px,1fr)_minmax(380px,1fr)]' + : 'grid-cols-[minmax(0,800px)_minmax(0,1fr)] max-[1500px]:grid-cols-[minmax(0,800px)]') " >
}