You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Integrate Stripe’s prebuilt payment UI into the checkout of your app with the PaymentSheet class.
13
16
14
17
This integration combines all of the steps required to pay—collecting payment details and confirming the payment—into a single sheet that displays on top of your app.
15
18
16
-
17
19
## 1. Set up Stripe [Server Side][Client Side]
18
20
19
21
First, you need a Stripe account. [Register now](https://dashboard.stripe.com/register).
@@ -27,14 +29,13 @@ This integration requires endpoints on your server that talk to the Stripe API.
27
29
The Flutter SDK is open source, fully documented.
28
30
29
31
To install the SDK, follow these steps:
30
-
- Run the commmand `flutter pub add flutter_stripe`
31
-
- This will add a line like this to your project's pubspec.yaml with the latest package version
32
32
33
+
- Run the commmand `flutter pub add flutter_stripe`
34
+
- This will add a line like this to your project's pubspec.yaml with the latest package version
33
35
34
36
For details on the latest SDK release and past versions, see the [Releases](https://github.com/flutter-stripe/flutter_stripe/releases) page on GitHub. To receive notifications when a new release is published, [watch releases for the repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/managing-subscriptions-for-activity-on-github/viewing-your-subscriptions#watching-releases-for-a-repository).
35
37
36
-
37
-
When your app starts, configure the SDK with your Stripe [publishable key](https://dashboard.stripe.com/) so that it can make requests to the Stripe API.
38
+
When your app starts, configure the SDK with your Stripe [publishable key](https://dashboard.stripe.com/) so that it can make requests to the Stripe API.
38
39
39
40
```dart
40
41
void main() async {
@@ -59,7 +60,7 @@ This integration uses three Stripe API objects:
59
60
60
61
3. A Customer Ephemeral Key (optional). Information on the Customer object is sensitive, and can’t be retrieved directly from an app. An Ephemeral Key grants the SDK temporary access to the Customer.
61
62
62
-
>> If you never save cards to a Customer and don’t allow returning Customers to reuse saved cards, you can omit the Customer and Customer Ephemeral Key objects from your integration.
63
+
>> If you never save cards to a Customer and don’t allow returning Customers to reuse saved cards, you can omit the Customer and Customer Ephemeral Key objects from your integration.
63
64
64
65
For security reasons, your app can’t create these objects. Instead, add an endpoint on your server that:
When the customer taps a **Checkout** button, call present to present the payment sheet. After the customer completes the payment, the sheet is dismissed.
Unless your business model requires immediate payment (e.g., an on-demand service), don’t assume you have received payment at this point. Instead, inform the customer that you confirmed their order and notify them by email when you fulfill their order in the next step.
137
139
138
-
>> ADD MORE PAYMENT METHODS
139
-
>> While cards finish payment by this point, other payment methods can take time to process before payment is complete. By not assuming you’ve received payment on the client, you can add additional payment methods in the future without updating your app.
140
+
>> ADD MORE PAYMENT METHODS
141
+
>> While cards finish payment by this point, other payment methods can take time to process before payment is complete. By not assuming you’ve received payment on the client, you can add additional payment methods in the future without updating your app.
140
142
141
-
142
-
## 4. Handle post-payment events
143
+
## 4. Handle post-payment events
143
144
144
145
Stripe sends a [`payment_intent.succeeded`](https://stripe.com/docs/api/events/types#event_types-payment_intent.succeeded) event when the payment completes. Use the Dashboard, a custom webhook, or a partner solution to receive these events and run actions, like sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow.
145
146
146
147
Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes. Setting up your integration to listen for asynchronous events also makes it easier to accept more payment methods in the future. Check out our [guide to payment methods](https://stripe.com/payments/payment-methods-guide) to see the differences between all supported payment methods.
147
148
148
-
149
149
## 5. Test the integration
150
150
151
151
Several test cards are available for you to use in test mode to make sure this integration is ready. Use them with any CVC, postal code, and future expiration date.
152
152
153
-
| NUMBER | DESCRIPTION |
154
-
| ------ | ------- |
155
-
| 4242424242424242 |Succeeds and immediately processes the payment. |
156
-
| 4000002500003155 |Requires authentication. Stripe will trigger a modal asking for the customer to authenticate. |
157
-
| 4000000000009995 |Always fails with a decline code of insufficient_funds. |
| 4242424242424242 |Succeeds and immediately processes the payment.|
156
+
| 4000002500003155 |Requires authentication. Stripe will trigger a modal asking for the customer to authenticate. |
157
+
| 4000000000009995 |Always fails with a decline code of insufficient_funds.|
158
158
159
159
For the full list of test cards see the guide on [testing](https://stripe.com/docs/testing).
160
160
161
-
162
161
## 6. Optional - Enable Apple Pay (Only iOS)
163
162
164
163
#### Register for an Apple Merchant ID
164
+
165
165
Obtain an Apple Merchant ID by [registering for a new identifier](https://developer.apple.com/account/resources/identifiers/add/merchant) on the Apple Developer website.
166
166
167
167
Fill out the form with a description and identifier. Your description is for your own records and you can modify it in the future. Stripe recommends using the name of your app as the identifier (e.g., `merchant.com.{{YOUR_APP_NAME}}`).
168
168
169
169
#### Create a new Apple Pay certificate
170
+
170
171
Create a certificate for your app to encrypt payment data.
171
172
172
173
In the Dashboard’s [Apple Pay Settings](https://dashboard.stripe.com/settings/payments/apple_pay), click **Add new application** and follow the guide there.
173
174
174
175
#### Integrate with Xcode
176
+
175
177
Add the Apple Pay capability to your app. In Xcode, open your project settings, click the **Signing & Capabilities** tab, and add the **Apple Pay** capability. You might be prompted to log in to your developer account at this point. Select the merchant ID you created earlier, and your app is ready to accept Apple Pay.
Make sure to set your Apple merchant ID `Stripe.merchantIdentifier` when you init stripe instance in your `main.dart`
183
188
184
189
[Check stripe docs](https://support.stripe.com/questions/enable-apple-pay-on-your-stripe-account) for enabling Apple Pay on your Stripe account & create merchantIdentifier
To enable card scanning support, set the `NSCameraUsageDescription`**(Privacy - Camera Usage Description)** in the Info.plist of your application, and provide a reason for accessing the camera (e.g., “To scan cards”). Devices with iOS 13 or higher support card scanning.
258
253
259
-
## 9. Optional - Customize the sheet
254
+
## 9. Optional - Customize the sheet
260
255
261
256
All customization is configured through the SetupPaymentSheetParameters object.
262
257
263
258
### Merchant display name
259
+
264
260
You can specify a customer-facing business name that Stripe uses to display a “Pay (merchantDisplayName)” line item in the payment sheet. By default, this is your app’s name.
0 commit comments