@@ -210,6 +210,7 @@ Ensemble provides a browser-based IDE, [Ensemble Studio](https://studio.ensemble
210210 - [showBottomModal](#showbottommodal)
211211 - [showDialog](#showdialog)
212212 - [showNotification](#shownotification)
213+ - [initializeStripe](#initializestripe)
213214 - [showPaymentSheet](#showpaymentsheet)
214215 - [showToast](#showtoast)
215216 - [startTimer](#starttimer)
@@ -4179,18 +4180,41 @@ Ensemble provides seamless integration with Stripe for processing payments in yo
41794180
41804181The Stripe integration in Ensemble consists of:
41814182
4183+ - **Stripe Initialization**: Initialize Stripe with your configuration
41824184- **Payment Sheet**: A pre-built UI component for collecting payment information
41834185- **Payment Intent Management**: Client-side payment intent handling
41844186- **Error Handling**: Comprehensive error handling for payment failures
41854187- **Security**: PCI-compliant payment processing
41864188
4187- ## Configuration
4189+ ## Setup
41884190
4189- ### Build Configuration
4191+ ### Initialize Stripe
41904192
4191- 1. Go to Build & Deploy > Build Settings
4192- 2. Enable Stripe Module
4193- 3. Add your Stripe publishable key in Stripe Attributes. You also need to add Apple Pay Merchant Identifier for Apple Pay.
4193+ Before using Stripe payments, you need to initialize Stripe with your configuration:
4194+
4195+ ```yaml
4196+ View:
4197+ header:
4198+ title: Payment Setup
4199+ body:
4200+ Column:
4201+ styles:
4202+ padding: 24
4203+ gap: 16
4204+ children:
4205+ - Button:
4206+ label: Initialize Stripe
4207+ onTap:
4208+ initializeStripe:
4209+ publishableKey: "pk_test_your_publishable_key_here"
4210+ merchantIdentifier: "merchant.com.yourapp"
4211+ onSuccess:
4212+ showToast:
4213+ message: "Stripe initialized successfully"
4214+ onError:
4215+ showToast:
4216+ message: "Failed to initialize Stripe"
4217+ ```
41944218
41954219## Basic Implementation
41964220
@@ -4216,18 +4240,25 @@ View:
42164240 - Button:
42174241 label: Pay Now
42184242 onTap:
4219- showPaymentSheet:
4220- clientSecret: ${paymentIntentClientSecret}
4221- configuration:
4222- merchantDisplayName: "My Store"
4223- style: "system"
4224- primaryButtonLabel: "Pay $29.99"
4243+ initializeStripe:
4244+ publishableKey: "pk_test_your_publishable_key_here"
4245+ merchantIdentifier: "merchant.com.yourapp"
42254246 onSuccess:
4226- showToast:
4227- message: "Payment successful!"
4247+ showPaymentSheet:
4248+ clientSecret: ${paymentIntentClientSecret}
4249+ configuration:
4250+ merchantDisplayName: "My Store"
4251+ style: "system"
4252+ primaryButtonLabel: "Pay $29.99"
4253+ onSuccess:
4254+ showToast:
4255+ message: "Payment successful!"
4256+ onError:
4257+ showToast:
4258+ message: "Payment failed"
42284259 onError:
42294260 showToast:
4230- message: "Payment failed "
4261+ message: "Failed to initialize payment system "
42314262```
42324263
42334264### Advanced Configuration
@@ -4395,6 +4426,7 @@ Before going live with Stripe payments:
43954426
43964427## Related Actions
43974428
4429+ - [initializeStripe](../actions/initialize-stripe.md) - Initialize Stripe with configuration
43984430- [showPaymentSheet](../actions/show-payment-sheet.md) - Display the Stripe Payment Sheet
43994431
44004432---
@@ -15290,6 +15322,150 @@ You can refer [here](#requestnotificationaccess) for example related to notifica
1529015322
1529115323---
1529215324
15325+ # initializeStripe
15326+
15327+ Initialize Stripe with custom configuration. This is the primary way to initialize Stripe in your application.
15328+
15329+ ## Properties
15330+
15331+ | Property | Type | Description |
15332+ | :----------------- | :----- | :--------------------------------------------------------------------------------------- |
15333+ | publishableKey | string | Your Stripe publishable key (required) |
15334+ | stripeAccountId | string | Your Stripe account ID for Connect applications (optional) |
15335+ | merchantIdentifier | string | Your merchant identifier for Apple Pay (optional) |
15336+ | onSuccess | action | Action to execute when initialization succeeds (optional) |
15337+ | onError | action | Action to execute when initialization fails (optional) |
15338+
15339+ ### Example
15340+
15341+ Here's a basic example of how to initialize Stripe in your Ensemble app:
15342+
15343+ ```yaml
15344+ View:
15345+ header:
15346+ title: Payment Setup
15347+ body:
15348+ Column:
15349+ styles:
15350+ padding: 24
15351+ gap: 16
15352+ children:
15353+ - Text:
15354+ text: Initialize Stripe
15355+ styles:
15356+ fontSize: 18
15357+ fontWeight: bold
15358+ - Button:
15359+ label: Initialize Stripe
15360+ onTap:
15361+ initializeStripe:
15362+ publishableKey: "pk_test_your_publishable_key_here"
15363+ merchantIdentifier: "merchant.com.yourapp"
15364+ onSuccess:
15365+ showToast:
15366+ message: "Stripe initialized successfully"
15367+ onError:
15368+ showToast:
15369+ message: "Failed to initialize Stripe"
15370+ ```
15371+
15372+ ### Advanced Configuration
15373+
15374+ For Connect applications or when you need more control:
15375+
15376+ ```yaml
15377+ initializeStripe:
15378+ publishableKey: "pk_test_your_publishable_key_here"
15379+ stripeAccountId: "acct_optional_account_id"
15380+ merchantIdentifier: "merchant.com.yourapp"
15381+ onSuccess:
15382+ - showToast:
15383+ message: "Stripe initialized successfully"
15384+ - navigateScreen:
15385+ name: PaymentScreen
15386+ onError:
15387+ showDialog:
15388+ widget:
15389+ Column:
15390+ styles:
15391+ gap: 16
15392+ padding: 20
15393+ children:
15394+ - Text:
15395+ text: Initialization Failed
15396+ styles:
15397+ fontSize: 18
15398+ fontWeight: bold
15399+ - Text:
15400+ text: "Failed to initialize Stripe. Please check your configuration and try again."
15401+ - Button:
15402+ label: Try Again
15403+ onTap:
15404+ dismissDialog:
15405+ ```
15406+
15407+ ### Usage with Payment Flow
15408+
15409+ Initialize Stripe before showing the payment sheet:
15410+
15411+ ```yaml
15412+ View:
15413+ header:
15414+ title: Checkout
15415+ body:
15416+ Column:
15417+ styles:
15418+ padding: 24
15419+ gap: 16
15420+ children:
15421+ - Button:
15422+ label: Pay Now
15423+ onTap:
15424+ initializeStripe:
15425+ publishableKey: "pk_test_your_publishable_key_here"
15426+ merchantIdentifier: "merchant.com.yourapp"
15427+ onSuccess:
15428+ showPaymentSheet:
15429+ clientSecret: ${paymentIntentClientSecret}
15430+ configuration:
15431+ merchantDisplayName: "My Store"
15432+ style: "system"
15433+ onSuccess:
15434+ showToast:
15435+ message: "Payment successful!"
15436+ onError:
15437+ showToast:
15438+ message: "Payment failed"
15439+ onError:
15440+ showToast:
15441+ message: "Failed to initialize payment system"
15442+ ```
15443+
15444+ ### Configuration
15445+
15446+ - **publishableKey**: Your Stripe publishable key (starts with `pk_test_` for test mode, `pk_live_` for live mode)
15447+ - **stripeAccountId**: Required only for Connect applications
15448+ - **merchantIdentifier**: Required for Apple Pay integration (format: `merchant.com.yourapp`)
15449+
15450+ ### Error Handling
15451+
15452+ The `initializeStripe` action provides error handling through the `onError` callback. Common failure scenarios include:
15453+
15454+ - Invalid publishable key
15455+ - Network connectivity issues
15456+ - Invalid merchant identifier
15457+ - Stripe service unavailable
15458+
15459+ ### Testing
15460+
15461+ For testing, use test mode keys:
15462+
15463+ - Use `pk_test_` keys for development
15464+ - Use `pk_live_` keys for production
15465+ - Test with various scenarios before going live
15466+
15467+ ---
15468+
1529315469# showPaymentSheet
1529415470
1529515471The `showPaymentSheet` action displays Stripe's Payment Sheet, allowing users to securely enter payment information and complete transactions within your Ensemble app.
0 commit comments