Improve and update docs (#2305)

* fix broken index file

* doc: clarify status of cardfield

* fix add documentation for apple pay

* fix links in the readme

* doc: updated payment element screens

* doc: update the docs for paymentsheet

---------

Co-authored-by: jonasbark <jonas.bark@gmx.de>

Author: remonh87

README.md

@@ -50,7 +50,7 @@ This plugin requires several changes to be able to work on Android devices. Plea
 2. Use Kotlin version 1.8.0 and above: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/settings.gradle#L22)
 3. Requires Android Gradle plugin 8 and higher
 4. Using a descendant of `Theme.AppCompat` for your activity: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/app/src/main/res/values/styles.xml#L15), [example night theme](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/app/src/main/res/values-night/styles.xml#L16)
-5. Using an up-to-date Android gradle build tools version: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/build.gradle#L9) and an up-to-date gradle version accordingly: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/gradle/wrapper/gradle-wrapper.properties#L6) 
+5. Using an up-to-date Android gradle build tools version: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/settings.gradle#L21) and an up-to-date gradle version accordingly: [example](https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/gradle/wrapper/gradle-wrapper.properties#L4) 
 6. Using `FlutterFragmentActivity` instead of `FlutterActivity` in `MainActivity.kt`: [example](https://github.com/flutter-stripe/flutter_stripe/blob/79b201a2e9b827196d6a97bb41e1d0e526632a5a/example/android/app/src/main/kotlin/com/flutter/stripe/example/MainActivity.kt#L6)
 7. Add the following rules to your `proguard-rules.pro` file: [example](https://github.com/flutter-stripe/flutter_stripe/blob/master/example/android/app/proguard-rules.pro)  
 ```proguard
@@ -108,7 +108,7 @@ To use Stripe on web, it is required to add `flutter_stripe_web` in your pubspec
 
 ## Usage
 
-### Card payments 
+### Card payments
 
 There are 3 ways of handling card payments
 
@@ -118,11 +118,13 @@ Payment sheet | Easy          | Our recommended way of handling payments. It off
 Cardfield     | Medium        | Single line cardfield. Offers more flexibility but has less built-in functionality.                              | [docs](https://docs.page/flutter-stripe/flutter_stripe/card_field)   |
 Card form     | Medium        | Similar as the cardfield but the entry fields are spread across multi lines                                      | [docs](https://docs.page/flutter-stripe/flutter_stripe/card_field)   |
 
+> **Note:** Stripe is sunsetting CardField and CardForm in favor of PaymentSheet. We recommend using PaymentSheet for all new integrations. See [Stripe's documentation](https://stripe.com/docs/payments/payment-sheet) for more details.
+
 ### Wallets
-This library fully supports native Apple Pay and [Google pay](https://docs.page/flutter-stripe/flutter_stripe/google_pay) integration.
+This library fully supports native [Apple Pay](https://docs.page/flutter-stripe/flutter_stripe/apple_pay) and [Google pay](https://docs.page/flutter-stripe/flutter_stripe/google_pay) integration.
 
-### Mobile elements [BETA]
-We also support the customer sheet mobile element. Check out the [docs](https://docs.page/flutter-stripe/flutter_stripe/customer_sheet) to learn more on how to set it up.
+### Mobile elements
+We also support the [Customer Sheet](https://docs.page/flutter-stripe/flutter_stripe/customer_sheet) and the [Address sheet](https://docs.page/flutter-stripe/flutter_stripe/address_sheet) mobile elements to collect and manage customer payment methods and addresses.
 
 ### Financial connections
 We also support Financial connections in our latest sdk. Check out the [docs](https://docs.page/flutter-stripe/flutter_stripe/financial_connections) to learn more on how to set it up.

docs.json

@@ -11,17 +11,18 @@
           ["CardFormField", "/card_field"]
           ]      
         ],
-        ["Mobile elements",
+        ["Mobile elements", [
           ["Address Sheet", "/address_sheet"],
           ["Customer Sheet", "/customer_sheet"]
-        ],
+        ]],
         ["Regional payments", [
             ["ACH direct debit", "/ach"],
             ["Ideal", "/ideal"]
           ]
         ],
         ["Wallets", [
-          ["Google pay", "/google_pay"]
+          ["Apple Pay", "/apple_pay"],
+          ["Google Pay", "/google_pay"]
         ]],
         ["Financial connections", "/financial_connections" ],
         ["Troubleshooting", "/troubleshooting"],

docs/address-sheet.mdx docs/address_sheet.mdxdocs/address-sheet.mdx renamed to docs/address_sheet.mdx

@@ -1,37 +1,27 @@
-# Address Sheet Implementation Guide
+---
+title: Address Sheet
+description: Collect shipping or billing addresses using Stripe's pre-built UI component.
+---
 
-The Address Sheet is a pre-built UI component that allows you to collect shipping or billing addresses from your users in a Flutter application using Stripe's native UI components.
-
-## Installation
-
-Make sure you have the `flutter_stripe` package installed in your `pubspec.yaml`:
+# Address Sheet
 
-```yaml
-dependencies:
-  flutter_stripe: ^latest_version
-```
+The Address Sheet is a pre-built UI component that allows you to collect shipping or billing addresses from your users in a Flutter application using Stripe's native UI components.
 
-### Set up Stripe [Server Side] [Client Side]
+## 1. Set up Stripe [Client Side]
 
 First, you need a Stripe account. [Register now](https://dashboard.stripe.com/register).
 
-#### Server-side
-
-This integration requires endpoints on your server that talk to the Stripe API. Use one official libraries for access to the Stripe API from your server. [Follow the steps here](https://stripe.com/docs/payments/accept-a-payment?platform=ios&ui=payment-sheet#setup-server-side)
-
 #### Client-side
 
-The Flutter SDK is open source, fully documented.
+The Flutter SDK is open source and fully documented.
 
 To install the SDK, follow these steps:
- - Run the commmand `flutter pub add flutter_stripe`
+ - Run the command `flutter pub add flutter_stripe`
  - This will add a line like this to your project's pubspec.yaml with the latest package version
 
-
 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).
 
-
-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. 
+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.
 
 ```dart
 void main() async {
@@ -42,8 +32,9 @@ void main() async {
 
 Use your [test mode](https://stripe.com/docs/keys#obtain-api-keys) keys while you test and develop, and your [live mode](https://stripe.com/docs/keys#test-live-modes) keys when you publish your app.
 
+## 2. Basic Implementation [Client Side]
 
-### Basic Implementation
+The Address Sheet is a widget that you embed directly in your UI. When the user interacts with it, it presents a native address collection form.
 
 Here's a basic example of how to implement the Address Sheet:
 
@@ -64,34 +55,31 @@ AddressSheet(
 )
 ```
 
-## Parameters
+## 3. Parameters
 
 ### Required Parameters
 
-- `onSubmit`: Callback function that is called when the user successfully submits their address information. Receives a `CollectAddressResult` object containing:
-  - `address`: The collected address details
-  - `name`: The customer's name
-  - `phoneNumber`: The customer's phone number (optional)
-
-- `onError`: Callback function that is called when an error occurs or when the user closes the sheet before submitting. Receives a `StripeException` object.
-
-- `params`: An `AddressSheetParams` object that configures the address sheet behavior and appearance.
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `onSubmit` | `OnAddressSheetSubmit` | Callback when the user successfully submits their address. Receives a `CollectAddressResult` object. |
+| `onError` | `OnAddressSheetError` | Callback when an error occurs or the user closes the sheet before submitting. Receives a `StripeException` object. |
+| `params` | `AddressSheetParams` | Configuration object for the address sheet behavior and appearance. |
 
-### Address Result Structure
+### CollectAddressResult Structure
 
 The `CollectAddressResult` object contains the following information:
 
 ```dart
 class CollectAddressResult {
-  final Address address;
-  final String name;
-  final String? phoneNumber;
+  final Address address;  // The collected address details
+  final String name;      // The customer's name
+  final String? phoneNumber; // The customer's phone number (optional)
 }
 ```
 
 The `Address` object contains standard address fields like street, city, state, postal code, and country.
 
-## Example Implementation
+## 4. Complete Example [Client Side]
 
 Here's a complete example showing how to implement the Address Sheet in a Flutter screen:
 
@@ -142,10 +130,10 @@ class _AddressSheetExampleState extends State<AddressSheetExample> {
 }
 ```
 
-### Customization
+## 5. Customization
 
 You can customize the Address Sheet behavior by configuring the `AddressSheetParams`. This allows you to:
-- Set default values
+- Set default values for address fields
 - Configure which fields are required
 - Customize the appearance
 - Set specific country restrictions