コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要
バージョン管理
API バージョンのアップグレード
開発者向けのツール
Stripe 健全性アラートLLM を使用した構築Visual Studio Code をご利用の場合ファイルのアップロード
セキュリティ
Stripe を拡張する
Stripe Apps
パートナー
パートナー認定

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Stripe Apps の埋め込み導入ガイド非公開プレビュー

Stripe Apps の埋め込みコンポーネントを使用して、顧客がサードパーティーアプリケーションで支払いデータを管理できるようにします。

ページをコピー

顧客は、ビジネスワークフローを完了するためにすでに使用しているツールで、支払いデータをすぐに利用できることを期待しています。アプリの埋め込みコンポーネントを使用すると、顧客は Stripe でサードパーティーのアプリケーションを使用できるようになります。

アプリの埋め込みコンポーネントを使用すると、Stripe 向けに構築されたシステムをプラットフォームに埋め込むことができ、顧客は Stripe のサイトにとどまったまま任意のサードパーティーアプリケーションを使用できるようになります。QuickBooks や Xero などのアプリケーションとデータを直接同期できる、事前構築済みの UI コンポーネントをご使用ください。

Connect の埋め込みコンポーネントを導入する

Connect.js を設定して、連結アカウントのダッシュボード機能をウェブサイトに追加することができます。

埋め込み Stripe Apps はプライベートプレビュー版コンポーネントを使用するため、Stripe SDK のプレビューバージョンを使用する必要があります。プライベートプレビュー版コンポーネントの詳細をご覧ください。

実装するアプリを選択する

Stripe は以下のアプリの実装をサポートしています。

実装可能アプリアプリ ID
QuickBooks Sync by Acodeicom.example.acodeistripeapp
Xero sync by Xerocom.xero.stripeapp
Mailchimpmailchimp

アプリインストールを設定する

選択したアプリのアプリインストール埋め込みコンポーネントを表示します。アプリをインストールすると、サードパーティーアプリに Stripe ユーザーデータへのアクセス権が付与され、プラットフォーム、Stripe、サードパーティーアプリ間の接続が作成されます。コンポーネントには uninstalled と installed の 2 つの状態があります。インストールイベントトリガーをリッスンして、カスタムの UX フローを構築するか、自社のバックエンドで更新を行います。

アカウントセッションの作成時に、components パラメーターで app_install と app_viewport を指定して、アプリのインストールと表示コンポーネントを有効にします。allowed_apps の features パラメーターを指定して、表示するアプリを有効にしてください。

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-04-30.basil; embedded_connect_beta=v2;" \
  -d account={{CONNECTED_ACCOUNT_ID}} \
  -d "components[app_install][enabled]"=true \
  -d "components[app_install][features][allowed_apps][]"=APP_ID \
  -d "components[app_viewport][enabled]"=true \
  -d "components[app_viewport][features][allowed_apps][]"=APP_ID

アカウントセッションを作成して、ConnectJS を初期化すると、フロントエンドにアプリインストールコンポーネントを表示できます。

app-install.js
const appInstall = stripeConnectInstance.create('app-install');
appInstall.setApp('{{APP_ID}}');
container.appendChild(appInstall);

この埋め込みコンポーネントは、次のパラメーターに対応します。

方法タイプ説明
setAppstringSets the ID of the App your connected account can install. See the list of available apps.

You can configure custom behavior based on the current or updated state of an install.

app-install.js
// index.html
<div id="app-install-container"></div>

// index.js

// Do something when install state fetched on render
const handleAppInstallFetched = (response) => {
  console.log(`Install state fetched for app  ${response.appId} to ${response.state}`);
};

// Do something when install state changes
const handleAppInstallChanged = (response) => {
  console.log(`Install state changed for app  ${response.appId} to ${response.state}`);
};


const container = document.getElementById('app-install-container');
const appInstall = stripeConnectInstance.create('app-install');
appInstall.setApp('{{APP_ID}}');
appInstall.setOnAppInstallStateFetched(handleAppInstallFetched);
appInstall.setOnAppInstallStateChanged(handleAppInstallChanged);
container.appendChild(appInstall);
方法説明変数
setOnAppInstallStateFetchedAllows users to specify custom behavior in a callback function on install fetch.
  • response.appId: The app installed
  • response.state: The state of the install INSTALLED | UNINSTALLED
setOnAppInstallStateChangedAllows users to specify custom behavior in a callback function when the install state has changed.
  • response.appId: The app installed
  • response.state: The state of the install INSTALLED | UNINSTALLED

アプリの設定

選択したアプリのアプリビューポートの埋め込みコンポーネントを表示して、アプリのコア機能 (OAuth を使用したソフトウェアアカウントへの接続、アカウント登録、サービスの設定、取引の同期状態など) を有効にします。オプションの HTML 属性として user_id (お客様のプラットフォームで表されるビジネス) を渡します。サードパーティーアプリはこれを使用して、OAuth の後にユーザーダッシュボードへリダイレクトされる動的 URL を作成します。

app-viewport.js
const appViewport = stripeConnectInstance.create('app-viewport');
appViewport.setApp('{{APP_ID}}');
appViewport.setAppData({userId: '{{PLATFORM_USER_ID}}'});
container.appendChild(appViewport);

This embedded component supports the following parameters:

方法Type説明
setAppstringSets the ID of the App your connected account can render. See available apps in the Embedded Stripe Apps integration guide.
setAppDataRecord<String, String>Sets data pertaining to your platform consumed by the App.

on behalf of (OBO) の Connect 送信先のカスタマイズ

以下のデータ標準化されたデータスキーマを使用して連結アカウントのデスティネーション支払いを更新することで、必須および任意の取引データを選択したアプリに渡します。デスティネーション支払いには Customer (顧客) オブジェクトを渡す必要があります。デスティネーション支払いの更新が必要になる状況は、次の 3 つです。

  • 1 回限りの支払いの完了
  • 継続支払いの完了
  • 支払いの返金
Field or key nameFormat (standard CSV rules apply)説明Required
charges.customerString (ID)Stripe Customer ID (belonging to the connected account) attached to a destination Charge object. Transactions don’t sync to apps (such as Xero and QBO) if this field isn’t present.Required
customer.nameStringCustomer’s full name
customer.emailStringCustomer’s email address
customer.address.<>String (multi-field)Customer’s physical address (can be used for both billing and shipping)
charges.metadata.[refund_amount]String (cents integer)Mirroring charges.amount_refunded in base currency sub-units (‘350’ = 3.50 USD)Required by Quickbooks Online sync by Acodei
charges.metadata.[refund_reason]stringReason for the refund
charges.metadata.[currency_converted]true | false | nullSet to true if currency has been converted, for example, if the presentment currency differs from the settlement currencyRequired by Quickbooks Online sync by Acodei if using fees_names metadata
customer.metadata.[platform_customer_ID]StringCustomer ID as recorded in the platform’s system*
charges.metadata.[platform_product_ID]String, CSV multiple productsProduct IDs as recorded in the platform’s system
charges.metadata.[platform_product_name]String, CSV multiple productsProduct name as recorded in the platform’s system
charges.metadata.[platform_product_quantity]String, CSV multiple productsQuantity of each product corresponding to the ID and name array
charges.metadata.[platform_product_value]Integer, CSV multiple productsThe individual product value (price or cost) corresponding to the Product ID and name. Base currency sub-units (‘350’ = 3.50 USD)
charges.metadata.[platform_product_tag]String, CSV multiple productsProduct tag or category corresponding to the ID and name array
charges.metadata.[platform_order_ID]StringOrder ID as recorded in the platform’s system
charges.metadata.[platform_charge_ID]StringCharge or transaction ID as recorded in the platform’s system and visible to the business
charges.metadata.[fees_names]String, CSV multiple feesName of fees the user is paying (expense) of any kind related to the transaction that aren’t captured in the Charge (for example, credit processing fee or platform fee) If this field is populated, the charges.application_fee is ignored.
charges.metadata.[fees_values]Integer, CSV multiple feesValues of fees the user is paying (expense) of any kind related to the transaction that aren’t captured in the charge—for example, the credit processing fee or platform fee. Base currency sub-units (‘350’ = 350 USD)
charges.metadata.[revenues_names]String, CSV multiple revenuesFees (revenues) collected by the business related to this transaction (charge) that aren’t captured in the charge (for example, a convenience fee or tips)
charges.metadata.[revenues_values]Integer, CSV multiple revenuesValues of fees (revenues) collected by the business related to this transaction (charge). Base currency sub-units (‘350’ = 3.50 USD)
charges.metadata.[total_tax]IntegerTotal taxes associated with this transaction (charge). Base currency sub-units (‘350’ = 3.50 USD)
charges.metadata.[tax_names]String, CSV multiple taxesTax type names applied on a transaction allowing for multiple tax types, using an array (for example ‘GST’ or ‘sales’)
charges.metadata.[tax_rates]Float, CSV multiples taxesTax rates applied on a transaction corresponding to specified tax types as a percentage (for example, ‘3’ or ‘1.5’ corresponds to 3% GST and 1.5% sales tax)
charges.metadata.[tax_values]string, CSV multiple taxesTax values applied on a transaction corresponding to specified tax types. Base currency sub-units (‘350’ = 3.50 USD)

QuickBooks Sync by Acodei also requires charge updates with refund amounts written to metadata.

次のコードスニペットの例では、対象となるデスティネーション支払いに移動し、スキーマごとに更新する方法を示しています。

  1. 取引からデスティネーション支払いまで追跡します
const paymentOnPlatform = await StripeClient.paymentIntents.retrieve(
  "pi_3N6JL7LirQdaQn8E1Lpn7Dui",
);

const latestCharge = await StripeClient.charges.retrieve(
  paymentOnPlatform.latest_charge as string,
);

const transfer = await StripeClient.transfers.retrieve(
  latestCharge.transfer as string,
);


const payment = await StripeClient.charges.retrieve(
  transfer.destination_payment as string,
    undefined,
    {
        stripeAccount: transfer.destination as string,
      },
  );
  1. 顧客を作成したら、関連する顧客 ID とメタデータで支払いを更新します。データの受け渡しやアプリの同期を行うには、顧客はプラットフォームではなく、連結アカウントに属している必要があります。
const customer = await StripeClient.customers.create(
      {
        email: `jenny.rosen@example.com`,
        name: "Jenny Rosen",
	 address.city: "Brothers"
	 Address.state: "Oregon"
	 address.country: "USA"
	 address.line1: "27 Fredrick Ave"
	 address.postal_code: "97712"
       	 metadata: {
 	   platform_customer_ID: "K-123456"
	 },
      },
      {
        stripeAccount: accountId,
      },
    );
    const payment = await StripeClient.charges.update(
      id,
      {
        customer: customer.id,
        metadata: {
          product_name: "Creative writing course for PMs",
          platform_product_ID: "P-123456"
          platform_order_ID: "O-123456"
        },
      },
      {
        stripeAccount: accountId,
      },
    );

ダイレクト支払い

システムの埋め込みによって、Stripe に保存されている支払い、顧客、商品のすべてのデータにアクセスできます。以下のメタデータスキーマを使用して、任意のプラットフォームデータをアプリに渡すことができます。

フィールドまたはキーの名前形式 (標準の CSV ルールを適用)説明
customer.metadata.[platform_customer_ID]文字列プラットフォームのシステムに記録されている顧客 ID
payment.metadata.[platform_product_ID]文字列、CSV の複数製品このトランザクションに関連してプラットフォームのシステムに記録されている製品 ID (Stripe 製品 ID と異なる場合)
payment.metadata.[platform_product_name]文字列、CSV の複数製品このトランザクションに関連してプラットフォームのシステムに記録されている製品名またはサービス名 (Stripe 製品名と異なる場合)
payment.metadata.[platform_product_value]文字列、CSV の複数製品ID および名前の配列に対応する個々の製品の金額 (価格またはコスト) (Stripe 製品の金額と異なる場合)
payment.metadata.[platform_order_ID]文字列このトランザクションに関連してプラットフォームのシステムに記録されている注文 ID (支払い)
payment.metadata.[platform_charge_ID]文字列プラットフォームに記録され、ユーザーに表示される支払いまたは取引の ID (Stripe 決済 ID と異なる場合)
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc