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
更多关于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 请求,处理支付。
步骤:
-
添加依赖:在
pubspec.yaml
文件中添加http
包。dependencies: flutter: sdk: flutter http: ^0.13.3
-
发送支付请求:使用
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}'); } }
-
处理响应:根据 SagePay API 的响应,更新 UI 或处理支付结果。
2. 使用第三方插件
虽然 Flutter 社区中没有官方的 SagePay 插件,但你可以搜索是否有第三方开发者发布的插件。你可以在 pub.dev 上搜索 sagepay
或相关的支付插件。
3. 使用 WebView 加载 SagePay 支付页面
另一种方法是使用 Flutter 的 webview_flutter
插件来加载 SagePay 的支付页面。
步骤:
-
添加依赖:在
pubspec.yaml
文件中添加webview_flutter
包。dependencies: flutter: sdk: flutter webview_flutter: ^4.0.0
-
加载支付页面:在 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, ), ); } }
-
导航到支付页面:在你的应用中导航到
SagePayWebView
。Navigator.push( context, MaterialPageRoute( builder: (context) => SagePayWebView(paymentUrl: 'https://your-sagepay-payment-url.com'), ), );