React Quick start

Wrap the application with CapacitorStripeProvider. The provider calls Stripe.initialize, checks Apple Pay and Google Pay availability, and registers stripe-pwa-elements on web.

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 also accepts optional stripeAccount for Stripe Connect.

Use the Stripe client

Read the initialized client with useCapacitorStripe. The returned stripe object is the same plugin instance as Stripe from @capacitor-community/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>
  );
};

The official React demo is at capacitor-community/stripe/demo/react.