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

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

The Mobile Payment Element lets your users pay with many payment methods through a single integration. Use custom payment methods if you need to display additional payment methods that aren’t processed through Stripe. If you use custom payment methods, you can optionally record purchases processed outside of Stripe to your Stripe account for reporting purposes.

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Mobile Payment Element also displays. The Stripe Dashboard also provides access to over 50 preset custom payment methods. After you create the payment method, follow the guide below to configure the Mobile Payment Element. Setting up the Mobile Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

注

When integrating with a third party payment processor, you’re responsible for complying with applicable legal requirements, including your agreement with your PSP, applicable laws, and so on.

はじめに

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

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

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

適切なロゴを選択

If you provide a logo with a transparent background, consider the background color of the Payment Element on your page and make sure that it displays clearly.
If you provide a logo with a background fill, provide rounded corners in your file because we won’t provide them.
Choose a logo variant that can scale down to 16 pixels × 16 pixels. This is often the standalone logo mark for a brand.

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

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

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

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

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

請求詳細を収集する

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

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

実装内容をテストする

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

注