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>
)
}
もちろん、React Hooksがなくても書くことはできます。React Hooksを使うことに興味があるという方は、デモコードをご覧ください:https://github.com/capacitor-community/stripe/tree/master/demo/react
Hook API
useCapacitorStripe
interface
CapacitorStripeContext
Prop Type stripe
StripePlugin
isApplePayAvailable
boolean
isGooglePayAvailable
boolean