Flutter Plugin for PAY.JP SDK .A Flutter plugin for PAY.JP Mobile SDK.

オンライン決済サービス「PAY.JP」をFlutterアプリケーションに組み込むためのプラグインです。 このプラグインは以下の機能を提供します。

  • クレジットカード決済のためのカードフォーム
  • Apple Payアプリ内決済(iOSのみ)

詳細は公式オンラインドキュメントを確認ください。

Compatible Platforms

PlatformCardFormApplePay
iOS
Android 
Web  

License

Flutter Plugin for PAY.JP SDK is available under the MIT license. See the LICENSE file for more info.

Development

Generate models

See generator/README.md.

Bump up version

tool/bump_version.sh [NEW_VERSION]

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add payjp_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  payjp_flutter: ^0.4.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:payjp_flutter/payjp_flutter.dart';

example/lib/main.dart

/*
 * Copyright (c) 2020 PAY, Inc.
 *
 * Use of this source code is governed by a MIT License that can by found in the LICENSE file.
 */

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart' hide Card;
import 'package:flutter/material.dart' as material show Card;
import 'package:payjp_flutter/payjp_flutter.dart';

import 'sample_backend_service.dart';
import 'widgets/alert_dialog.dart';

// TODO: REPLACE WITH YOUR PAYJP Public key
const String payjpPublicKey = "pk_test_0383a1b8f91e8a6e3ea0e2a9";

const String appleMerchantId =
    'merchant.jp.pay.example2'; // TODO: REPLACE WITH YOUR APPLE MERCHANT ID

void main() => runApp(MaterialApp(
      home: HomeScreen(),
    ));

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => HomeScreenState();
  static final GlobalKey<ScaffoldState> scaffoldKey =
      GlobalKey<ScaffoldState>();
}

class HomeScreenState extends State<HomeScreen> {
  bool _isLoading = true;
  bool _canUseApplePay = false;

  @override
  void initState() {
    super.initState();
    _initPayjp();
  }

  Future<void> _initPayjp() async {
    await Payjp.init(
        publicKey: payjpPublicKey,
        debugEnabled: true,
        threeDSecureRedirect: PayjpThreeDSecureRedirect(
            url: 'jp.pay.example://tds/finish', key: 'mobileapp'));
    var isApplePayAvailable = false;
    if (Platform.isIOS) {
      await Payjp.setIOSCardFormStyle(
        labelTextColor: Colors.black87,
        inputTextColor: Colors.blue[700],
        errorTextColor: Colors.red,
        submitButtonColor: Colors.blue[800],
      );
      isApplePayAvailable = await Payjp.isApplePayAvailable();
    }
    setState(() {
      _isLoading = false;
      _canUseApplePay = isApplePayAvailable;
    });
  }

  void _onStartCardForm(
      {CardFormType formType = CardFormType.multiLine}) async {
    await Payjp.startCardForm(
        onCardFormCanceledCallback: _onCardFormCanceled,
        onCardFormCompletedCallback: _onCardFormCompleted,
        onCardFormProducedTokenCallback: _onCardFormProducedToken,
        cardFormType: formType);
  }

  void _onStartApplePay() async {
    await Payjp.makeApplePayToken(
      appleMerchantId: appleMerchantId,
      currencyCode: 'JPY',
      countryCode: 'JP',
      summaryItemLabel: 'PAY.JP T-shirt',
      summaryItemAmount: '100',
      requiredBillingAddress: false,
      onApplePayProducedTokenCallback: _onApplePayProducedToken,
      onApplePayFailedRequestTokenCallback: _onApplePayFailedRequestToken,
      onApplePayCompletedCallback: _onApplePayCompleted,
    );
  }

  void _onCardFormCanceled() {
    print('_onCardFormCanceled');
  }

  void _onCardFormCompleted() {
    print('_onCardFormCompleted');
    showAlertDialog(
        context: HomeScreen.scaffoldKey.currentContext!,
        title: 'カード登録',
        message: 'カードを登録しました。');
  }

  FutureOr<CallbackResult> _onCardFormProducedToken(Token token) async {
    print('_onCardFormProducedToken');
    try {
      await saveCard(token);
    } on ApiException catch (e) {
      return CallbackResultError(e.message);
    }
    return CallbackResultOk();
  }

  FutureOr<CallbackResult> _onApplePayProducedToken(Token token) async {
    print('_onApplePayProducedToken');
    if (backendUrl.isEmpty) {
      final message = """
`backendUrl` is not replaced yet.
You can send token(${token.id}) to your own server to make Customer etc.
       """;
      print(message);
      return CallbackResultOk();
    }
    try {
      await saveCard(token);
    } on ApiException catch (e) {
      return CallbackResultError(e.message);
    }
    return CallbackResultOk();
  }

  FutureOr<CallbackResultError> _onApplePayFailedRequestToken(
      ErrorInfo errorInfo) async {
    print('_onApplePayFailedRequestToken');
    print('errorCode ${errorInfo.errorCode}');
    print('errorMessage ${errorInfo.errorMessage}');
    return CallbackResultError(errorInfo.errorMessage);
  }

  void _onApplePayCompleted() {
    print('onApplePayCompleted');
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          key: HomeScreen.scaffoldKey,
          appBar: AppBar(
            title: const Text('PAY.JP Flutter Plugin Sample'),
          ),
          body: _isLoading
              ? Center(child: CircularProgressIndicator())
              : ListView(
                  children: <Widget>[
                    material.Card(
                        child: ListTile(
                      title: Text('CardForm Sample (MultiLine)'),
                      subtitle: Text('Tap here to start card form.'),
                      onTap: _onStartCardForm,
                    )),
                    material.Card(
                        child: ListTile(
                      title: Text('CardForm Sample (CardDisplay)'),
                      subtitle: Text('Tap here to start card form.'),
                      onTap: () {
                        _onStartCardForm(formType: CardFormType.cardDisplay);
                      },
                    )),
                    material.Card(
                        child: ListTile(
                      title: Text('Start ApplePay Sample (iOS only)'),
                      subtitle: Text(_canUseApplePay
                          ? 'Sample payment with Apple Pay.'
                          : 'This device is not supported.'),
                      enabled: _canUseApplePay,
                      onTap: _onStartApplePay,
                    )),
                  ],
                ),
        ),
      );
}

#flutter #dart #mobile-apps #mobile 

A Flutter Plugin for PAY.JP Mobile SDK
1.10 GEEK