BNPL Messaging を表示する公開プレビュー

後払いオプションを自動的に説明します。

後払い決済オプションのプロモーションメッセージを表示するには、Payment Method Messaging Element を使用します。

Stripe をセットアップする
サーバー側クライアント側

まず、Stripe アカウントが必要です。今すぐ登録してください。

Stripe iOS SDK はオープンソースです。詳細なドキュメントが提供されており、iOS 13 以降をサポートするアプリと互換性があります。

SDK をインストールするには、以下のステップに従います。

Xcode で、File (ファイル) > Add Package Dependencies… (パッケージ依存関係を追加) を選択し、リポジトリー URL として https://github.com/stripe/stripe-ios-spm を入力します。
リリースページから最新のバージョン番号を選択します。
StripePaymentSheet 製品をアプリのターゲットに追加します。

メモ

SDK の最新リリースおよび過去バージョンの詳細については、GitHub の Releases (リリース) ページをご覧ください。リポジトリのリリースをウォッチして、新しいリリースの公開時に通知を受け取ることも可能です。

アプリの起動時に Stripe 公開可能キーを使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。

メモ

テストおよび開発時にはテストキーを使用し、アプリの公開時には本番環境キーを使用します。

Payment Method Messaging Element を初期化する

PaymentMethodMessagingElement.Configuration を指定して create を呼び出し、Payment Method Messaging Element をインスタンス化します。Configuration オブジェクトには、購入の可能性とその表示方法に関する詳細が含まれます。PaymentMethodMessagingElement が正常に初期化されたら、UI にビューを表示します。

@_spi(PaymentMethodMessagingElementPreview) import StripePaymentSheet

class MyViewController: UIViewController {

    private var amount = 1000 // $10.00
    private var currency = "USD"

    private var paymentMethodMessagingElementView: UIView?

    func addPaymentMethodMessagingElement() {
        Task { @MainActor in
            // Create configuration object
            let configuration = PaymentMethodMessagingElement.Configuration(
                amount: amount,
                currency: currency,
            )

            // Create PaymentMethodMessagingElement
            switch await PaymentMethodMessagingElement.create(configuration: configuration) {
            case .success(let element):
                let elementView = element.view
                self.view.addSubview(elementView)
                self.paymentMethodMessagingElementView = elementView
                // Set up constraints for elementView
                NSLayoutConstraint.activate([(
                    // ..
                )])
            case .noContent:
                // No element is available to display with this configuration
                // You may want to adapt your UI accordingly
                // ...
            case .failed(let error):
                // An unrecoverable error has occurred while attempting to load the element
                // You may want to log the error or take other action
                // ...
            }
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set up the remainder of your page
        // ...

        addPaymentMethodMessagingElement()
    }
}

オプションElement を更新する

顧客が設定を変更するアクション (別の商品バリアントを選択するなど) を実行する場合は、新しい情報を反映するために新しい PaymentMethodMessagingElement インスタンスを初期化します。

class MyViewController: UIViewController {

    // ...

    func updatePaymentMethodMessagingElement() {
        paymentMethodMessagingElementView?.removeFromSuperview()
        addPaymentMethodMessagingElement()
    }
}

オプション構成要素をカスタマイズする

カスタマイズオプションは、PaymentMethodMessagingElement.Configuration オブジェクトおよび PaymentMethodMessagingElement.Appearance オブジェクトで使用できます。

// Configure appearance
let appearance = PaymentMethodMessagingElement.Appearance(
    style: .flat,
    font: .boldSystemFont(ofSize: 12),
    textColor: .black,
    infoIconColor: .blue
)

// Create configuration object
let configuration = PaymentMethodMessagingElement.Configuration(
    amount: 1000, // $10.00
    currency: "USD",
    locale: "en_GB", // Defaults to device locale but can be explicitly set
    countryCode: "US", // Defaults to customer IP address but can be explicitly set
    paymentMethodTypes: [.affirm, .klarna], // Defaults to dynamic payment methods from the Dashboard, but can be explicitly set
    appearance: appearance
)

メモ