<stripe-payment-sheet>
このページは
src/components/stripe-payment-sheet/readme.mdから自動生成されています。
present
Section titled “present”Show the sheet and wait for its result.
const sheet = document.querySelector('stripe-payment-sheet');const { paymentResult } = await sheet.present();Overview
Section titled “Overview”A payment sheet: the Payment Element in a modal, with the same events and results as the native PaymentSheet
of @capacitor-community/stripe. PaymentIntent and SetupIntent are told apart by the client secret prefix;
a Checkout Session is used when checkout-session-client-secret is set.
Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
applicationName |
application-name |
Application name registered to Stripe.js, for wrapper libraries such as @capacitor-community/stripe. |
string |
'stripe-pwa-elements' |
buttonLabel |
button-label |
Submit button label. Translated automatically by this library. | string |
'Pay' |
checkoutSessionClientSecret |
checkout-session-client-secret |
The client secret of a Checkout Session created with ui_mode: 'elements' (named custom in older Stripe API versions). Its format is not inspected. When it is set, it is used instead of intent-client-secret (the same rule as stripe-payment-element). Create the session with customer_email or customer, or pass options.defaultBillingDetails.email, because the sheet has no email field. |
string |
undefined |
intentClientSecret |
intent-client-secret |
The client secret of a PaymentIntent (pi_..._secret_...) or a SetupIntent (seti_..._secret_...). The prefix decides whether confirmPayment or confirmSetup is used. |
string |
undefined |
open |
open |
Whether the sheet is shown. Setting it to false closes the sheet as canceled. | boolean |
false |
options |
– | Options with the same keys as CreatePaymentSheetOption of @capacitor-community/stripe. JavaScript property only. |
{ merchantDisplayName?: string; paymentMethodLayout?: "horizontal" | "vertical" | "automatic"; defaultBillingDetails?: { email?: string; name?: string; phone?: string; address?: PaymentSheetAddress; }; returnURL?: string; style?: "alwaysLight" | "alwaysDark"; billingDetailsCollectionConfiguration?: { email?: "never" | "always" | "automatic"; name?: "never" | "always" | "automatic"; phone?: "never" | "always" | "automatic"; address?: "never" | "automatic" | "full"; }; shippingDetails?: { name?: string; phone?: string; address?: PaymentSheetAddress; }; enableApplePay?: boolean; enableGooglePay?: boolean; customerId?: string; customerEphemeralKeySecret?: string; applePayMerchantId?: string; GooglePayIsTesting?: boolean; countryCode?: string; currencyCode?: string; withZipCode?: boolean; allowsDelayedPaymentMethods?: boolean; } |
undefined |
publishableKey |
publishable-key |
Your Stripe publishable API key. | string |
undefined |
sheetTitle |
sheet-title |
Sheet title. Translated automatically by this library. | string |
'Add your payment information' |
stripeAccount |
stripe-account |
Optional. Making API calls for connected accounts | string |
undefined |
Events
Section titled “Events”| Event | Description | Type |
|---|---|---|
paymentSheetCanceled |
The customer closed the sheet | CustomEvent<void> |
paymentSheetCompleted |
The payment or setup succeeded. In Checkout Session mode the detail is the result of confirm ({ type: 'success', session }) |
CustomEvent<{ paymentIntent: PaymentIntent; error?: undefined; } | { paymentIntent?: undefined; error: StripeError; } | { setupIntent: SetupIntent; error?: undefined; } | { setupIntent?: undefined; error: StripeError; } | { type: "error"; error: ConfirmError; } | { type: "success"; session: StripeCheckoutSession; }> |
paymentSheetFailed |
The confirmation failed with an error the customer cannot fix in the sheet | CustomEvent<unknown> |
paymentSheetFailedToLoad |
Stripe.js or the Payment Element failed to load, or the client secret format is unknown | CustomEvent<unknown> |
paymentSheetLoaded |
Stripe.js and the Payment Element are ready | CustomEvent<{ stripe: Stripe; }> |
Methods
Section titled “Methods”present() => Promise<PaymentSheetPresentResult>
Section titled “present() => Promise<PaymentSheetPresentResult>”Show the sheet and wait for its result. Calling it again while a result is pending returns the same promise.
Returns
Section titled “Returns”Type: Promise<PaymentSheetPresentResult>
{ paymentResult }, where paymentResult is paymentSheetCompleted, paymentSheetCanceled or paymentSheetFailed
Dependencies
Section titled “Dependencies”Depends on
Section titled “Depends on”graph TD; stripe-payment-sheet --> stripe-modal stripe-modal --> ion-icon
Built with StencilJS