Flutter支付集成插件sagepay的使用

Flutter支付集成插件sagepay的使用

Getting started(开始使用)

要使用此插件,请在pubspec.yaml文件中将sagepay作为依赖项添加。

dependencies:
  sagepay: ^版本号

运行以下命令以获取依赖项:

flutter pub get

How to Use(如何使用)

该插件使用两个API:

1. 创建SagePay实例

通过调用构造函数SagePay创建SagePay实例。构造函数接受以下必需参数:

  • context
  • business
  • reference
  • callbackUrl
  • amount
  • token

它返回一个SagePay实例,然后我们可以在其上调用异步方法.chargeTransaction()

import 'package:sagepay/sagepay.dart';

final sagePay = SagePay(
  context: context,
  amount: 100, // 支付金额
  reference: "随机生成的字符串", // 唯一标识符
  callbackUrl: "回调URL", // 回调地址
  token: "秘钥", // 商户秘钥
  business: Business(
    name: "商户名称", // 商户名称
    email: "商户邮箱" // 商户邮箱
  ),
  paymentMethod: 'card,transfer', // 支付方式,支持信用卡和转账
  metadata: {
    "name": "John Doe", // 用户姓名
    "email": "johndoe@example.com" // 用户邮箱
  }
);

// 调用支付接口
PaymentResponse? response = await sagePay.chargeTransaction();

2. 处理响应

调用.chargeTransaction()方法返回一个Future<PaymentResponse>,我们可以等待实际的响应。

PaymentResponse? response = await sagePay.chargeTransaction();

if (response != null) {
  if (response.success!) {
    // 处理成功响应
    print("支付成功");
  } else {
    // 处理未成功的响应
    print("支付失败");
  }
} else {
  // 用户取消了结账
  print("用户取消了支付");
}

Additional information(其他信息)

完整示例代码

以下是完整的示例代码,展示如何在Flutter应用中集成SagePay支付插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SagePay Example',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SagePay Example"),
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          child: ElevatedButton(
            onPressed: () => gotoPaymentGateway(),
            child: const Text('Go to SagePay Checkout'),
          ),
        ),
      ),
    );
  }

  gotoPaymentGateway() async {
    final sagePay = SagePay(
      context: context,
      amount: 100, // 支付金额
      reference: "随机生成的字符串", // 唯一标识符
      callbackUrl: "回调URL", // 回调地址
      token: "秘钥", // 商户秘钥
      business: Business(
        name: "商户名称", // 商户名称
        email: "商户邮箱" // 商户邮箱
      ),
      paymentMethod: 'card,transfer', // 支付方式,支持信用卡和转账
      metadata: {
        "name": "John Doe", // 用户姓名
        "email": "johndoe@example.com" // 用户邮箱
      }
    );

    PaymentResponse? response = await sagePay.chargeTransaction();

    if (response != null) {
      if (response.success!) {
        // 处理成功响应
        print("支付成功");
      } else {
        // 处理未成功的响应
        print("支付失败");
      }
    } else {
      // 用户取消了结账
      print("用户取消了支付");
    }
  }
}

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

1 回复

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


SagePay 是一个流行的支付网关,允许企业处理在线支付。在 Flutter 应用中集成 SagePay 支付功能,通常需要使用第三方插件或直接与 SagePay 的 API 进行交互。目前,Flutter 社区中并没有官方的 SagePay 插件,但你可以通过以下步骤来实现 SagePay 的集成。

1. 使用 HTTP 请求与 SagePay API 交互

SagePay 提供了 RESTful API,你可以使用 Flutter 的 http 包来发送 HTTP 请求,处理支付。

步骤:

  1. 添加依赖:在 pubspec.yaml 文件中添加 http 包。

    dependencies:
      flutter:
        sdk: flutter
      http: ^0.13.3
    
  2. 发送支付请求:使用 http 包发送 POST 请求到 SagePay 的 API。

    import 'package:http/http.dart' as http;
    import 'dart:convert';
    
    Future<void> processPayment() async {
      final url = Uri.parse('https://pi-live.sagepay.com/api/v1/payments');
    
      final headers = {
        'Authorization': 'Basic YOUR_ENCODED_AUTH_STRING',
        'Content-Type': 'application/json',
      };
    
      final body = jsonEncode({
        'transactionType': 'Payment',
        'paymentMethod': {
          'card': {
            'merchantSessionKey': 'YOUR_MERCHANT_SESSION_KEY',
            'cardIdentifier': 'YOUR_CARD_IDENTIFIER',
            'save': false
          }
        },
        'vendorTxCode': 'YOUR_VENDOR_TX_CODE',
        'amount': 1000, // Amount in pence/cents
        'currency': 'GBP',
        'description': 'Test Payment',
        'apply3DSecure': 'UseMSPSetting',
        'customerFirstName': 'John',
        'customerLastName': 'Doe',
        'billingAddress': {
          'address1': '123 Main St',
          'city': 'London',
          'postalCode': 'SW1A 1AA',
          'country': 'GB'
        },
        'entryMethod': 'Ecommerce'
      });
    
      final response = await http.post(url, headers: headers, body: body);
    
      if (response.statusCode == 200) {
        final responseData = jsonDecode(response.body);
        print('Payment Successful: ${responseData['status']}');
      } else {
        print('Payment Failed: ${response.body}');
      }
    }
    
  3. 处理响应:根据 SagePay API 的响应,更新 UI 或处理支付结果。

2. 使用第三方插件

虽然 Flutter 社区中没有官方的 SagePay 插件,但你可以搜索是否有第三方开发者发布的插件。你可以在 pub.dev 上搜索 sagepay 或相关的支付插件。

3. 使用 WebView 加载 SagePay 支付页面

另一种方法是使用 Flutter 的 webview_flutter 插件来加载 SagePay 的支付页面。

步骤:

  1. 添加依赖:在 pubspec.yaml 文件中添加 webview_flutter 包。

    dependencies:
      flutter:
        sdk: flutter
      webview_flutter: ^4.0.0
    
  2. 加载支付页面:在 Flutter 中使用 WebView 加载 SagePay 的支付页面。

    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    class SagePayWebView extends StatelessWidget {
      final String paymentUrl;
    
      SagePayWebView({required this.paymentUrl});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('SagePay Payment'),
          ),
          body: WebView(
            initialUrl: paymentUrl,
            javascriptMode: JavascriptMode.unrestricted,
          ),
        );
      }
    }
    
  3. 导航到支付页面:在你的应用中导航到 SagePayWebView

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SagePayWebView(paymentUrl: 'https://your-sagepay-payment-url.com'),
      ),
    );
回到顶部