Mobile Payment Element

Mobile Payment Element は、モバイルアプリで決済フローを構築するための UI コンポーネントです。iOS、Android、および React Native SDK を使用して、この UI を使ったビルドを開始します。Elements のスタイルは、いずれもアプリのデザインに合わせて設定できます。

Mobile Payment Element を使用すると、次のメリットが得られます。

• 100 を超えるグローバルな決済手段の利用: Apple Pay、Link、その他の一般的な決済手段が自動で有効化されます。
• 動的な決済手段: 決済手段を動的に並べ替えて表示することで決済手段の編成が簡単になります。また新しい決済手段の A/B テストを開始することも可能です。
• アプリに合わせた UI カスタマイズ: UI をアプリのデザインに合わせられます。レイアウトは統一されますが、色やフォントなどは変更可能です。
• 住所の収集: 任意の決済手段で請求先住所の全部または一部を収集することが可能です。
• カードと銀行口座の保存と表示: カードと銀行口座の情報を保存、再利用、管理します。また、初回の支払いなしで顧客の支払い情報を保存することもできます。

導入オプション

Mobile Payment Element には、主に 2 つの導入オプションがあります。

• Payment Sheet: アプリ内の任意の場所に埋め込むことができる事前構築済みのシート。シートには、決済手段のリスト、Express Pay ボタン、確認ボタンがあります。
• Embedded Element: アプリの任意の画面に決済手段のリストを埋め込む、カスタマイズ可能なドロップインコンポーネントです。リストから決済手段を選択すると、下部のシートに決済の詳細が収集されます。

Payment Sheet と Embedded Element の実装の比較。

レイアウト

Payment Sheet を使用する場合は、Stripe のレイアウトを .automatic に設定して、その決済手段に合った適切なレイアウトが提供されるようにします。また、.vertical や horizontal のレイアウトを選択することもできます。

Embedded Element を使用する場合は、ラジオレイアウト、チェックマークレイアウト、または選択したストロークのフローティングボタンから選択します。

Payment Sheet は、水平、カルーセル、垂直の各モードで使用できます。

Embedded Element は、ラジオボタン、チェックマーク、フローティングボタンレイアウトをサポートしています。

デザイン

Appearance API を使用して、Mobile Payment Element のデザインを貴社のアプリに合わせてカスタマイズします。Appearance API を使用すると、フォント、色、枠線、シャドウなどを制御できます。

Payment Sheet は、水平、カルーセル、垂直の各モードのカスタムスタイルをサポートしています。

Embedded Element は、ラジオボタンとフローティングボタンレイアウトのカスタムスタイルをサポートしています。

決済手段

Mobile Payment Element では、Stripe が対応しているすべての国の 100 種類以上の決済手段を利用できます。Stripe ダッシュボードから、または各種決済手段との連携機能を使用して決済手段を有効にすることができます。

決済手段の提供業者は、収集と表示の要件を頻繁に変更します。Mobile Payment Element を使用して決済手段を表示している場合、Stripe はそれぞれの決済手段の提供業者が規定した最新の要件に準拠している、地域に合わせた事前構築済みのフォームを用意して、すべての支払い情報の収集を処理します。

Payment Sheet は、カードフォームと Klarna フォームの例となっています。Embedded Element は、P24 デビットと SEPA デビットの使用例となっています。

ウォレット

Mobile Payment Element は、Apple Pay や Link (Stripe 開発のウォレット) など、主要なウォレットに対応しています。

• Payment Sheet では、エクスプレスボタンを使用してウォレットを表示できます。
• Embedded Element は、決済手段のオプションとしてウォレットをインラインで表示します。

Payment Sheet は、Apple Pay のネイティブサポートの良い例となっています。Embedded Element は、Link のネイティブサポートの良い例となっています。

保存済みの決済手段

Mobile Payment Element には、保存済み決済手段の保存、表示、管理をサポートする機能が構築されています。同意の状態は自動的に処理され、世界各国の法令を確実に遵守するようにします。

保存済みの決済手段は、カード、アメリカの銀行口座、SEPA デビット口座に対応しています。

CustomerSessions API は、さらに次の設定を制御します。

• 保存の同意ボックスを表示または非表示にするケース
• 保存した決済手段を表示または非表示にするケース
• 購入者が保存した決済手段を削除できるようにする
• 購入者が最後に保存した決済手段を削除できないようにする

Payment Sheet と Embedded Element で保存された決済手段に、顧客がアクセスする方法の例です。

住所の詳細を収集する

使用されている決済手段に関係なく、名前、メールアドレス、電話番号、請求先住所などの追加の支払い情報を収集するように Mobile Payment Element を設定できます。

Payment Sheet には、請求の詳細が有効になっているカードフォームが表示されます。Embedded Element には、請求の詳細が有効になっている P24 フォームが表示されます。

追加機能

Mobile Payment Element には、次のような追加機能が含まれています。

• セキュリティコードの再収集: ユーザーが保存された決済手段で支払うときにセキュリティコードの再収集が必要かどうかを設定します。
• カードブランドの絞り込み: 受け付けるカードブランドを設定します。