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

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

In-app Payments let 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 In-app Payments also display. 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 In-app Payments. Setting up the In-app Payments requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

注

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

はじめに

Stripe アカウントを作成するか、サインインしてください。
アプリ内決済受け付けガイドに従って、決済システムの構築を完了します。

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

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

適切なロゴを選択

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

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

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

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

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

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

支払いを完了する

EmbeddedPaymentElement インスタンスで confirm を呼び出し、顧客がカスタムの決済手段を選択すると、カスタムの決済手段を持つハンドラが呼び出され、シートで収集された請求情報が使用されます。

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

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

    func handleCustomPaymentMethod(
        _ customPaymentMethodType: EmbeddedPaymentElement.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> EmbeddedPaymentElementResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // 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 がサポートしている決済手段の後に表示されます。Mobile Payment Element にカスタムの決済手段を配置するには、EmbeddedPaymentElement.Configuration.paymentMethodOrder を設定します。そのカスタム決済手段の後に続く Stripe がサポートしている決済手段は、引き続きインテリジェントにランク付けされます。

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

請求詳細を収集する

請求詳細は、Payment Element 設定で billingDetailsCollectionConfiguration を使用して収集することができます。ただし、カスタム決済手段はデフォルトでは請求詳細を収集しません。請求詳細の収集を有効にするには、CustomPaymentMethod で disableBillingDetailCollection を false に設定します。

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

実装内容をテストする

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

注