PaymentSheet

PaymentSheet collects payment details and confirms the Intent in one presentation. If you need a pending card plus a later confirmation step, use PaymentFlow.

Use a PaymentIntent to charge now, or a SetupIntent to save a method for later. Create those objects on your server. See Server Integration.

Platform support

Web does not render the native PaymentSheet. On web, createPaymentSheet uses paymentIntentClientSecret and optional withZipCode; the current web implementation does not support SetupIntents. Native-only options such as defaultBillingDetails, shippingDetails, billingDetailsCollectionConfiguration, enableApplePay, enableGooglePay, style, and returnURL are ignored.

1. createPaymentSheet

Fetch client-safe secrets from your backend, then call createPaymentSheet. The plugin does not talk to Stripe's secret API. Use HttpClient, fetch, or any HTTP client.

On iOS and Android, provide either paymentIntentClientSecret or setupIntentClientSecret. On web, provide paymentIntentClientSecret. customerId and customerEphemeralKeySecret are optional together. If you set customerId, you must also set customerEphemeralKeySecret. A PaymentIntent without a Customer is valid; see the demo intent/without-customer shape in Server Integration.

import { firstValueFrom } from 'rxjs';
import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

const { paymentIntent, ephemeralKey, customer } = await firstValueFrom(
  this.http.post<{
    paymentIntent: string;
    ephemeralKey: string;
    customer: string;
  }>(environment.api + 'intent', {}),
);

await Stripe.createPaymentSheet({
  paymentIntentClientSecret: paymentIntent,
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  merchantDisplayName: 'rdlabo',
});

2. presentPaymentSheet

Call presentPaymentSheet only after createPaymentSheet succeeds.

const result = await Stripe.presentPaymentSheet();
if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
  // Update UI only. Confirm the Intent with a webhook before fulfilling.
}

Treat Canceled as the customer dismissing the sheet. Treat Failed as an error. Neither result authorizes fulfillment by itself.

3. addListener

Register result listeners once at application startup, before you present the sheet. Prefer events over the Promise after Android Activity recreation. See Event Listeners.

await Promise.all([
  Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
    console.log('PaymentSheetEventsEnum.Completed');
  }),
  Stripe.addListener(PaymentSheetEventsEnum.Canceled, () => {
    console.log('PaymentSheetEventsEnum.Canceled');
  }),
  Stripe.addListener(PaymentSheetEventsEnum.Failed, (error) => {
    console.log('PaymentSheetEventsEnum.Failed', error);
  }),
]);

Reference

• Accept a payment (iOS)
• Accept a payment (Android)