Flutterでの利用

Flutterを利用したモバイルアプリケーションでPAY.JPを利用する場合は、 PAY.JP SDK Flutterプラグイン をご利用ください。 これはPAY.JP Mobile SDKをFlutterアプリケーションから呼び出すためのプラグインで、以下の機能が利用できます。

• カードフォームを利用したトークン作成
• Apple Payのアプリ内決済

ライブラリの追加

プロジェクトの pubspec.yaml を編集してライブラリを利用できるようにします。以下のように dependencies のセクションに payjp_flutter を追加します。

dependencies:
  flutter:
    sdk: flutter
  payjp_flutter:

SDKの初期化

はじめに、SDK全体の初期設定をします。PAY.JPダッシュボードのAPIページから取得した公開鍵をセットします。

以下のサンプルコードではテスト公開鍵を利用しています。

Future<void> _initPayjp() async {
  await Payjp.init(publicKey: 'pk_test_0383a1b8f91e8a6e3ea0e2a9');
}

クレジットカード決済のためのカードフォームを利用する

ここでは、Flutterアプリケーションからカードフォームを呼び出し、カード情報から支払いなどに必要なトークンを作成する方法を説明します。（トークン化することでカード情報を直接扱うことなく安全に支払い処理を行うことができます。）

カードフォームイメージ

iOS	Android

iOSの事前準備

カードフォームでは、クレジットカードをカメラで読み取る機能を提供しています。 この機能はデバイスのカメラを利用するため、iOSアプリの場合なぜ必要なのかをユーザーに明示する必要があります（Androidではこの設定は必要ありません）。

XcodeでiOSのプロジェクト（ Runner.xcodeproj ）を開きます。

Info.plist に NSCameraUsageDescription というキーで説明を追加します。

これでユーザーがアプリで初めてカメラを利用する際に、ここで設定した文言が表示されるようになります。

カードフォームを呼び出す

カードフォームを呼び出す処理を記述します。

void _onStartCardForm() async {
  await Payjp.startCardForm(cardFormType: CardFormType.cardDisplay);
}

カードフォームは2種類の表示タイプを CardFormType によって指定することができます。何も指定しない場合は multiLine が適用されます。

CardFormType	iOS（CardFormViewType）	Android（CardFormFace）
multiLine	.labelStyled	FACE_MULTI_LINE
cardDisplay	.displayStyled	FACE_CARD_DISPLAY

表示タイプについては iOS SDKの導入ガイド、Android SDKの導入ガイド をご確認ください。

生成されたトークンをサーバに送信する

ユーザーが入力を完了すると、カード情報からトークンが生成されます。 このトークンをつかって支払いを作成したり顧客を作成したりといった処理を行います。

トークンをサーバーに送信するため、 Payjp.startCardForm() の引数に onCardFormProducedTokenCallback を追加します。

void _onStartCardForm() async {
  await Payjp.startCardForm(
    onCardFormProducedTokenCallback: _onCardFormProducedToken,
  );
}

FutureOr<CallbackResult> _onCardFormProducedToken(Token token) async {
  try {
    // ここでトークンを送信する
    await sendTokenToServer(token);
  } on ApiException catch (e) {
    // エラーの場合
    return CallbackResultError(e.message);
  }
  // 成功
  return CallbackResultOk();
}

onCardFormProducedTokenCallback は生成されたトークンを引数にとり、コールバックの実行結果を非同期で返す関数です。

トークンの送信に成功した場合 CallbackResultOk を返すことでカードフォームは完了します。

もし、なんらかの問題（例えば通信エラーなど）によってトークンの送信に失敗した場合は、 CallbackResultError(message) を返すとカードフォームは CallbackResultError の引数のメッセージをエラーメッセージとして表示します。

カードフォームのキャンセルや完了をコールバックで受け取る

ユーザーがカードフォームをキャンセルしたときの処理を実装するには、 Payjp.startCardForm() の引数に onCardFormCanceledCallback を追加します。 また同様に、カードフォームを完了したときの処理を実装するには、 onCardFormCompletedCallback を追加します。

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

void _onCardFormCanceled() {
  // ユーザーがカードフォームをキャンセル
}

void _onCardFormCompleted() {
  // カードフォームを完了
  showAlertDialog(
      context: HomeScreen.scaffoldKey.currentContext,
      title: 'カード登録',
      message: 'カードを登録しました。');
}

カードフォームの見た目を変更する

iOS

iOSで、カードフォームのスタイルを変更するには Payjp.setIOSCardFormStyle(color) を呼び出します。 Colorを設定することで各コンポーネントの色を変更することができます。

if (Platform.isIOS) {
  await Payjp.setIOSCardFormStyle(
    labelTextColor: Colors.black87,
    inputTextColor: Colors.blue[700],
    errorTextColor: Colors.red,
    submitButtonColor: Colors.blue[800],
  );
}

スタイル属性と反映されるコンポーネントの対応についてはiOS SDKの導入ガイドをご確認ください。

Android

Androidでは、カードフォームのスタイルはThemeによってコントロールされています。カードフォームが参照するThemeを上書きすることでカスタマイズできます。

カードフォームの色を変更する場合はまず、android/app/src/main/res/values/colors.xml に使用するカラーの宣言を追加します。カラーの指定についてはAndroidの公式リファレンスもあわせてご確認ください。

<resources>
    <color name="primaryColor">#ff5252</color>
    <color name="primaryLightColor">#ff867f</color>
    <color name="primaryDarkColor">#c50e29</color>
    <color name="secondaryColor">#ffc400</color>
    <color name="secondaryLightColor">#fff64f</color>
    <color name="secondaryDarkColor">#c79400</color>
    <color name="primaryTextColor">#424242</color>
    <color name="secondaryTextColor">#37474f</color>
</resources>

その他のリソースタイプ  |  Android デベロッパー  |  Android Developers

次に、android/app/src/main/res/values/styles.xml でカードフォームのThemeを上書きする宣言を追加します。先に追加したカラーはここで参照します。

<resources>
    <!-- 省略 -->

    <!-- 以下を追加 -->
    <style name="Payjp.Theme.CardForm" parent="Payjp.Theme.BaseCardForm">
        <!-- 例 -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorSecondary">@color/secondaryColor</item>
    </style>
</resources>

スタイル属性と反映されるコンポーネントの対応についてはAndroid SDKの導入ガイドをご確認ください。

Apple Payのアプリ内決済に利用する

Apple Payをアプリに組み込むにあたって、はじめにApple Pay の利用の準備をご確認ください。

また、ボタンの表示やUIについてAppleのガイドラインを必ずご確認ください。

Introduction - Apple Pay - Human Interface Guidelines - Apple Developer

ここではSDKの初期設定をしたあとに、Apple Payを利用して支払いに必要なトークンを作成する処理の実装手順について説明します。

Apple Payが利用可能かチェックする

実際にApple Payのペイメントシートをリクエストする前に、端末がApple Payを利用可能な状況かどうかを確認します。端末がApple Payをサポートしていない、ペアレンタルコントロールによって制限されているなどの場合、 Payjp.isApplePayAvailable() は非同期でfalseを返します。

Future<void> _initPayjp() async {
  await Payjp.init(publicKey: payjpPublicKey, debugEnabled: true);
  var isApplePayAvailable = false;
  if (Platform.isIOS) {
    isApplePayAvailable = await Payjp.isApplePayAvailable();
  }
}

Apple Payのペイメントシートを表示する

商品の名称など支払いに必要な情報を渡してペイメントシートをリクエストします。 appleMerchantID にはXcodeの設定で有効化したマーチャントIDを設定してください。

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

生成されたトークンをサーバに送信する

ユーザーがカード情報などを決定し支払いを承認すると、Apple PayのペイメントトークンからPAY.JPのトークンが生成されます。 PAY.JPのトークンは事業者さまのサーバーにて支払い処理に利用できます。サーバーに送信するために Payjp.makeApplePayToken の引数に onApplePayProducedTokenCallback を追加します。

注: iOSシミュレータで実行時にはペイメントトークンは空の値になりますので、実機で実行してください。

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

FutureOr<CallbackResult> _onApplePayProducedToken(Token token) async {
  try {
    // ここでトークンを送信する
    await sendTokenToServer(token);
  } on ApiException catch (e) {
    // エラーの場合
    return CallbackResultError(e.message);
  }
  // 成功
  return CallbackResultOk();
}

Payjp.startCardForm() の onCardFormProducedTokenCallback 同様、 onApplePayProducedTokenCallback は生成されたトークンを引数にとり、コールバックの実行結果を非同期で返す関数です。

トークンの送信処理に成功した場合は CallbackResultOk を、失敗した場合は CallbackResultError(message) を返すように実行します。

エラーなどをコールバックで受け取る

ユーザーの操作によってApple Payのエラーが発生したときの処理を実装するには、 onApplePayFailedRequestTokenCallback を追加します。 Apple Payによる支払いが完了したときの処理を実装するには、 onApplePayCompletedCallback を追加します。

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,
  );
}

FutureOr<CallbackResultError> _onApplePayFailedRequestToken(
    ErrorInfo errorInfo) async {
  // エラー情報を受け取ってエラーメッセージを返す
  return CallbackResultError(errorInfo.errorMessage);
}

void _onApplePayCompleted() {
  // Apple Payが完了
}

ソースコード・サンプルコード

ソースコード・サンプルアプリケーションはGitHub上で公開されています。 パッケージ情報ページでは、APIリファレンスも参照できます。

• パッケージ情報 https://pub.dev/packages/payjp_flutter
• GitHubレポジトリ https://github.com/payjp/payjp-flutter-plugin