Logo Github GitHub

React Quick start

We can use CapacitorStripeProvider to initialize this plugin:

If you are using the v3.4.x or older, please upgrade the @capacitor/stripe to newer than v3.5.0.

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

const App: React.FC = () => (
    publishableKey="Your Publishable Key"

export default App;

If you use typescript@4.5, you can write:
import { useCapacitorStripe } from '@capacitor-community/stripe/react';

Use the Stripe client

We can get the initialized Stripe client by using the useCapacitorStripe. hook.

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

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

This stripe Object is instead of Stripe object from @capacitor-community/stripe method. So if you want use createPaymentSheet method, you can write:

export const PaymentSheet: React.FC = () => {
  const { stripe } = useCapacitorStripe();
  return (
    <button onClick={async () => {
      await stripe.createPaymentSheet({

Of course, You can write without React Hooks. Are you interested in using React Hooks? So please check demo code:

Hook API


interface CapacitorStripeContext

Prop Type
stripe StripePlugin
isApplePayAvailable boolean
isGooglePayAvailable boolean