この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 24日目の記事です。
アプリインストール時に、サービスへのログインを誘導する
自社や外部のサービスと連携するアプリを公開する場合、Stripeアカウントとそのサービスアカウントの紐付けが必要です。
連携にはOAuthを利用る方法や、APIキーをSecret Store APIに保存する方法などがとれます。
しかしこれらの連携操作をユーザーが行わない場合には、うまくアプリの機能を提供することができません。
インストール完了後のアクションをカスタマイズする
Stripe Appsの場合、インストール後に追加の操作画面へ遷移させることができます。
インストール完了の画面に表示される右下のボタンが、設定によってラベルと遷移先を変更できます。
via: https://stripe.com/docs/stripe-apps/post-install-actions#configuration-options
stripe-app.jsonでインストール後のアクションを設定
インストール後のアクションの設定は、stripe-app.jsonで行います。
{
"id": "com.example.first-stripe-app",
"version": "0.0.1",
"name": "First Stripe App",
"icon": "",
"permissions": [],
"ui_extension": {
"views": [
{
"viewport": "stripe.dashboard.drawer.default",
"component": "App"
}
],
"actions": [],
"content_security_policy": {
"connect-src": [],
"image-src": null,
"purpose": ""
}
},
"post_install_action": null
}
post_install_actionを次のように変更しましょう。
- "post_install_action": null
+ "post_install_action": {
+ "type": "external",
+ "url": "https://example.com/signin"
+ }
この状態でアプリを公開すると、インストール後にhttps://example.com/signinへ移動します。
この際、?account_id=acct_xxxxがクエリ文字列として付与されますので、アプリ側はこのIDを利用して連携操作を続行できます。
インストール後に設定ページへ移動させる方法
インストール後の遷移先には、「アプリの設定ページ」も指定できます。
この場合、stripe-app.jsonを次のように変更しましょう。
- "post_install_action": null
+ "post_install_action": {
+ "type": "settings"
+ }
遷移先の設定ページを構築する必要がありますので、忘れずに実装しましょう。
SignInViewを利用した、ログイン誘導画面の実装
「特定のAPIのレスポンスを見て判断したい場合」や、「インストール完了後にユーザーが連携操作を完了しなかった場合」に備えて、アプリのUIにログインへの誘導画面を作ることもできます。
この場合は、SignInViewコンポーネントを利用することで、画面の見た目や機能の実装コストを軽減できます。
import { SignInView } from "@stripe/ui-extension-sdk/ui"
import { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"
const App = ({ environment }: ExtensionContextValue) => {
return (
<SignInView
description="アプリにログインします。"
primaryAction={{
label: "ログイン",
href: "https://example.com/login"
}}
/>
)
}
export default App
連携先のサービスのロゴアイコンやログインのためのボタンなど、さまざまなプロパティが用意されています。
プロパティの詳細については、ドキュメントをご確認ください。
サービスを連携して、決済・サブスクリプションの「運用効率化」を提案・as a Service化しよう
Stripe Appsでは、さまざまなサービスと連携して、サブスクリプションやオンライン決済に関する運用業務を効率化できます。
請求業務やバックオフィス系のサービス、またはAWSやGCP・Azureなどでカスタムの業務アプリを構築されている方は、ぜひStripe Appsのアプリを通して、顧客がコアビジネスに集中できる環境づくりをご提案ください。
Stripe Appsひとりアドベントカレンダー 2022
今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。
そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。
ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。