Skip to content

Commit 96d931d

Browse files
sharjeelyunussharjeelyunus
authored
Merge pull request #93 from EnsembleUI/stripe-update
2 parents ba28f10 + f36d2aa commit 96d931d

File tree

4 files changed

+189
-17
lines changed

4 files changed

+189
-17
lines changed

‎pages/actions/_meta.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,9 @@
152152
"show-notification": {
153153
"title": "Show Notification"
154154
},
155+
"initialize-stripe": {
156+
"title": "Initialize Stripe"
157+
},
155158
"show-payment-sheet": {
156159
"title": "Show Payment Sheet"
157160
},

‎pages/actions/initialize-stripe.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# initializeStripe
2+
3+
Initialize Stripe with custom configuration. This is the primary way to initialize Stripe in your application.
4+
5+
## Properties
6+
7+
| Property | Type | Description |
8+
| :----------------- | :----- | :--------------------------------------------------------------------------------------- |
9+
| publishableKey | string | Your Stripe publishable key (required) |
10+
| stripeAccountId | string | Your Stripe account ID for Connect applications (optional) |
11+
| merchantIdentifier | string | Your merchant identifier for Apple Pay (optional) |
12+
| onSuccess | action | Action to execute when initialization succeeds (optional) |
13+
| onError | action | Action to execute when initialization fails (optional) |
14+
15+
### Example
16+
17+
Here's a basic example of how to initialize Stripe in your Ensemble app:
18+
19+
```yaml
20+
View:
21+
header:
22+
title: Payment Setup
23+
body:
24+
Column:
25+
styles:
26+
padding: 24
27+
gap: 16
28+
children:
29+
- Text:
30+
text: Initialize Stripe
31+
styles:
32+
fontSize: 18
33+
fontWeight: bold
34+
- Button:
35+
label: Initialize Stripe
36+
onTap:
37+
initializeStripe:
38+
publishableKey: "pk_test_your_publishable_key_here"
39+
merchantIdentifier: "merchant.com.yourapp"
40+
onSuccess:
41+
showToast:
42+
message: "Stripe initialized successfully"
43+
onError:
44+
showToast:
45+
message: "Failed to initialize Stripe"
46+
```
47+
48+
### Advanced Configuration
49+
50+
For Connect applications or when you need more control:
51+
52+
```yaml
53+
initializeStripe:
54+
publishableKey: "pk_test_your_publishable_key_here"
55+
stripeAccountId: "acct_optional_account_id"
56+
merchantIdentifier: "merchant.com.yourapp"
57+
onSuccess:
58+
- showToast:
59+
message: "Stripe initialized successfully"
60+
- navigateScreen:
61+
name: PaymentScreen
62+
onError:
63+
showDialog:
64+
widget:
65+
Column:
66+
styles:
67+
gap: 16
68+
padding: 20
69+
children:
70+
- Text:
71+
text: Initialization Failed
72+
styles:
73+
fontSize: 18
74+
fontWeight: bold
75+
- Text:
76+
text: "Failed to initialize Stripe. Please check your configuration and try again."
77+
- Button:
78+
label: Try Again
79+
onTap:
80+
dismissDialog:
81+
```
82+
83+
### Usage with Payment Flow
84+
85+
Initialize Stripe before showing the payment sheet:
86+
87+
```yaml
88+
View:
89+
header:
90+
title: Checkout
91+
body:
92+
Column:
93+
styles:
94+
padding: 24
95+
gap: 16
96+
children:
97+
- Button:
98+
label: Pay Now
99+
onTap:
100+
initializeStripe:
101+
publishableKey: "pk_test_your_publishable_key_here"
102+
merchantIdentifier: "merchant.com.yourapp"
103+
onSuccess:
104+
showPaymentSheet:
105+
clientSecret: ${paymentIntentClientSecret}
106+
configuration:
107+
merchantDisplayName: "My Store"
108+
style: "system"
109+
onSuccess:
110+
showToast:
111+
message: "Payment successful!"
112+
onError:
113+
showToast:
114+
message: "Payment failed"
115+
onError:
116+
showToast:
117+
message: "Failed to initialize payment system"
118+
```
119+
120+
### Configuration
121+
122+
- **publishableKey**: Your Stripe publishable key (starts with `pk_test_` for test mode, `pk_live_` for live mode)
123+
- **stripeAccountId**: Required only for Connect applications
124+
- **merchantIdentifier**: Required for Apple Pay integration (format: `merchant.com.yourapp`)
125+
126+
### Error Handling
127+
128+
The `initializeStripe` action provides error handling through the `onError` callback. Common failure scenarios include:
129+
130+
- Invalid publishable key
131+
- Network connectivity issues
132+
- Invalid merchant identifier
133+
- Stripe service unavailable
134+
135+
### Testing
136+
137+
For testing, use test mode keys:
138+
139+
- Use `pk_test_` keys for development
140+
- Use `pk_live_` keys for production
141+
- Test with various scenarios before going live

‎pages/payments/_meta.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
{
22
"stripe": {
33
"title": "Stripe Integration"
4-
},
5-
"stripe-example": {
6-
"title": "Stripe Example"
74
}
85
}

‎pages/payments/stripe.md‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,41 @@ Ensemble provides seamless integration with Stripe for processing payments in yo
66

77
The Stripe integration in Ensemble consists of:
88

9+
- **Stripe Initialization**: Initialize Stripe with your configuration
910
- **Payment Sheet**: A pre-built UI component for collecting payment information
1011
- **Payment Intent Management**: Client-side payment intent handling
1112
- **Error Handling**: Comprehensive error handling for payment failures
1213
- **Security**: PCI-compliant payment processing
1314

14-
## Configuration
15+
## Setup
1516

16-
### Build Configuration
17+
### Initialize Stripe
1718

18-
1. Go to Build & Deploy > Build Settings
19-
2. Enable Stripe Module
20-
3. Add your Stripe publishable key in Stripe Attributes. You also need to add Apple Pay Merchant Identifier for Apple Pay.
19+
Before using Stripe payments, you need to initialize Stripe with your configuration:
20+
21+
```yaml
22+
View:
23+
header:
24+
title: Payment Setup
25+
body:
26+
Column:
27+
styles:
28+
padding: 24
29+
gap: 16
30+
children:
31+
- Button:
32+
label: Initialize Stripe
33+
onTap:
34+
initializeStripe:
35+
publishableKey: "pk_test_your_publishable_key_here"
36+
merchantIdentifier: "merchant.com.yourapp"
37+
onSuccess:
38+
showToast:
39+
message: "Stripe initialized successfully"
40+
onError:
41+
showToast:
42+
message: "Failed to initialize Stripe"
43+
```
2144
2245
## Basic Implementation
2346
@@ -43,18 +66,25 @@ View:
4366
- Button:
4467
label: Pay Now
4568
onTap:
46-
showPaymentSheet:
47-
clientSecret: ${paymentIntentClientSecret}
48-
configuration:
49-
merchantDisplayName: "My Store"
50-
style: "system"
51-
primaryButtonLabel: "Pay $29.99"
69+
initializeStripe:
70+
publishableKey: "pk_test_your_publishable_key_here"
71+
merchantIdentifier: "merchant.com.yourapp"
5272
onSuccess:
53-
showToast:
54-
message: "Payment successful!"
73+
showPaymentSheet:
74+
clientSecret: ${paymentIntentClientSecret}
75+
configuration:
76+
merchantDisplayName: "My Store"
77+
style: "system"
78+
primaryButtonLabel: "Pay $29.99"
79+
onSuccess:
80+
showToast:
81+
message: "Payment successful!"
82+
onError:
83+
showToast:
84+
message: "Payment failed"
5585
onError:
5686
showToast:
57-
message: "Payment failed"
87+
message: "Failed to initialize payment system"
5888
```
5989
6090
### Advanced Configuration
@@ -222,4 +252,5 @@ Before going live with Stripe payments:
222252

223253
## Related Actions
224254

255+
- [initializeStripe](../actions/initialize-stripe.md) - Initialize Stripe with configuration
225256
- [showPaymentSheet](../actions/show-payment-sheet.md) - Display the Stripe Payment Sheet

0 commit comments

Comments
 (0)