コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
売上
プラットフォームおよびマーケットプレイス
資金管理
開発者向けリソース
概要
Stripe Payments について
構築済みのシステムをアップグレード
支払いの分析
オンライン決済
概要ユースケースを見つけるManaged Payments
Payment Links を使用する
決済ページを構築
高度なシステムを構築
アプリ内実装を構築
    概要
    Payment Sheet
    Embedded Payment Element
      アプリ内での決済を受け付け
      デザインをカスタマイズする
      カスタムの支払い方法を追加する
      カードブランドを絞り込む
    アプリ内購入のリンク
    住所を収集
    アメリカとカナダのカード
決済手段
決済手段を追加
決済手段を管理
Link による購入の迅速化
支払いインターフェイス
Payment Links
Checkout
Web Elements
アプリ内 Elements
決済シナリオ
複数の通貨を扱う
カスタムの決済フロー
柔軟なアクワイアリング
オーケストレーション
店頭支払い
端末
決済にとどまらない機能
会社を設立する
仮想通貨
Financial Connections
Climate
ホーム支払いBuild an in-app integrationEmbedded Payment Element

デザインをカスタマイズする

Appearance API を使用してアプリ内統合をカスタマイズします。

Embedded Payment Element は視覚的なカスタマイズをサポートしているため、アプリのデザインに合わせてカスタマイズできます。レイアウトの一貫性は保たれますが、EmbeddedPaymentElement.Configuration オブジェクトの appearance プロパティを使用して、色やフォントなどを変更できます。

  1. フォントをカスタマイズする
  2. アプリに合わせてカラーをカスタマイズします。
  3. 角の半径などの形状をカスタマイズします。
  4. 特定のコンポーネントを微調整します。
  5. Embedded Payment Element のデザインをカスタマイズする
var configuration = EmbeddedPaymentElement.Configuration() // The following code creates the appearance shown in the screenshot above var appearance = PaymentSheet.Appearance() appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)! appearance.cornerRadius = 8 appearance.shadow = .disabled appearance.borderWidth = 0 appearance.selectedBorderWidth = 2 appearance.colors.background = UIColor(red: 23/255, green: 47/255, blue: 86/255, alpha: 1) appearance.colors.primary = UIColor(red: 199/255, green: 217/255, blue: 255/255, alpha: 1) appearance.colors.text = .white appearance.colors.textSecondary = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .7) appearance.colors.componentText = .white appearance.colors.componentPlaceholderText = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .5) appearance.colors.componentBorder = .clear appearance.colors.componentDivider = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: .1) appearance.colors.componentBackground = UIColor(red: 44/255, green: 73/255, blue: 119/255, alpha: 1) appearance.colors.icon = .white configuration.appearance = appearance let embeddedPaymentElement = try await EmbeddedPaymentElement.create(/* ... */, configuration: configuration)

フォント

font.base を、任意のサイズと太さのカスタムフォントのバリアントに設定し、フォントをカスタマイズします。Mobile Payment Element では、カスタムフォントのフォントファミリーが使用されますが、サイズと太さは自動的に決定されます。

すべてのテキストのサイズを拡大縮小するには、font.sizeScaleFactor を設定します。フォントサイズは、この値で乗算されてから表示されます。これは、カスタムフォントがシステムフォントよりも若干大きいか小さい場合に役立ちます。

var configuration = EmbeddedPaymentElement.Configuration() configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize) configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x

カラー

モバイルの Payment Element で、Appearance.Colors で定義されているカラーカテゴリーを変更することにより、色をカスタマイズします。各カラーカテゴリーは、UI の 1 つ以上のコンポーネントの色を決定します。たとえば、primary は、支払うボタンと、このカードを保存のチェックボックスといった選択された項目の色を定義します。下の図で、各カラーカテゴリーに関連付けられた UI エレメントをご覧いただけます。

注

ダークモードをサポートするには、init(dynamicProvider:) を使用してカスタムの UIColors を初期化します。

図形

フォントと色の他、Mobile Payment Element 全体で使用されている角の半径、境界線の幅、シャドウもカスタマイズできます。

特定の UI コンポーネント

上記のセクションでは、複数の UI コンポーネントにわたり Mobile Payment Element に広く影響を与えるカスタマイズオプションについて説明しています。また、1 次ボタン (たとえば、支払うボタン) 専用のカスタマイズオプションも提供しています。カスタマイズオプションの詳細なリストについては、Appearance.PrimaryButton をご覧ください。

一部の UI コンポーネントのカスタマイズオプションは、他の値よりも優先されます。たとえば、appearance.primaryButton.cornerRadius は、appearance.cornerRadius の値を上書きします。

注

より多くのカスタマイズオプションの提供が必要と思われる場合は、お知らせください。

Embedded Payment Element

Embedded Payment Element には、ラジオ付きフラット、チェックマーク付きフラット、フローティングボタンというスタイルが用意されています。各スタイルには、そのスタイルに対応する特定のオプションがあります。

ラジオ付きフラット

ラジオ付きフラットによってスタイル設定された Embedded Payment Element
var configuration = EmbeddedPaymentElement.Configuration() var appearance = PaymentSheet.Appearance.default appearance.embeddedPaymentElement.row.style = .flatWithRadio appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2 appearance.embeddedPaymentElement.row.flat.radio.selectedColor = .blue // Change color of radio button when selected to blue appearance.embeddedPaymentElement.row.flat.radio.unselectedColor = .darkGray // Change color of radio button when unselected to darkGray configuration.appearance = appearance

チェックマーク付きフラット

チェックマーク付きフラットによってスタイル設定された Embedded Payment Element
var configuration = EmbeddedPaymentElement.Configuration() var appearance = PaymentSheet.Appearance.default appearance.embeddedPaymentElement.row.style = .flatWithCheckmark appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height appearance.embeddedPaymentElement.row.flat.bottomSeparatorEnabled = false // Hide the bottom separator appearance.embeddedPaymentElement.row.flat.topSeparatorEnabled = false // Hide the top separator appearance.embeddedPaymentElement.row.flat.separatorColor = .gray // Change the separator color to gray appearance.embeddedPaymentElement.row.flat.separatorInsets = .zero // Make separators full width appearance.embeddedPaymentElement.row.flat.separatorThickness = 2.0 // Increase separator thickness to 2 appearance.embeddedPaymentElement.row.flat.checkmark.color = .blue // Change color of the checkmark configuration.appearance = appearance

フローティングボタン

フローティングボタンによってスタイル設定された Embedded Payment Element
var configuration = EmbeddedPaymentElement.Configuration() var appearance = PaymentSheet.Appearance.default appearance.embeddedPaymentElement.row.style = .floatingButton appearance.embeddedPaymentElement.row.floating.spacing = 20 // Increase spacing appearance.embeddedPaymentElement.row.additionalInsets = 10 // Increase row height configuration.appearance = appearance
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか?llms.txt を読んでください。
Powered by Markdoc