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/react