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

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

Mobile Payment Element を使用すると、ユーザーは一度の導入でさまざまな決済手段による支払いを利用できるようになります。Stripe で処理されない追加の決済手段を表示する必要がある場合は、カスタムの決済手段を使用します。カスタムの決済手段を使用している場合は、必要に応じて、Stripe 以外で処理された購入を Stripe アカウントに記録して、レポート作成に利用できます。

カスタムの決済手段を設定するには、Stripe ダッシュボードで決済手段を作成し、Mobile Payment Element にも表示される表示名とアイコンを指定します。Stripe ダッシュボードでは、50 種類以上あるプリセットの決済手段を利用できます。決済手段を作成したら、以下のガイドに従って Mobile Payment Element を設定します。カスタムの決済手段の取引は Stripe の外部で処理および確定されるため、Mobile Payment Element を設定するには、追加作業が必要になります。

注

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

はじめに

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

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

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

適切なロゴを選択

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

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

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

EmbeddedPaymentElement.Configuration オブジェクトを作成して EmbeddedPaymentElement を初期化するときに、Embedded 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)
    }
}

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

請求詳細を収集する

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

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

実装内容をテストする

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