# Payment Element

決済手段をアプリに直接埋め込みます。

Payment Element は、カスタマイズ可能なドロップインコンポーネントであり、アプリの任意の画面に [決済手段のリストを埋め込みます](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md)。顧客が決済手段をリストから選択すると、その下のシートに決済の詳細が収集されます。アプリのデザインに合わせてカスタマイズできます。アプリ内 Payment Element は、[iOS](https://github.com/stripe/stripe-ios)、[Android](https://github.com/stripe/stripe-android)、および [React Native](https://github.com/stripe/stripe-react-native) SDK で利用できます。始めるには、[アプリ内決済の受け付け](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md) ガイドをご覧ください。

> #### アメリカのアプリによるデジタル商品の販売
> 
> アメリカのデジタル商品を販売する Android アプリでは、を使用してアプリ内で支払いを処理できるようになりました。iOS でデジタル商品を販売する場合は、[アプリ内デジタル商品およびサブスクリプションの販売](https://docs.stripe.com/mobile/digital-goods/checkout.md) で Stripe Checkout を使用してアプリからウェブへのフローを実装する方法をご覧ください。
![Payment Element 導入例](https://b.stripecdn.com/docs-statics-srv/assets/mobile-payment-element.de700c536720f40087a00fde4b958b9a.png)

Payment Element 導入例

Payment Element を使用すると、以下を実現できます：

- [世界の 100 以上の決済手段へのアクセス](https://docs.stripe.com/payments/payment-methods/overview.md): Apple Pay、Link、その他の一般的な決済手段が自動的に有効になります。

- [動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md): 決済手段を動的に並べ替え、表示し、新しい決済手段の [A/B テストを開始](https://docs.stripe.com/payments/a-b-testing.md)します。

- [アプリに合わせた UI カスタマイズ](https://docs.stripe.com/elements/appearance-api/mobile.md): UI をアプリのデザインに合わせましょう。レイアウトは一貫したまま、色やフォントなどを変更できます。

- [住所収集](https://docs.stripe.com/payments/mobile/save-during-payment.md?platform=ios&mobile-ui=payment-element#collect-payment-details): あらゆる決済手段で請求先住所の全部または一部を収集します。

- [保存された決済手段](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios&type=payment#enable-saved-cards): カードと銀行口座を保存、再利用、管理します。[初回の決済なしで顧客の決済詳細を保存](https://docs.stripe.com/payments/mobile/set-up-future-payments.md)することもできます。

## Stripe In-app Elements デモ

この QR コードをスキャンするか、こちらの [リンク](https://apps.apple.com/us/app/stripe-payments-showcase/id6450683352)から、Stripe の In-app Elements を紹介するインタラクティブなデモアプリをダウンロードしてください。アプリ内では、さまざまな UI 仕様を生成し、ご自身のユースケースに最適なものを確認できます。
![Stripe In-app Payments ショーケース（App Store QR コード）](https://b.stripecdn.com/docs-statics-srv/assets/appstore_qr.ce33264690ffb3cebb2982458ccb496d.svg)

## レイアウト

ラジオレイアウト、チェックマークレイアウト、フローティングボタンから選択します。
![Payment Element レイアウトオプション](https://b.stripecdn.com/docs-statics-srv/assets/pe-layout.f6c429b6dfdf24d2fa144725d8435a22.png)

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

## デザイン

Appearance API を使用して、アプリに合わせて Payment Element のデザインをカスタマイズします。Appearance API を使用すると、フォント、色、境界線、影などを制御できます。
![Payment Element 外観のカスタマイズ](https://b.stripecdn.com/docs-statics-srv/assets/pe-appearance.0c2a1c5208103bcfb92b67b10dd9fb2f.png)

Payment Element のさまざまなスタイルの例

## 決済手段

Payment Element は、Stripe がサポートするすべての国の 100 種類以上の決済手段にアクセスできます。決済手段は、Stripe ダッシュボードまたは [カスタム決済手段](https://docs.stripe.com/payments/payment-methods/custom-payment-methods.md)を使用して有効にできます。

決済手段の提供業者は、多くの場合、回収と表示の要件を変更します。Payment Element を使用して決済手段を表示すると、Stripe は、各決済代行業者に最新の状態に維持されている、事前構築されたローカライズされた形式で、すべての決済詳細の回収を処理します。
![Payment Element 決済手段](https://b.stripecdn.com/docs-statics-srv/assets/pe-payment-methods.91cb1be9cb8ef55b873074dd6f3a7c12.png)

Payment Element の P24 および SEPA デビットの例

## ウォレット

Payment Element は、Apple Pay や Stripe が構築したウォレットである Link など、一般的なウォレットをサポートしています。Payment Element は、決済手段のオプションとしてウォレットをインラインで表示します。
![Payment Element ウォレット](https://b.stripecdn.com/docs-statics-srv/assets/pe-wallets.fed1c5ad5fbb89d74be25e02d291e25c.png)

Payment Element での Link の例

## 保存済みの決済手段

Payment Element は、保存された決済手段の保存、表示、管理をサポートします。同意回収は自動的に処理され、グローバルな法令遵守が保証されます。

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

CustomerSessions API は、以下をさらに制御します。

- 保存同意ボックスを表示または非表示にするタイミング
- 保存された決済手段を表示または非表示にするタイミング
- 買い手が保存決済手段を削除できるようにする
- 買い手が最後に保存した決済手段を削除できないようにする
![Payment Element 保存決済手段](https://b.stripecdn.com/docs-statics-srv/assets/pe-saved-payment-methods.6aef147c8b230f2cb50c115b2054f814.png)

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

## 住所の詳細を収集する

顧客が使用する決済手段に関係なく、名前、メールアドレス、電話番号、請求先住所などの追加の決済情報を収集するように Payment Element を設定できます。
![Payment Element アドレス収集](https://b.stripecdn.com/docs-statics-srv/assets/pe-collecting-address-details.f806ddc435848cdf38470fb4e5adb15b.png)

請求の全詳細の収集例

## その他の機能

Payment Element には次の機能も含まれます：

- セキュリティコードの再収集: ユーザーが保存された決済手段で支払うときにセキュリティコードの再収集が必要かどうかを設定します。
- [カードブランドのフィルター処理](https://docs.stripe.com/payments/mobile/filter-card-brands.md): 受け入れるカードブランドを構成します。
