Démarrage rapide avec React

Enveloppez l’application dans CapacitorStripeProvider. Ce provider appelle Stripe.initialize, vérifie la disponibilité d’Apple Pay et de Google Pay et enregistre stripe-pwa-elements sur le Web.

App.tsx

import { CapacitorStripeProvider } from '@capacitor-community/stripe/react';

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

export default App;

CapacitorStripeProvider accepte également l’option facultative stripeAccount pour Stripe Connect.

Utiliser le client Stripe

Accédez au client initialisé avec useCapacitorStripe. L’objet stripe renvoyé est la même instance de plugin que Stripe importé depuis @capacitor-community/stripe.

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

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

export const PaymentSheet: React.FC = () => {
  const { stripe } = useCapacitorStripe();
  return (
    <button
      onClick={async () => {
        await stripe.createPaymentSheet({
          paymentIntentClientSecret,
          merchantDisplayName: 'App Name',
        });
        await stripe.presentPaymentSheet();
      }}
    >
      Pay
    </button>
  );
};

Enregistrez les écouteurs de résultat une seule fois au démarrage de l’application, pas dans le gestionnaire d’un bouton de paiement. Consultez Écouteurs d’événements.

Ensuite : créez un Intent de test sur votre serveur (Intégration serveur), puis présentez PaymentSheet.

La démonstration React officielle se trouve dans capacitor-community/stripe/demo/react.

Modifier cette page sur GitHub