Skip to main content

Get Started

note

Use this guide to integrate Doo Payment SDK to your Flutter app. You can use the following app demo as a reference with your Doo Payment credentials to test the setup.

Requirements​

1. Build checkout page on the client​

1.1 Install the flutter_hyperswitch library​

Add flutter_hyperswitch to your pubspec.yaml file

dependencies:
  flutter_hyperswitch: ^1.3.9

Run the following command to fetch and install the dependencies.

flutter pub get

2. Complete the checkout on the client​

2.1 Initialise the Doo Payment SDK​

Initialise Hyper onto your app with your publishable key with the Hyper constructor.

import 'package:flutter_hyperswitch/flutter_hyperswitch.dart';
final _hyper = FlutterHyperswitch();
_hyper.init(HyperConfig(publishableKey: 'YOUR_PUBLISHABLE_KEY', customBackendUrl: 'YOUR_CUSTOM_BACKEND_URL'));
note

When utilising a custom backend or logging system, you can add the customBackendUrl to HyperConfig

2.2 Create a Payment Intent​

The clientSecret returned by your endpoint is used to complete the payment.

Future<String> fetchPaymentParams() async {
    try {
      var response = await http.get(Uri.parse("$API_URL/payments"),
      return jsonDecode(response.body)["client_secret"];
    } catch (error) {
      throw Exception("Create Payment API call failed");
    }
  }

2.3 Initialize your Payment Session​

Initialize a Payment Session by passing the clientSecret to the initPaymentSession

final params = PaymentMethodParams(clientSecret: 'YOUR_PAYMENT_INTENT_CLIENT_SECRET');
Session? _sessionId = await _hyper.initPaymentSession(params);

2.4 Present payment sheet and handle response​

To display the Payment Sheet, integrate a "Pay Now" button within the checkout page, which, when clicked, invokes the presentPaymentSheet()method and handles the payment response.

Consider the below function, it invokes presentPaymentSheet and handles payment results.

Future<void> _presentPaymentSheet() async {
  final presentPaymentSheetResponse = await _hyper.presentPaymentSheet(_sessionId!);
  if (presentPaymentSheetResponse != null) {
    final message = presentPaymentSheetResponse.message;
    setState(() {
      if (message.isLeft) {
        _statusText =
            "${presentPaymentSheetResponse.status.name}\n${message.left!.name}";
      } else {
        _statusText =
            "${presentPaymentSheetResponse.status.name}\n${message.right}";
      }
    });
  }
}

Congratulations! Now that you have integrated the Flutter SDK.