Skip to main content

Flutter SDK

A Flutter SDK for integrating the Longswipe Widget into your application. Provides both a widget-based approach and a controller-based approach for maximum flexibility.

Installation​

dependencies:
longswipe: ^1.0.4

Integration Options​

This SDK provides two ways to integrate the Longswipe Widget:

  1. LongswipeWidget: A ready-to-use widget with built-in UI
  2. LongswipeController: A flexible controller for custom UI implementations

LongswipeWidget​

A lightweight widget that loads the Longswipe Widget script and provides a simple interface with built-in UI for integrating the widget into your application. Users can pay with

  1. Vouchers
  2. Authorise directly using their Longswipe App
  3. Pay with a Wallet address
import 'package:flutter/material.dart';
import 'package:longswipe/longswipe.dart';

class PaymentScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Payment')),
body: Center(
child: LongswipeWidget(
apiKey: 'your_api_key_here',
referenceId: 'unique-transaction-id',
environment: Environment.sandbox,
onResponse: (type, data) {
switch (type) {
case ResponseType.success:
print('Success: $data');
break;
case ResponseType.error:
print('Error: $data');
break;
case ResponseType.close:
print('Widget closed');
break;
case ResponseType.start:
print('Widget started');
break;
case ResponseType.loading:
print('Widget loading');
break;
}
},
defaultCurrency: Currency.USDT,
defaultAmount: 100,
buttonText: 'Pay with Longswipe',
),
),
);
}
}

Image samples​

Properties​

PropertyTypeRequiredDescription
apiKeyStringYesYour Longswipe API key
environmentEnvironmentYesProduction or sandbox (Environment.sandbox Or Environment.production)
referenceIdStringYesUnique identifier for the transaction
onResponseFunction<ResponseType, dynamic>YesCallback function for widget events
defaultCurrencyCurrencyNoDefault currency for redemption
defaultAmountdoubleNoDefault amount for redemption
configMap<String, dynamic>NoAdditional configuration options
metaDataMap<String, dynamic>NoMetadata to pass to the widget
childWidgetNoOptional child widget as the trigger
buttonTextStringNoOptional custom text for the default button
buttonStyleButtonStyleNoOptional custom style for the default button

Response Types​

The onResponse callback receives a type parameter that can be one of the following:

TypeDescription
successWidget operation completed successfully
errorAn error occurred during widget operation
closeWidget was closed by the user
startWidget has started and is ready
loadingWidget is loading

LongswipeController​

A flexible controller that provides more control over the Longswipe Widget integration, allowing you to create custom UI components.

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

class CustomPaymentScreen extends StatefulWidget {
@override
_CustomPaymentScreenState createState() => _CustomPaymentScreenState();
}

class _CustomPaymentScreenState extends State<CustomPaymentScreen> {
late LongswipeController _controller;
String _status = '';
dynamic _result;

@override
void initState() {
super.initState();
_controller = LongswipeController(
options: LongswipeControllerOptions(
apiKey: 'your_api_key_here',
environment: Environment.sandbox,
referenceId: 'unique-transaction-id',
defaultCurrency: Currency.USDT,
defaultAmount: 100,
metaData: {'source': 'flutter-app'},
onResponse: _handleResponse,
),
);
}

void _handleResponse(ResponseType type, dynamic data) {
setState(() {
_status = type.toValue();
if (data != null) {
_result = data;
}
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Custom Payment')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Status: $_status'),
SizedBox(height: 20),
if (_result != null) ...[
Text('Result:'),
Text(_result.toString()),
SizedBox(height: 20),
],
ElevatedButton(
onPressed: () => _controller.openModal(context),
child: Text('Open Payment Modal'),
),
],
),
),
);
}
}

Controller Options​

The LongswipeController constructor accepts a LongswipeControllerOptions object with the following properties:

PropertyTypeRequiredDescription
apiKeyStringYesYour Longswipe API key
environmentEnvironmentYesProduction or sandbox (Environment.sandbox Or Environment.production)
referenceIdStringYesUnique identifier for the transaction
onResponseFunction<ResponseType, dynamic>YesCallback function for widget events
defaultCurrencyCurrencyNoDefault currency for redemption
defaultAmountdoubleNoDefault amount for redemption
configMap<String, dynamic>NoAdditional configuration options
metaDataMap<String, dynamic>NoMetadata to pass to the widget

Controller Methods and Properties​

NameTypeDescription
openModalFuture<void>Function to open the Longswipe payment modal
isLoadedboolWhether the Longswipe script has loaded successfully
isLoadingboolWhether the Longswipe script is currently loading

Required Permissions​

This package requires camera permissions for QR code scanning. You need to add the following to your app:

Android​

Add the following permissions to your android/app/src/main/AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />

iOS​

Add the following to your ios/Runner/Info.plist file:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes for payment processing</string>

Request Permissions in Your App​

It's recommended to request camera permissions at app startup:

import 'package:permission_handler/permission_handler.dart';

void main() async {
WidgetsFlutterBinding.ensureInitialized();

// Request camera permission at app startup
await Permission.camera.request();

runApp(MyApp());
}

Implementation Details​

This package uses:

  • flutter_inappwebview: For embedding a WebView with JavaScript integration
  • permission_handler: For handling camera permissions

The implementation loads the Longswipe JavaScript widget in a WebView and communicates with it using JavaScript channels. When the user opens the payment modal, a new screen is presented with the WebView that handles the payment process.

Development​

  1. Clone the repository
  2. Install dependencies:
    flutter pub get
  3. Run the example app:
    cd example
    flutter run

License​

MIT