React クイックスタート

アプリケーションを CapacitorStripeProvider でラップします。この Provider は Stripe.initialize を呼び出し、Apple Pay と Google Pay の利用可否を確認し、Web では stripe-pwa-elements を登録します。

App.tsx

import { CapacitorStripeProvider } from '@capacitor-community/stripe/react';

const App: React.FC = () => (
  <CapacitorStripeProvider
    publishableKey="Your Publishable Key"
    fallback={<p>Loading...</p>}
  >
    <IonApp>{/* ... */}</IonApp>
  </CapacitorStripeProvider>
);

export default App;

CapacitorStripeProvider は Stripe Connect 用の任意の stripeAccount も受け取れます。

Stripe クライアントを使う

初期化済みのクライアントは useCapacitorStripe で取得します。返される stripe オブジェクトは、@capacitor-community/stripe の Stripe と同じプラグインインスタンスです。

import { useCapacitorStripe } from '@capacitor-community/stripe/react';

export const PaymentSheet: React.FC = () => {
  const { stripe, isApplePayAvailable, isGooglePayAvailable } = useCapacitorStripe();
  // ...
};

export const PaymentSheet: React.FC = () => {
  const { stripe } = useCapacitorStripe();
  return (
    <button
      onClick={async () => {
        await stripe.createPaymentSheet({
          paymentIntentClientSecret,
          merchantDisplayName: 'App Name',
        });
        await stripe.presentPaymentSheet();
      }}
    >
      Pay
    </button>
  );
};

結果リスナーは支払いボタンのハンドラー内ではなく、アプリケーション起動時に一度だけ登録します。イベントリスナーを参照してください。

公式 React デモは capacitor-community/stripe/demo/react にあります。