capacitorcapacitor-community/stripe

Logo Github GitHub

Guide

Quickstart

Learn

Method

React Quick start

We can use CapacitorStripeProvider to initialize this plugin:

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

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

export default App;

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({
        ...
      })
    }}>
      Pay
    </button>
  )
}

Of course, You can write without React Hooks. Are you interested in using React Hooks? So please check demo code:
https://github.com/capacitor-community/stripe/tree/master/demo/reacthttps://github.com/capacitor-community/stripe/tree/master/demo/react