Flutter支付处理插件xendit的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter支付处理插件Xendit的使用

简介

xendit 是一个非官方库，用于与 Xendit API 进行交互，支持多种平台和服务器端操作。

安装包

在你的项目中添加 xendit 包：

dart pub add xendit

快速开始

下面是一个简单的示例，展示了如何使用 xendit 发起一个请求来创建发票：

示例代码

import 'package:xendit/xendit.dart';

void main() async {
  // 初始化 Xendit 实例
  Xendit xendit = Xendit(apiKey: "your_api_key_here");

  // 发起请求创建发票
  var res = await xendit.invoke(
    endpoint: "POST https://api.xendit.co/v2/invoices",
    headers: {
      "for-user-id": "", // 如果需要指定用户ID，请填写
    },
    parameters: {
      "external_id": "asoaskoaks", // 外部订单ID
      "amount": 10000, // 支付金额
    },
    queryParameters: {
      "id": "saksoak" // 查询参数（如果有）
    }
  );

  print(res); // 打印响应结果
}

注意事项

  • API Key: 请确保替换 "your_api_key_here" 为你的实际 Xendit API 密钥。
  • Method Shorthand: 当前方法简写尚未完全可用。如果你想要使用最新的 API 方法，可以直接通过 invoke 方法进行调用。

Flutter 应用中的完整示例

以下是一个完整的 Flutter 应用示例，展示了如何集成 xendit 插件以处理支付流程：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Xendit Payment Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String _response = '';

  void _incrementCounter() async {
    setState(() {
      _counter++;
    });

    // 模拟发起支付请求
    try {
      Xendit xendit = Xendit(apiKey: "your_api_key_here");
      var res = await xendit.invoke(
        endpoint: "POST https://api.xendit.co/v2/invoices",
        headers: {},
        parameters: {
          "external_id": "order_12345",
          "amount": 10000,
        },
        queryParameters: {},
      );
      setState(() {
        _response = res.toString();
      });
    } catch (e) {
      setState(() {
        _response = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Text(
              'Response from Xendit: $_response',
              textAlign: TextAlign.center,
              style: const TextStyle(color: Colors.green),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

解释

  • 初始化 Xendit 实例: 在 _incrementCounter 方法中，我们创建了一个 Xendit 实例，并使用了 API 密钥。
  • 发起支付请求: 使用 invoke 方法发送 POST 请求到 Xendit 的发票创建接口。
  • 显示响应: 将响应结果显示在应用界面上。

参考文档

希望这个示例能够帮助你快速上手并集成 Xendit 支付网关到你的 Flutter 应用中！


更多关于Flutter支付处理插件xendit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter支付处理插件xendit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中集成和使用Xendit支付处理插件的示例代码。请注意，实际使用时需要替换为你的Xendit API密钥和相关的支付参数。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加Xendit插件的依赖。目前（截至我最后更新的日期），Xendit官方可能还没有一个直接用于Flutter的插件，但你可以通过调用Xendit的REST API来实现支付功能。因此，你可能需要使用http或dio这样的HTTP客户端库。

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 或者使用dio等其它HTTP客户端

2. 配置API密钥

创建一个文件（例如config.dart）来存储你的Xendit API密钥。

// config.dart
class Config {
  static const String XENDIT_API_KEY = 'your_xendit_api_key_here';
  static const String XENDIT_API_BASE_URL = 'https://api.xendit.co';
}

3. 创建支付请求

接下来，创建一个服务（例如payment_service.dart）来处理支付请求。

// payment_service.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'config.dart';

class PaymentService {
  Future<Map<String, dynamic>> createPayment({
    required String externalId,
    required double amount,
    required String description,
    required String email,
    required String phone,
    required String callbackUrl,
  }) async {
    final url = '${Config.XENDIT_API_BASE_URL}/v2/payments';

    final headers = {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ${Config.XENDIT_API_KEY}',
    };

    final body = jsonEncode({
      "external_id": externalId,
      "amount": amount,
      "currency": "IDR",  // 假设使用印尼卢比
      "description": description,
      "email": email,
      "phone": phone,
      "redirect_url": {
        "success_redirect_url": callbackUrl,
        "failure_redirect_url": callbackUrl,
      },
      "methods": ["credit_card"],  // 或其他你支持的支付方式
    });

    final response = await http.post(Uri.parse(url), headers: headers, body: body);

    if (response.statusCode == 200) {
      return jsonDecode(response.body) as Map<String, dynamic>;
    } else {
      throw Exception('Failed to create payment: ${response.statusCode}');
    }
  }
}

4. 使用支付服务

在你的Flutter组件中调用支付服务。

// main.dart
import 'package:flutter/material.dart';
import 'payment_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Xendit Payment Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final paymentService = PaymentService();
              try {
                final paymentResult = await paymentService.createPayment(
                  externalId: 'payment_external_id_123',
                  amount: 100000.0,  // 100,000 IDR
                  description: 'Test Payment',
                  email: 'user@example.com',
                  phone: '+6281234567890',
                  callbackUrl: 'https://yourwebsite.com/callback',
                );

                print('Payment Result: $paymentResult');
                // 根据支付结果，你可以在这里处理支付成功或失败的逻辑
              } catch (e) {
                print('Error: $e');
              }
            },
            child: Text('Create Payment'),
          ),
        ),
      ),
    );
  }
}

注意事项

  1. 安全性：不要在客户端代码中硬编码API密钥。考虑使用更安全的方法，如环境变量或后端服务来处理敏感信息。
  2. 错误处理：添加更多的错误处理逻辑，以便更好地处理各种可能的异常情况。
  3. UI/UX：根据你的需求，定制UI/UX体验，例如显示支付状态、加载指示器等。
  4. 回调处理：确保你有一个合适的后端服务来处理Xendit的回调通知，以便更新订单状态。

希望这个示例代码能帮助你在Flutter项目中集成Xendit支付处理。

回到顶部