DOCSEARCHbyAlgolia
Submit Docs

pay Flutter Plugin

repository·main·Indexed 41 days ago

https://github.com/google-pay/flutter-plugin

A federated Flutter plugin providing a unified interface for integrating Google Pay (Android) and Apple Pay (iOS) into mobile applications. It includes the main 'pay' package for agnostic integration, as well as 'pay_android', 'pay_ios', and 'pay_platform_interface' for platform-specific implementations. Key components include ApplePayButton, GooglePayButton, PaymentConfiguration for provider setup, and PaymentItem for transaction summaries.

Tokens
5.4K
Snippets
20
Records
29
Agent score
51%

What's inside pay

  1. Understand the federated plugin architecture

    main

    This plugin uses a federated architecture, meaning it is split into several packages. While most users should only use the pay package, you can use others for specific needs:

    • pay: The main app-facing package. Use this for the easiest, agnostic integration across all supported platforms.
    • pay_android: The Android-specific implementation containing the business logic for Google Pay.
    • pay_ios: The iOS-specific implementation containing the business logic for Apple Pay.
    • pay_platform_interface: Defines the common API contract. Use this if you are implementing a new platform or creating a custom implementation.

  2. Integrate pay_ios via the pay plugin

    main

    The pay_ios package is the endorsed implementation of the pay_platform_interface for iOS. The recommended way to use it is to add the pay plugin to your project. When you add pay to your pubspec.yaml, pay_ios is automatically included as a dependency for iOS platforms.

    dependencies:
  pay: ^latest_version

  3. Configure Apple Pay and Google Pay accounts

    main

    Before integrating the plugin, you must complete the setup requirements for each payment provider:

    Apple Pay Requirements:

    1. Review the integration requirements.
    2. Create a merchant identifier for your business.
    3. Create a payment processing certificate to encrypt payment information.

    Google Pay Requirements:

    1. Review the integration requirements.
    2. Sign up for and create an account in the business console.

  9. Customize the iOS launch screen assets

    main

    To change the image displayed during the app's launch on iOS, you can replace the existing image files in the pay/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

    Alternatively, you can manage these assets using Xcode:

    1. Open the iOS project by running open ios/Runner.xcworkspace from your terminal.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog to replace the current launch images.
    open ios/Runner.xcworkspace

  10. Configure payment providers with PaymentConfiguration

    main

    Payment providers are configured using a PaymentConfiguration object. This follows an open-ended schema requiring two specific properties:

    • provider: The target payment provider (e.g., PayProvider.apple_pay, PayProvider.google_pay).
    • data: A schemaless Map<String, dynamic> containing the specific fields required by the target provider.

    Refer to the test/assets folder in the repository for sample configuration objects.

  11. Define a custom ConfigLoader for PaymentConfiguration

    main

    If you are using PaymentConfiguration.fromAsset, you can provide a custom ConfigLoader via the profileLoader parameter. A ConfigLoader is a function signature that takes a String (the asset path or identifier) and returns a Future<Map<String, dynamic>> containing the decoded configuration.

    typedef ConfigLoader = Future<Map<String, dynamic>> Function(String value);

  12. Use ApplePayButton and GooglePayButton

    main

    The pay plugin provides specialized buttons to trigger payment flows. You must define PaymentItem objects representing the transaction and provide a paymentConfiguration specific to the provider.

    Key Components:

    • PaymentItem: Defines the label, amount, and status (e.g., PaymentItemStatus.final_price) of the transaction.
    • ApplePayButton: Renders the Apple Pay button. Requires paymentConfiguration, paymentItems, and an onPaymentResult callback.
    • GooglePayButton: Renders the Google Pay button. Requires paymentConfiguration, paymentItems, and an onPaymentResult callback.
    • onPaymentResult: A callback function that receives the payment token/result, which you must then send to your server or Payment Service Provider (PSP).
    import 'package:pay/pay.dart';
import 'payment_configurations.dart' as payment_configurations;

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '99.99',
    status: PaymentItemStatus.final_price,
  )
];

// Apple Pay Button
ApplePayButton(
  paymentConfiguration: payment_configurations.defaultApplePayConfig,
  paymentItems: _paymentItems,
  style: ApplePayButtonStyle.black,
  type: ApplePayButtonType.buy,
  margin: const EdgeInsets.only(top: 15.0),
  onPaymentResult: onApplePayResult,
  loadingIndicator: const Center(
    child: CircularProgressIndicator(),
  ),
),

// Google Pay Button
GooglePayButton(
  paymentConfiguration: payment_configurations.defaultGooglePayConfig,
  paymentItems: _paymentItems,
  type: GooglePayButtonType.buy,
  margin: const EdgeInsets.only(top: 15.0),
  onPaymentResult: onGooglePayResult,
  loadingIndicator: const Center(
    child: CircularProgressIndicator(),
  ),
),

void onApplePayResult(paymentResult) {
  // Send the resulting Apple Pay token to your server / PSP
}

void onGooglePayResult(paymentResult) {
  // Send the resulting Google Pay token to your server / PSP
}