実装方法を設定する
注意
Terminal の React Native ライブラリは、早期ベータ段階であり、現在開発中です。問題が発生した場合は、Stripe の github プロジェクトにご報告ください。
React Native SDK の使用を開始する際に必要なステップは以下の 4 つです。
- アプリに SDK をインストールする
- アプリを設定する
- アプリとバックエンドで接続トークンのエンドポイントを設定する
- アプリで SDK を初期化する
SDK をインストールするクライアント側
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。この内部ではネイティブの iOS SDK および Android SDK が使用されます。以下を実行して SDK をインストールします。
接続トークンのエンドポイントを設定するサーバー側クライアント側
サーバー側
リーダーに接続するには、バックエンドからご自身の Stripe アカウントに、リーダーを使用するための SDK 権限を付与する必要があります。それには、ConnectionToken (接続トークン) から secret (シークレット) を提供します。バックエンドは信頼できるクライアントに対してのみ、接続トークンを作成するようにする必要があります。
サーバ側の ConnectionToken からシークレットを取得してクライアント側に渡します。
注意
ConnectionToken のシークレットを使用すると、任意の Stripe Terminal リーダーに接続して、Stripe アカウントで支払いを受け取ることができます。必ず、接続トークンの作成に使用するエンドポイントを認証し、クロスサイトリクエストフォージェリ (CSRF) から保護してください。
クライアント側
SDK にこのエンドポイントへのアクセスを許可するには、バックエンドから ConnectionToken
をリクエストするトークンプロバイダーの単一の関数を作成します。
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native'; const fetchTokenProvider = async () => { const response = await fetch(`{YOUR BACKEND URL}/connection_token`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { secret } = await response.json(); return secret; };
この関数は、SDK で Stripe またはリーダーの認証が必要になるたびに呼び出されます。また、リーダーへの接続に新しい接続トークンが必要な場合 (アプリがリーダーから切断されたときなど) にも呼び出されます。SDK がバックエンドから新しい接続トークンを取得できない場合、リーダーへの接続は失敗し、サーバーからエラーが返されます。
接続トークンは、キャッシュに入れたり、ハードコード化しないでください。接続トークンのライフサイクルは、SDK によって管理されます。
SDK を初期化するクライアント側
作業を開始するには、ステップ 3 で実装したトークンプロバイダーをプロパティとして StripeTerminalProvider
に渡します。
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native'; function Root() { const fetchTokenProvider = async () => { const response = await fetch(`${API_URL}/connection_token`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { secret } = await response.json(); return secret; }; return ( <StripeTerminalProvider logLevel="verbose" tokenProvider={fetchTokenProvider} > <App /> </StripeTerminalProvider> ); }
最後のステップとして、useStripeTerminal
フックから initialize
メソッドを呼び出します。initialize
メソッドは、StripeTerminalProvider
を含むコンポーネントからではなく、StripeTerminalProvider
内にネストされたコンポーネントから呼び出す必要があります。
function App() { const { initialize } = useStripeTerminal(); useEffect(() => { initialize({ logLevel: 'verbose', }); }, [initialize]); return <View />; }
SDK の更新
Stripe periodically releases updates which can include new functionality, bug fixes, and security updates. Update your SDK as soon as a new version is available. The currently available SDKs are:
- Stripe Terminal Android SDK
- Stripe Terminal iOS SDK
- Stripe Terminal JavaScript SDK
- Stripe Terminal React Native SDK