カスタムの決済手段を追加する公開プレビュー

Mobile Payment Element にカスタムの決済手段を追加します。

In-app Payments を使用すると、ユーザーは一度の導入で多くの支払い方法で支払うことができます。Stripe で処理されない追加の支払い方法を表示する必要がある場合は、カスタムの支払い方法を使用します。カスタムの支払い方法を使用する場合は、Stripe 以外で処理された購入をオプションで Stripe アカウントに記録して、レポートを作成することもできます。

カスタム支払い方法を設定するには、Stripe ダッシュボードで支払い方法を作成し、In-app Payments でも表示する表示名とアイコンを指定します。Stripe ダッシュボードでは、50 種類を超える事前設定されたカスタム支払い方法にアクセスすることもできます。支払い方法を作成したら、以下のガイドに従って In-app Payments を設定します。カスタム支払い方法の取引は Stripe の外部で処理され確定されるため、In-app Payments を設定するには、追加の設定作業が必要になります。

注

サードパーティーの決済代行業者と連携する場合、PSP との取り決めや適用法など、法的要件に準拠する責任を負います。

はじめに

Stripe アカウントを作成するか、サインインしてください。
Payment Sheet のサンプルに従って、決済システムの構築を完了します。

ダッシュボードでカスタムの決済手段を作成する
ダッシュボード

設定 > Payments > Custom の決済手段に移動して、カスタムの決済手段のページにアクセスします。新しいカスタムの決済手段を作成し、Payment Element が表示する表示名とロゴを指定します。

適切なロゴを選択

透明な背景のロゴを提供する場合は、ページの Payment Element の背景色を考慮して、ロゴがはっきりと表示されることを確認してください。
背景色が入ったロゴを指定する場合、丸い角は提供されないため、ファイルに含めるようにしてください。
16 ピクセル× 16 ピクセルに拡大縮小できるロゴのバリアントを選択します。多くの場合、これはブランドのスタンドアロンのロゴマークです。

カスタムの決済手段を作成すると、ステップ 2 で必要なカスタムの決済手段の ID (cpmt_ で始まる) がダッシュボードに表示されます。

カスタム決済手段タイプを追加する

PaymentSheet.Configuration オブジェクトを作成して PaymentSheet を初期化するときに、Mobile Payment Element に追加するカスタムの決済手段と、決済を完了するためのハンドラを指定します。

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

class MyCheckoutVC: UIViewController {
  func setUpPaymentSheet() {
      // ...
      var configuration = PaymentSheet.Configuration()
      let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                            subtitle: "Optional subtitle")
      configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                             customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
      // ...
  }

  func handleCustomPaymentMethod(
        _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> PaymentSheetResult {
      // ...explained in the next step
  }
}

支払いを完了する

顧客がカスタムの決済手段を使用して PaymentSheet の購入ボタンをタップすると、カスタムの決済手段を持つハンドラが呼び出され、収集した請求情報が使用されます。

システムが (たとえば、カスタム決済手段のプロバイダーの SDK を使用して) 支払いを完了すると、支払いの結果 (completed、canceled、failure(error:)) を関数から返します。

.failure(error:) を渡すと、PaymentSheet は Swift エラーには errorDescription を、NSErrors には localizedDescription を使用してエラーを表示します。

import StripePaymentSheet

class MyCheckoutVC: UIViewController {
    func setUpPaymentSheet() {
        // ...
        var configuration = PaymentSheet.Configuration()
        let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                              subtitle: "Optional subtitle")
        configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                              customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
        // ...
    }

    func handleCustomPaymentMethod(
          _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
          _ billingDetails: STPPaymentMethodBillingDetails
     ) async -> PaymentSheetResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // Note you can present on top of PaymentSheet by using the `self.presentedViewController`.
        // This example code just immediately fails:
        let exampleError = NSError(domain: "MyErrorDomain", code: 0, userInfo: [NSLocalizedDescriptionKey: "Failed to complete payment!"])
        return .failed(error: exampleError)
    }
}

オプションカスタムの決済手段の順序を指定

Stripe はカスタムの決済手段に関する情報を持たないため、Stripe のスマート注文ロジックが決済手段をランク付けすることはありません。デフォルトでは、Stripe がサポートしている決済手段の後に表示されます。PaymentSheet.Configuration.paymentMethodOrder を設定して、Mobile Payment Element にカスタムの決済手段を配置することが可能です。そのカスタム決済手段の後に続く Stripe がサポートしている決済手段は、引き続きインテリジェントにランク付けされます。

var configuration = PaymentSheet.Configuration()
// Show cards first, followed by cpmt_, followed by all other payment methods
configuration.paymentMethodOrder = ["card", "cpmt_..."]

請求詳細を収集する

Payment Sheet 設定の billingDetailsCollectionConfiguration で、請求情報を収集できます。カスタムの決済手段は、デフォルトでは請求情報は収集されません。請求情報の収集を有効にするには、CustomPaymentMethod で disableBillingDetailCollection を false に設定します。

var customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                      subtitle: "Optional subtitle")
customPaymentMethod.disableBillingDetailCollection = false

実装内容をテストする

決済フローを実行し、Mobile Payment Element にカスタムの決済方法が表示されていることを確認します。この例では、カードの後の 2 番目の位置にカスタムの決済手段を設定しています。
カスタムの決済手段を選択します。
今すぐ支払うをクリックして、カスタムの決済手段の実装をテストします。システムが取引を完了し、支払い後のアクション (確認ページ、成功 / 失敗メッセージの表示など) がカスタムの決済手段で機能していることを確認します。

注