Flutter支付功能插件payu_payment的使用

Flutter支付功能插件payu_payment的使用

简单集成PayU支付到Flutter应用。

使用方法

目前，你可以使用PayUWebView小部件来构建你的PayU WebView。首先你需要：

1. 创建并配置PayUFlutter对象。
2. 使用prepareOrder方法创建并放置PayUOrder。
3. 将从prepareOrder获取的响应传递给PayUWebView小部件。

示例

创建并配置PayUFlutter对象

PayUFlutter payuFlutter = PayUFlutter(
  clientId: 1,
  clientSecret: 'SUPER_SECRET',
  isProduction: false,
);

创建并放置PayUOrder使用prepareOrder方法

PayUOrder order = PayUOrder(
  posId: 398870,
  description: 'ZAKUPY',
  currencyCode: 'PLN',
  buyer: PayUBuyer(
    email: 'thatlukeurban@gmail.com',
    firstName: 'null',
    language: 'pl',
    lastName: 'null',
    phone: '555555555',
  ),
  products: [
    PayUProduct(
      name: 'Air',
      unitPrice: 100,
      quantity: 10,
    )
  ]
);

PayUOrderResponse payUOrderResponse = await payuFlutter.prepareOrder(order);

将响应传递给PayUWebView小部件

PayUWebView(
  builder: (WebViewController controller, Widget child) {
    return child;
  },
  orderResponse: payUOrderResponse,
  redirectUrl: redirectUrl,
  onPaymentEnd: (bool paymentSuccessful) {
    // 如果不覆盖`onPaymentEnd`方法，则默认会执行`Navigator.pop(context);`
    Navigator.of(context).pop(paymentSuccessful);
  }
)

• builder - 必需 - 构建器公开以便访问WebViewController。这允许开发者包装child以提供一些功能，如重新加载、刷新、后退等。参见WebViewController文档。
• orderResponse - 必需 - <strong>PayUOrderResponse</strong> - 来自payuFlutter.prepareOrder(order);的响应对象。
• onPaymentEnd - 可选 - <strong>Function(bool)</strong> - 默认情况下它会执行Navigator.of(context).pop();，但你可以覆盖此行为。
• customLoadingWidget - 可选 - <strong>Widget</strong> - 当webView正在加载时显示。默认为CircularProgressIndicator。
• redirectUrl - 必需 - <strong>String</strong> - 重定向URL是payu_payment设置的重要部分。它需要与PayU商店中的“网站地址”相同（如下图所示）。该URL是WebView中的PayU流程结束的地方。插件使用该URL来检测用户是否成功付款。

记住在代码中放置有效的PayU账户设置。

完整示例

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

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 确保这是PayU设置的商店“网站地址”
  String redirectUrl = 'https://lukeurban.tech';
  
  PayUOrder order = PayUOrder(
    posId: 398870,
    description: 'ZAKUPY',
    currencyCode: 'PLN',
    buyer: PayUBuyer(
      email: 'thatlukeurban@gmail.com',
      firstName: 'null',
      language: 'pl',
      lastName: 'null',
      phone: '555555555',
    ),
    products: [
      PayUProduct(
        name: 'Air',
        unitPrice: 100,
        quantity: 10,
      )
    ]
  );

  PayUFlutter payuFlutter = PayUFlutter(
    clientId: 1,
    clientSecret: 'SUPER_SECRET',
    isProduction: false,
  );

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  openAsBottomModal(PayUOrderResponse payUOrderResponse) {
    return showModalBottomSheet(
      useRootNavigator: true,
      elevation: 20,
      enableDrag: false,
      isDismissible: false,
      isScrollControlled: true,
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25.0),
          topRight: Radius.circular(25.0),
        ),
      ),
      backgroundColor: Colors.white,
      builder: (BuildContext context) {
        return Center(
          child: Container(
            child: PayUWebView(
              builder: (WebViewController controller, Widget child) {
                return child;
              },
              orderResponse: payUOrderResponse,
              redirectUrl: redirectUrl,
            ),
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Column(
            children: [
              TextButton(
                onPressed: () async {
                  PayUOrderResponse payUOrderResponse = await payuFlutter.prepareOrder(order);
                  openAsBottomModal(payUOrderResponse).then((value) {
                    String result = value == true ? '成功' : '失败';
                    print('支付结果: $result');
                  });
                },
                child: Text("授权在底部模态框"),
              ),
              TextButton(
                onPressed: () async {
                  PayUOrderResponse payUOrderResponse = await payuFlutter.prepareOrder(order);

                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => Scaffold(
                              appBar: AppBar(),
                              body: PayUWebView(
                                builder: (WebViewController controller, Widget child) {
                                  return child;
                                },
                                orderResponse: payUOrderResponse,
                                redirectUrl: redirectUrl,
                                onPaymentEnd: (bool paymentSuccessful) {
                                  print('我的自定义支付回调');
                                  Navigator.of(context).pop(paymentSuccessful);
                                },
                              ),
                            )),
                  ).then((value) {
                    String result = value == true ? '成功' : '失败';
                    print('支付结果: $result');
                  });
                },
                child: Text("授权其他视图"),
              ),
            ],
          );
        },
      ),
    );
  }
}