Flutter支付结算插件klump_checkout的使用

Flutter支付结算插件klump_checkout的使用

Klump Checkout Flutter插件

Flutter插件用于实现Klump Checkout。Klump是一个现代且易于使用的平台，允许用户通过信用卡（借记卡或信用卡）或银行账户分期付款。

开始之前

在开始之前，请完成以下步骤：

• 在useklump上创建一个商户账户。
• 查看我们的入门指南，创建您的商户账户并检索API密钥。

入门

此库可以帮助您快速地将Klump Checkout集成到您的混合Android/iOS应用中。所有您需要做的就是…

安装

要使用此插件，在pubspec.yaml文件中添加klump_checkout作为依赖项。

dependencies:
  klump_checkout: ^1.0.25

使用

概览流程

1. 收集Klump的checkout data。
2. 通过创建KlumpCheckout类的对象来初始化KlumpCheckout。
3. 调用带有isLive、context和data参数的pay方法以呈现Klump结算视图。
4. 一旦请求成功，将返回一个KlumpCheckoutResponse对象。

安装

要开始使用此包，只需将以下内容添加到项目的pubspec.yaml文件中。

klump_checkout: <lastest-version>

权限

要在应用程序中使用此插件，您的Android应用必须声明互联网权限。在AndroidManifest.xml文件的应用程序级别中添加以下代码：

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

初始化插件

使用KlumpCheckout类首先初始化插件。

final klumpCheckout = KlumpCheckout();

执行结算

使用pay方法进行支付交易。

final res = await klumpCheckout.pay(
  isLive: false,       // 是否为生产环境
  context: context,    // 当前BuildContext
  data: const KlumpCheckoutData(
    merchantPublicKey: 'klp_pk_test_e4aaa1a8e96644ad9af23fa453ddd6ffa39a8233a88c4b93860f119c8cd9a332', // 商户公钥
    amount: 45000,      // 金额
    shippingFee: 5000,  // 运费
    merchantReference: "what-ever-you-want-this-to-be", // 商户参考号
    metaData: {
      'customer': "Elon Musk", // 客户名称
      'email': "musk@spacex.com", // 客户邮箱
    },
    items: [
      KlumpCheckoutItem(
        imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', // 商品图片URL
        itemUrl: 'https://www.paypal.com/in/webapps/mpp/home', // 商品链接
        name: 'Awesome item', // 商品名称
        unitPrice: 20000, // 单价
        quantity: 2, // 数量
      )
    ],
  ),
);

完整示例Demo

以下是一个完整的示例，演示了如何在Flutter应用中使用klump_checkout插件。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FirstScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Klump Checkout Sample'),
        centerTitle: false,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final klumpCheckout = KlumpCheckout();
            final res = await klumpCheckout.pay(
              isLive: false,
              context: context,
              data: const KlumpCheckoutData(
                merchantPublicKey: 'klp_pk_test_02a0a1946e4d45679af80cb0c16f54f0a39a8233a88c4b93860f119c8cd9a332',
                amount: 300000,
                shippingFee: 10000,
                merchantReference: "what-ever-you-want-this-to-be",
                metaData: {
                  'customer': "Elon Musk",
                  'email': "sample@mail.com",
                },
                items: [
                  KlumpCheckoutItem(
                    imageUrl: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
                    itemUrl: 'https://www.paypal.com/in/webapps/mpp/home',
                    name: 'Awesome item',
                    unitPrice: 150000,
                    quantity: 2,
                  )
                ],
                shippingData: null,
                email: 'sample@mail.com',
                phone: '08012345678',
              ),
            );
            // ignore: avoid_print
            print(res);
            // 根据返回的响应执行相应的操作
          },
          child: const Text('Text Checkout'),
        ),
      ),
    );
  }
}