capacitorcapacitor-community/stripe

Logo Github GitHub

ガイド

はじめかた

メソッド

React Quick start

このプラグインをインストールするために、CapacitorStripeProviderを使用することができます:

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

UseCapacitorStripe hookを使用することで、インストールされたStripeクライアントを取得することができます。

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

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

この stripe オブジェクトは @capacitor-community/stripe メソッドの Stripe オブジェクトの代わりとなるものです。したがって、createPaymentSheetメソッドを使用したい場合は、次のように記述します。

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