React Quick start
このプラグインをインストールするために、CapacitorStripeProvider
を使用することができます:
もし v3.4.x
かそれ以下のバージョンを利用してる場合は、 @capacitor/stripe
を v3.5.0
以上の最新版にアップグレードしてください。
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;
もし利用しているのがtypescript@4.5以上の場合、次のように書くことができます:
import { useCapacitorStripe } from '@capacitor-community/stripe/react';
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を使うことに興味があるという方は、デモコードをご覧ください:
Hook API
useCapacitorStripe
interface
CapacitorStripeContext
Prop Type stripe
StripePlugin
isApplePayAvailable
boolean
isGooglePayAvailable
boolean