Address Sheet

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.

1. Set up Stripe [Client Side]

First, you need a Stripe account. Register now.

Client-side

The Flutter SDK is open source and fully documented.

To install the SDK, follow these steps:

• 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 page on GitHub. To receive notifications when a new release is published, watch releases for the repository.

When your app starts, configure the SDK with your Stripe publishable key so that it can make requests to the Stripe API.

void main() async {
  Stripe.publishableKey = stripePublishableKey;
  runApp(const App());
}

Use your test mode keys while you test and develop, and your live mode keys when you publish your app.

2. Basic Implementation [Client Side]

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:

import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';

AddressSheet(
  onSubmit: (details) {
    // Handle the submitted address details
    print(details.toJson());
  },
  onError: (error) {
    // Handle any errors that occur
    print(error.error.localizedMessage);
  },
  params: AddressSheetParams(),
)

3. Parameters

Required Parameters

CollectAddressResult Structure

The CollectAddressResult object contains the following information:

class CollectAddressResult {
  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.

4. Complete Example [Client Side]

Here's a complete example showing how to implement the Address Sheet in a Flutter screen:

import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';

class AddressSheetExample extends StatefulWidget {
  const AddressSheetExample({super.key});

  @override
  State<AddressSheetExample> createState() => _AddressSheetExampleState();
}

class _AddressSheetExampleState extends State<AddressSheetExample> {
  String? result;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Address Sheet Example'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          children: [
            AddressSheet(
              onError: (error) {
                setState(() {
                  result = error.error.localizedMessage;
                });
              },
              onSubmit: (details) {
                setState(() {
                  result = details.toJson().toString();
                });
              },
              params: AddressSheetParams(),
            ),
            SizedBox(height: 20),
            Text(result ?? ''),
          ],
        ),
      ),
    );
  }
}

5. Customization

You can customize the Address Sheet behavior by configuring the AddressSheetParams. This allows you to:

• Set default values for address fields
• Configure which fields are required
• Customize the appearance
• Set specific country restrictions

Platform Support

The Address Sheet is supported on both iOS and Android platforms, providing a native UI experience on each platform.

Best Practices

1. Always handle both the onSubmit and onError callbacks to ensure a good user experience.
2. Validate the collected address information before using it in your application.
3. Consider implementing proper error handling and display appropriate error messages to users.
4. Store the collected address information securely if you need to reuse it later.

Related Resources

• Stripe Documentation
• Flutter Stripe Package