コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要
バージョン管理
API バージョンのアップグレード
Essentials
ツール
Visual Studio Code をご利用の場合
機能
Stripe 健全性アラートファイルのアップロード
AI ソリューション
モデルコンテキストプロトコルエージェントを使用した AI SaaS 請求ワークフローの構築
セキュリティとプライバシー
Stripebot ウェブクローラー
Stripe を拡張する
Stripe Appsを構築する
パートナー
パートナー認定

Stripe Apps の使用を開始する

Stripe ダッシュボードでアプリを構築することで、アプリ開発の基礎を学習します。

このガイドでは、Stripe ダッシュボードの顧客の詳細ページで UI 拡張機能を使用して、「Hello, world!」サンプルアプリを構築します。

はじめに

  1. 既存の Connect 拡張機能がある場合は、Stripe Apps に移行をご覧ください。
  2. Stripe ダッシュボードにログインします。
  3. まだインストールしていない場合は、Stripe CLI をインストールし、同じアカウントを使用してログインします。
    Command Line
    homebrew
    ソースからインストールする
    No results
    # Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

    その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。

  4. CLI バージョン 1.12.4 以降を使用していることを確認します。これは以下を実行することで確認できます。
    Command Line
    stripe version
    Stripe の CLI バージョンが 1.12.4 より前の場合は、Stripe CLI バージョンを最新バージョンに更新してください。
  5. ノードがインストールされており、最新であることを確認します。
    Command Line
    node -v
    アプリの依存関係は、NPM または Yarn を使用して管理できます。最適な開発体験を得るために、最新の安定バージョンを使用してください。アプリを App Marketplace に公開する場合は、さらに次の制限が適用されます。
  • アカウントを申請する必要があります。
  • 現在、Stripe Marketplaceでアプリを公開している場合、プラットフォームアカウントになることはできません。

Stripe Apps CLI プラグインをインストールする

Stripe アプリの構築を開始するために、Stripe Apps CLI プラグインをインストールします。

Command Line
stripe plugin install apps

apps プラグインがすでにインストールされている場合は、バージョンが 1.5.12 以降であることを確認してください。

Command Line
stripe apps -v
# apps version 1.5.12

apps プラグインをアップグレードする必要がある場合は、以下のコマンドを実行します。

Command Line
stripe plugin upgrade apps

アプリを作成する

  1. 「Hello, world!」アプリの基本構造を構築します。

    Command Line
    stripe apps create helloworld

  2. 指示に従い、以下の情報を入力します。

    • ID: 自動生成されたアプリ ID を受け入れるか、カスタマイズします。Stripe は、これによってアプリを識別します。アプリ ID はグローバルに一意である必要があります。
    • 表示名: 表示名を入力します。これは、ダッシュボードに表示されるアプリの名前です。この名前は後でいつでも変更できます。

ディレクトリーファイルの構造は次のようになります。

  • src/views/: Stripe ダッシュボードで UI エレメントを作成する TypeScript ファイルのためのディレクトリー。ビューとも呼ばれます。
    • App.tsx: Stripe ダッシュボードに顧客詳細ページを表示するサンプルビュー。
    • App.test.tsx: App.tsx ビューの機能をテストするテストファイル。
  • stripe-app.json: アプリを Stripe プラットフォームに組み込む方法を説明するアプリマニフェストファイル。
  • package.json: アプリの依存関係を処理する専用のメタデータが格納されたファイル。
  • yarn.lock: 現バージョンのアプリの依存関係に関する情報をリストする自動生成されたファイル。
  • jest.config.ts: テストファイルを実行するための構成ファイル。
  • images.d.ts: Stripe アプリでイメージファイルをサポートするための型宣言。
  • tsconfig.json: TypeScript ファイルをコンパイルするための構成ファイル。
  • .eslintrc.json: TypeScript ファイルをリンティングする構成ファイル。
  • .vscode/extensions.json: 推奨される VS コード拡張機能を含むファイル。
  • .gitignore: git に特定のファイルまたはフォルダーを無視するように伝えるファイル。

Stripe Apps は React 17 のみをサポートしています。インストールするすべての依存関係が、このバージョンと互換性があることを確認してください。詳細については、UI拡張機能の仕組みをご覧ください。

アプリをプレビューする

アプリをローカルで実行し、更新し、変更内容をダッシュボードでプレビューできます。

  1. helloworld ディレクトリーに移動します。

    Command Line
    cd helloworld

  2. アプリをプレビューするには、ローカルの開発サーバーを起動します。

    Command Line
    stripe apps start

  3. Enter を押してブラウザーを開きます。

    メモ

    Stripe ダッシュボードに対応しているブラウザーをご使用ください。Safari はダッシュボードに対応していません。その他の更新内容については、GitHub 課題管理ブラウザーのサポートでご確認ください。

  4. 続行をクリックして、Stripe アカウントでアプリをプレビューします。

    プレビューモードを有効にするスクリーンショット

    アプリのプレビューを有効化

    Hello World アプリ

    ダッシュボードでのアプリ

アプリをプレビューする前にローカルネットワークアクセスを有効にしてください。

App ビューは、ダッシュボードの顧客の詳細ページでのみ有効になります。アプリが表示されない場合は、ダッシュボードで顧客を作成していることを確認してください。

アプリを構築する

ダッシュボードでアプリをプレビューしている間、ローカルの開発サーバーはアプリのリアルタイムの更新を有効にします。

  1. Stripe ダッシュボードページを開き、開発サーバーを実行した状態で、App.tsx ファイルのタイトルを変更します。ファイルを保存し、アプリの変更内容を確認します。

  2. 同じファイルで </ContextView> 終了タグから > を削除し、ファイルを保存してエラーを確認します。

    Hello World エラー

    Stripe ダッシュボード、ブラウザーの開発者ツール、Stripe CLI のエラーを解決できます。

  3. 開発サーバーを停止するには、コマンドラインから Ctrl+C を使用します。

これで、サンプルアプリは完成です。次に、Stripe アプリに機能を追加してください。

参照情報