Flutter在线支付插件square_web_payments的使用

Flutter在线支付插件square_web_payments的使用

square_web_payments 是一个开源的Flutter插件，用于集成Square Web Payments SDK。通过这个插件，开发者可以轻松地在Flutter应用中实现多种支付方式，如Apple Pay、Google Pay、信用卡和礼品卡支付。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 square_web_payments 插件来集成不同的支付方式。该示例包括Apple Pay、信用卡、礼品卡和Google Pay的实现。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Square Web Payments Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PaymentHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Square Web Payments Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ApplePayPage()),
                );
              },
              child: const Text('Apple Pay'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const CardPaymentPage()),
                );
              },
              child: const Text('Credit Card'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const GiftCardPage()),
                );
              },
              child: const Text('Gift Card'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const GooglePayPage()),
                );
              },
              child: const Text('Google Pay'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Apple Pay'),
      ),
      body: Center(
        child: PaymentBuilder(
          paymentMethodBuilder: (payments) => payments.applePay(
            payments.paymentRequest(
              const PaymentRequestOptions(
                countryCode: 'US',
                currencyCode: 'USD',
                total: LineItem(amount: '1.00', label: 'Total'),
              ),
            ),
          ),
          tokenBuilder: (applePay, tokenize) => ApplePayView(
            applePay: applePay,
            onPressed: tokenize,
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Credit Card'),
      ),
      body: Center(
        child: PaymentBuilder(
          paymentMethodBuilder: (payments) => payments.card(),
          tokenBuilder: _buildCardView,
          verifyBuilder: (verify) => Center(
            child: TextButton(
              onPressed: () => verify(
                VerifyBuyerDetails(
                  amount: '1.00',
                  billingContact: const Contact(
                    addressLines: ['123 East Main Street', '#111'],
                    city: 'Seattle',
                    countryCode: 'US',
                    email: 'johndoe@example.com',
                    familyName: 'Doe',
                    givenName: 'John',
                    phone: '+12065551212',
                    postalCode: '98111',
                    state: 'WA',
                  ),
                  currencyCode: 'USD',
                  intent: 'CHARGE',
                ),
              ),
              child: const Text('Verify'),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildCardView(PaymentCard card, void Function() tokenize) {
    // 显式请求按钮的焦点，以移除支付输入字段的键盘焦点
    final focusNode = FocusNode();
    return Column(
      children: [
        CardView(card: card),
        TextButton(
          focusNode: focusNode,
          onPressed: () {
            focusNode.requestFocus();
            tokenize();
          },
          child: const Text('Tokenize'),
        ),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gift Card'),
      ),
      body: Center(
        child: PaymentBuilder(
          paymentMethodBuilder: (payments) => payments.giftCard(),
          tokenBuilder: _buildCardView,
        ),
      ),
    );
  }

  Widget _buildCardView(PaymentCard card, void Function() tokenize) {
    // 显式请求按钮的焦点，以移除支付输入字段的键盘焦点
    final focusNode = FocusNode();
    return Column(
      children: [
        CardView(card: card),
        TextButton(
          focusNode: focusNode,
          onPressed: () {
            focusNode.requestFocus();
            tokenize();
          },
          child: const Text('Tokenize'),
        ),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Pay'),
      ),
      body: Center(
        child: PaymentBuilder(
          paymentMethodBuilder: (payments) => payments.googlePay(
            payments.paymentRequest(
              const PaymentRequestOptions(
                countryCode: 'US',
                currencyCode: 'USD',
                total: LineItem(amount: '1.00', label: 'Total'),
              ),
            ),
          ),
          tokenBuilder: (googlePay, tokenize) => GooglePayView(
            googlePay: googlePay,
            googlePayButtonOptions: const GooglePayButtonOptions(buttonSizeMode: 'fill'),
            onPressed: tokenize,
          ),
        ),
      ),
    );
  }
}