Adyen Flutter (alpha)

Important

This package is an alpha version. Breaking changes might be included in later versions.

The Adyen Flutter package provides you with the building blocks to create a seamless checkout experience for your Android and iOS Flutter app.

You can integrate in two ways:

• Drop-in: An out-of-the-box solution that includes all available payment methods for shoppers to choose. This wrapper for the native iOS and Android Adyen Drop-in is the quickest way to accept payments in your app.
• Card component: A dedicated card widget for shoppers to pay with a card. This is a wrapper for the native iOS and Android Adyen card Components.

Android	iOS

Before you begin

1. Get an Adyen test account.
2. Get your Client key. Your client app does not communicate with the Adyen API directly.
3. Get your API key. You need the API key to make requests from your server .
4. Set up your webhooks to get the payment outcome.

Install the package

Android integration

This package supports Android 5.0 or later.

For Drop-in and card Component:

Adjust your activity to inherit from FlutterFragmentActivity:

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
    // ...
}

For card Component only:

Declare the intent filter in your AndroidManifest.xml file:

  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data
          android:host="YOUR_APPLICATION_ID e.g. com.adyen.checkout.flutter.example"
          android:path="YOUR_CUSTOM_PATH e.g. /card"
          android:scheme="adyencheckout" />
  </intent-filter>

iOS integration

This package supports iOS 12 or later.

Add the return URL handler to your AppDelegate.swift file:

override func application(_: UIApplication, open url: URL, options _: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    RedirectComponent.applicationDidOpen(from: url)
return true
}

In your app, add a custom URL Scheme that matches the return URL.

For Drop-in only

Voucher payment methods require a photo library usage description. Add them to the Info.plist file.

How it works

You can use Adyen Flutter with either of our server-side flows:

• Sessions flow
• Advanced flow

You must use Checkout API v71 or later.

Drop-in with Sessions flow:

1. From your server, make a /sessions request.

The response contains:

• sessionData: the payment session data you need to pass to your front end.
  
• id: a unique identifier for the session data.
  
• The request body.

Put these into a sessionResponse object and pass it to your client app.

2. Create the DropInConfiguration.

final DropInConfiguration dropInConfiguration = DropInConfiguration(
  // Change the environment to live when you are ready to accept real payments.
  environment: Environment.test,
  clientKey: CLIENT_KEY,
  countryCode: COUNTRY_CODE,
  shopperLocale: SHOPPER_LOCALE,
  amount: AMOUNT,
);

The DropInConfiguration also supports optional payment method configurations.

3. Call the create method, passing the required properties:

   final SessionCheckout sessionCheckout = await AdyenCheckout.session.create(
     sessionId: sessionResponse.id,
     sessionData: sessionResponse.sessionData,
     configuration: dropInConfiguration,
   );

4. Call startDropin to start the Drop-in UI and wait for the session payment result. Drop-in handles the payment flow:

final PaymentResult paymentResult =  await AdyenCheckout.session.startDropIn(
  dropInConfiguration: dropInConfiguration,
  checkout: sessionCheckout,
);

5. Handle the payment result.
   1. Inform the shopper. Use the resultCode from the API response to show your shopper the current payment status.
   2. Update your order management system. You get the final payment status in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference. For a successful payment, the event contains success: true.

Drop-in with Advanced flow:

1. From your server, make a /paymentMethods request.
2. Create the DropInConfiguration.

final DropInConfiguration dropInConfiguration = DropInConfiguration(
   // Change the environment to live when you are ready to accept real payments.
  environment: Environment.test,
  clientKey: CLIENT_KEY,
  countryCode: COUNTRY_CODE,
  shopperLocale: SHOPPER_LOCALE,
  amount: AMOUNT,
);

The DropInConfiguration also supports optional payment method configurations.

1. Create an AdvancedCheckout object and provide two callbacks
   
   • onSubmit: from your server, make a /payments request.
     
   • onAdditionalDetails: from your server, make a /payments/details

final AdvancedCheckout advancedCheckout = AdvancedCheckout(
  onSubmit: YOUR_ON_SUBMIT_CALL,
  onAdditionalDetails: YOUR_ON_ADDITIONAL_DETAILS_CALL,
);

1. Start the Drop-in UI and wait for the payment result. Drop-in handles the payment flow:

final paymentResult = await AdyenCheckout.advanced.startDropIn(
  dropInConfiguration: dropInConfiguration,
  paymentMethodsResponse: paymentMethodsResponse,
  checkout: advancedCheckout,
);

1. Handle the payment result. Inform the shopper. Use the resultCode from the API response to show your shopper the current payment status. Update your order management system. You get the final payment status in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference. For a successful payment, the event contains success: true.

Card Component with Sessions flow:

1. From your server, make a sessions request.The response contains:
   

• sessionData: the payment session data you need to pass to your front end.
  
• id: a unique identifier for the session data.
  
• The request body.

Put these into a sessionResponse object and pass it to your client app.

2. Create the CardComponentConfiguration.

final CardComponentConfiguration cardComponentConfiguration = CardComponentConfiguration(
  // Change the environment to live when you are ready to accept real payments.
  environment: Environment.test,
  clientKey: CLIENT_KEY,
  countryCode: COUNTRY_CODE,
  shopperLocale: SHOPPER_LOCALE,
  amount: AMOUNT,
);

3. Call the create method, passing the required properties:

final sessionCheckout = await AdyenCheckout.session.create(
  sessionId: sessionResponse.id,
  sessionData: sessionResponse.sessionData,
  configuration: cardComponentConfiguration,
);

4. Get the card payment method to use from the sessionCheckout object.
5. Create the card component widget:

AdyenCardComponent(
  configuration: cardComponentConfiguration,
  paymentMethod: paymentMethod,
  checkout: sessionCheckout,
  onPaymentResult: (paymentResult) async {
    // handle paymentResult
  },
);

Card Component with Advanced flow:

1. From your server, make a /paymentMethods request.

2. Get the card payment method to use the payment methods list in the response.

3. Create the CardComponentConfiguration.

final CardComponentConfiguration cardComponentConfiguration = CardComponentConfiguration(
  // Change the environment to live when you are ready to accept real payments.
  environment: Environment.test,
  clientKey: CLIENT_KEY,
  countryCode: COUNTRY_CODE,
  shopperLocale: SHOPPER_LOCALE,
  amount: AMOUNT,
);

4. Create an AdvancedCheckout object and provide two callbacks:
   

• onSubmit: from your server, make a /payments request.
  
• onAdditionalDetails: from your server, make a /payments/details

final AdvancedCheckout advancedCheckout = AdvancedCheckout(
  onSubmit: YOUR_ON_SUBMIT_CALL,
  onAdditionalDetails: YOUR_ON_ADDITIONAL_DETAILS_CALL,
);

5. Create the card component widget:

AdyenCardComponent(
  configuration: cardComponentConfiguration,
  paymentMethod: paymentMethod,
  checkout: advancedCheckout,
  onPaymentResult: (paymentResult) async {
    // handle paymentResult
  },
);

Support

If you have a feature request, or spot a bug or a technical problem, create an issue.

For other questions, contact our support team.

Contributing

We merge every pull request into the main branch. We aim to keep main in good shape, which allows us to release a new version whenever we need to.

We strongly encourage you to provide feedback or contribute to our repository. Have a look at our contribution guidelines to find out how to raise a pull request.

License

This repository is available under the MIT license.