adyen web
6.5.1
Adyen Web は、買い物客のチェックアウト エクスペリエンスを作成するための構成要素を提供し、買い物客が選択した支払い方法を使用して支払いを行えるようにします。
次の 2 つの方法で Adyen Web と統合できます。
| メジャーバージョン | 州 | 廃止されました | 耐用年数の終了 |
|---|---|---|---|
| 6.xx | アクティブ | --- | --- |
| 5.xx | 非アクティブ | 未定 | 未定 |
| 4.xx | 非アクティブ | 未定 | 未定 |
| 3.xx | 廃止されました | 2024年10月 | 2025年10月 |
バージョン管理とドロップイン/コンポーネントのライフサイクルの詳細については、こちらをご覧ください。
これらのインストール方法のいずれかを使用する場合にのみ、完全なサポートが提供されます。
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script>タグの使用Web コンポーネント統合ガイドに示されているように、 <script>タグを使用して Adyen Web をインポートすることもできます。
要件：
環境を実行するには:
env.defaultの例に従ってプロジェクトのルート フォルダーに.envファイルを作成し、環境変数を入力します。yarn installyarn buildyarn start多くの言語の UI ローカリゼーションが含まれています。ここで言語とそれぞれの翻訳を確認できます。さらに、必要に応じて、現在の翻訳をカスタマイズしてデフォルトのテキストを独自のテキストに置き換えることもできます。
Adyen Web はテーマに対応しており、希望のスタイルを実現するためにオーバーライドできる CSS 変数を利用します。
iframe 内にない要素の場合は、CSS ファイルでこれらのスタイルをオーバーライドすることでスタイルをカスタマイズできます。ほとんどのスタイルは、デフォルト値を持つ CSS 変数で定義されています。これらのスタイルをオーバーライドするには、DOM を検査し、ルート レベルで、または特定の要素をターゲットにして CSS 変数の値を変更します。ルート レベルで CSS 変数の値を変更すると、同じ CSS 変数を使用しているすべての子要素のスタイルも変更されることに注意してください。
スタイルを設定する変数を含むoverride.cssを作成します。
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
}ライブラリのメイン CSS をインポートした後、必ずoverride.cssインポートしてください。
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | CSS変数 | デフォルト値 | 範囲 |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - フォームの指示、フォームフィールドのラベル、コンテキスト/ヘルパーテキストなど、支払いフォーム内のラベルの色。 - フィールドセットのタイトルの色 - 入力フィールドの文字色 - ドロップイン支払い方法ヘッダー、注文支払い方法ヘッダー、デフォルトのステータス テキストの色。 - バックス編集ボタンのテキストの色 - 銀行振込、バウチャー、Blik の紹介テキストの色 - 寄付ステータスの文字色、キャンペーンの背景色 - UPI、ANCV、Blik、MBWay 待機コンテナのテキストの色 - セカンダリ、ゴーストボタンのテキストの色 - (同意) チェックボックスのラベルの色 |
--adyen-sdk-color-label-secondary | #5c687c | - ドロップイン支払い方法ヘッダーの追加情報のラベルの色。 - 免責事項ラベルの色。 - QRカウントダウンラベルの色。 - 読み取り専用の色を選択して入力します。 |
--adyen-sdk-color-label-tertiary | #8d95a3 | - クリック支払いラベルのラベルの色。 |
--adyen-sdk-color-label-disabled | #8d95a3 | - 無効になっている Click to Pay ログアウト ボタンのラベルの色。 - 無効なセグメント。 - 読み込み状態の支払いボタンの背景色。 |
--adyen-sdk-color-label-critical | #e22d2d | - エラー入力フィールドとエラー検証メッセージの境界線の色。 |
--adyen-sdk-color-label-highlight | #0070f5 | - リンクボタンの色。 |
--adyen-sdk-color-label-on-color | #ffffff | - ボタンのテキストの色。 - 寄付キャンペーンの説明のテキストの色。 - チェックボックスのチェック色。 |
--adyen-sdk-color-background-primary | #ffffff | - 二次支払いボタンの背景色。 - 支払いフォーム要素の背景色: 入力要素、ラジオ、選択、チェックボックス。 - ドロップインの選択されていない支払い項目の背景色。 |
--adyen-sdk-color-background-secondary | #f7f7f8 | - ドロップインで選択した支払い方法項目の背景色。 - ボタン グループ内の選択したボタンの背景色 (Donation コンポーネントで使用)。 |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - ゴースト ボタン ホバーの背景色。 |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - アクティブなゴースト ボタンの背景色。 |
--adyen-sdk-color-background-tertiary | #eeeff1 | - UPI によって使用されるセグメント化されたコントロールの背景色。 |
--adyen-sdk-color-background-disabled | #eeeff1 | - 無効化されたフォーム要素の背景色。 |
--adyen-sdk-color-background-critical-strong | #e22d2d | - 保存された支払い方法のドロップイン削除確認ボタンの背景色。 |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - 支払いボタンにホバーしたときの背景色。 |
--adyen-sdk-color-background-always-dark | #00112c | - 主要な支払いボタンの背景色。 |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - アクティブでホバーされた主要な支払いボタンの背景色。 |
--adyen-sdk-color-background-critical-strong | #e22d2d | - 保存されたカードのドロップイン削除確認、ボタンの背景色 - ギフトカードアラートの背景色 |
--adyen-sdk-color-outline-primary | #dbdee2 | - ドロップイン支払い方法リスト項目の選択されていない境界線の色。 - 強調表示された発行者ボタン ボックスの影の色。 - 支払いフォーム要素 (チェックボックスとラジオを含む) の境界線の色。 |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - ドロップイン支払い方法リスト項目のホバーと選択されていないボックスの影の色。 - ラジオとチェックボックスのホバーがボックスの影の色にフォーカスされていません。 |
--adyen-sdk-color-outline-primary-active | #00112c | - ボックスの影と境界線の色に焦点を当てたフォーム入力要素。 |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - 選択した支払い項目の境界線の色をドロップインします。 - ドロップインのデフォルト ステータス コンテナの境界線の色。 - UPI、ANCV、Blik、MBWay はコンテナーの境界線の色を待ちます。 - QR コードコンテナの境界線の色。 |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - ドロップイン注文の支払い枠の色、追加料金のテキストの色 - GIFカード残高の文字色 - UPI、ANCV、Blik、MBWay はカウントダウンのテキストの色を待ちます - ラジオ、チェックボックス ホバー ボックス - 影の色 - 有料/通常ボタンフォーカスボックス - シャドウカラー - コンテンツ区切りの色 |
--adyen-sdk-color-outline-disabled | #dbdee2 | - 二次ボタンが無効になった境界線の色 |
--adyen-sdk-color-outline-critical | #e22d2d | - ドロップダウンの無効なボタンの境界線の色 |
--adyen-sdk-color-separator-primary | #dbdee2 | - 入力、選択、チェックボックス、およびラジオフォームフィールドの境界線の色が無効です |
--adyen-sdk-text-caption-line-height | 18px | - 本文/サブタイトル/タイトル以外の色々な箇所 |
--adyen-sdk-text-caption-font-size | 12px | - ギフトカード警告メッセージのフォントサイズ - ドロップイン支払い方法リスト項目の追加情報テキストのフォントサイズ - 免責事項メッセージのテキストのフォントサイズ - フォームフィールドの指示、コンテキスト、エラーテキストのフォントサイズ |
--adyen-sdk-text-body-font-size | 14px | ・タイトル/サブタイトル/キャプション以外の色々な箇所 |
--adyen-sdk-text-body-line-height | 20px | - ラジオテキストの行の高さ - Payme指示行の高さ - クリックして支払いチェックボックスの情報行の高さ - フォームフィールドラベルの行の高さ |
--adyen-sdk-text-body-font-weight | 400 | - 保存されたカードの有効期限入力文字のフォントの太さ |
--adyen-sdk-text-body-stronger-font-weight | 500 | - 選択した発行者ボタンのテキストのフォントの太さ - ドロップイン支払い方法リストの項目タイトルのフォントの太さ - ドロップイン注文のヘッダーと控除額のフォントの太さ - 信頼できる説明のフォントの太さ - 支払いボタンのテキストのフォントウェイト - UPI セグメント化されたコントロール テキストのフォントの太さ |
--adyen-sdk-text-subtitle-font-size | 16px | - Blik ヘルパーのフォント サイズ - Trustly 説明ヘッダー - UPI、ANCV、Blik、MBWay は字幕とインジケーターのフォント サイズを待機します - QRサブタイトルとインジケーターのフォントサイズ - 入力、ドロップダウン入力フィールドのテキストのフォントサイズ - 伝票金額のフォントサイズ |
--adyen-sdk-text-subtitle-font-weight | 500 | - フィールドセットのタイトルのフォントウェイト |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - ドロップイン支払い方法リストのラベルのフォントの太さ |
--adyen-sdk-text-subtitle-line-height | 26px | - ドロップイン支払い方法リストのラベル行の高さ - フィールドセットのタイトル行の高さ |
--adyen-sdk-text-title-font-size | 16px | - ドロップインのデフォルトの最終ステータスのフォントサイズ - ドロップイン注文ヘッダーのフォントサイズ - ドロップイン支払い方法リストの項目タイトルのフォントサイズ - 支払いボタンのテキストのフォントサイズ - Directdebit_GB 伝票結果紹介のフォントサイズ - 寄付キャンペーンタイトルのフォントサイズ |
--adyen-sdk-text-title-font-weight | 600 | - クリックしてヘッダー タイトルのフォントの太さを支払います |
--adyen-sdk-text-title-line-height | 26px | - 保存されたカードの有効期限入力テキスト行の高さ |
--adyen-sdk-text-title-l-font-size | 24px | - バウチャー参照テキストのフォントサイズ |
--adyen-sdk-spacer-100 | 32px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-110 | 40px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-120 | 48px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-130 | 56px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-140 | 64px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-000 | 0px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-010 | 2px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-020 | 4px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-030 | 6px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-040 | 8px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-050 | 10px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-060 | 12px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-070 | 16px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-080 | 20px | 寸法のさまざまな場所 |
--adyen-sdk-spacer-090 | 24px | 寸法のさまざまな場所 |
--adyen-sdk-border-radius-xs | 2px | 境界半径のさまざまな場所 |
--adyen-sdk-border-radius-s | 4px | 境界半径のさまざまな場所 |
--adyen-sdk-border-radius-m | 8px | 境界半径のさまざまな場所 |
--adyen-sdk-border-radius-l | 12px | 境界半径のさまざまな場所 |
--adyen-sdk-border-radius-xl | 24px | 境界半径のさまざまな場所 |
--adyen-sdk-border-width-s | 1px | 境界半径のさまざまな場所 |
--adyen-sdk-border-width-m | 2px | 境界半径のさまざまな場所 |
--adyen-sdk-border-width-l | 3px | 境界半径のさまざまな場所 |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - カード利用可能なブランド イメージとバウチャー ブランド イメージのボックス シャドウ - 選択したセグメントのボックスシャドウ |
カード番号、CVC、カードの有効期限などのセキュリティで保護されたフィールドのスタイルを設定するには、「カード入力フィールドのスタイル設定」リンクをたどることができます。
v5.16.0 以降、ドロップインとコンポーネントの統合には、デフォルトで有効になる分析機能と追跡機能が含まれています。私たちが追跡するものとそれを制御する方法について詳しくご覧ください。
すべてのプル リクエストをmainブランチにマージします。私たちはmain良好な状態に保ち、必要なときにいつでも新しいバージョンをリリースできるようにすることを目指しています。
プル リクエストを発行する方法については、コントリビュート ガイドラインをご覧ください。
機能リクエストがある場合、またはバグや技術的な問題を発見した場合は、ここで問題を作成してください。
その他の質問については、サポート チームにお問い合わせください。
このリポジトリは、MIT ライセンスの下で利用できます。
