adyen web下載 - adyen web原始碼下載

adyen web

其他源碼

6.5.1

下載

阿迪恩網

Adyen Web 為您提供了為購物者創建結帳體驗的建立模組，讓他們可以使用自己選擇的付款方式進行付款。

您可以透過兩種方式與 Adyen Web 整合：

Web Drop-in：一體化解決方案，是在您的網站上接受付款的最快方式。
Web 元件：每種付款方式一個元件，並與您自己的付款表單邏輯結合。

先決條件

Adyen 測試帳戶
API金鑰
客戶端密鑰

插入式/組件生命週期

主要版本	狀態	已棄用	壽命終結
6.xx	積極的	---	---
5.xx	不活躍	待定	待定
4.xx	不活躍	待定	待定
3.xx	已棄用	2024 年 10 月	2025 年 10 月

有關我們的版本控制和 Drop-in/Components 生命週期的更多信息，請參閱此處

安裝

只有當您使用其中一種安裝方法時，我們才提供全面支援。

節點包管理器

安裝 Adyen Web 節點包：

npm install @adyen/adyen-web --save

將 Adyen Web 匯入您的應用程式：

 import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;

使用`<script>`標籤

您也可以使用<script>標籤匯入 Adyen Web，如 Web 元件整合指南所示。

運行開發環境

要求：

節點 v20.12.2
紗

運行環境：

克隆此存儲庫。
依照env.default中的範例在專案的根資料夾中建立一個.env文件，並填寫環境變數。
透過執行以下命令安裝依賴項：

yarn install

如果您是第一次執行該項目，請執行建置腳本

yarn build

運行開發環境，這會啟動一個監聽 http://localhost:3020 的伺服器：

yarn 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 變數以及預設值是多少？

CSS 變數	預設值	範圍
`--adyen-sdk-color-label-primary`	`#00112c`	- 付款表格內的標籤顏色，例如表格說明、表格欄位標籤和上下文/幫助文字。 - 字段集標題顏色 - 輸入欄位文字顏色 - 嵌入式付款方式標題、訂單付款方式標題、預設狀態文字顏色。 - Bacs編輯按鈕文字顏色 - 銀行轉帳、優惠券、Blik 的介紹文字顏色 - 捐贈狀態文字顏色、活動背景顏色 - UPI、ANCV、Blik、MBWay 等待容器文字顏色 - 輔助，幽靈按鈕文字顏色 -（同意）複選框標籤顏色
`--adyen-sdk-color-label-secondary`	`#5c687c`	- 直接付款方式標題中附加資訊的標籤顏色。 - 免責聲明標籤顏色。 - QR 倒數標籤顏色。 - 只讀選擇和輸入顏色。
`--adyen-sdk-color-label-tertiary`	`#8d95a3`	- 點選支付標籤的標籤顏色。
`--adyen-sdk-color-label-disabled`	`#8d95a3`	- 停用「點擊支付」登出按鈕的標籤顏色。 - 禁用部分。 - 載入狀態下支付按鈕的背景顏色。
`--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`	- 插入所選付款方式項目的背景顏色。 - 按鈕組內選定按鈕的背景顏色（在捐款組件中使用）。
`--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指令線高度 - 點選支付OTP複選框資訊行高 - 表單欄位標籤行高
`--adyen-sdk-text-body-font-weight`	`400`	- 記憶卡到期日期輸入文字字體粗細
`--adyen-sdk-text-body-stronger-font-weight`	`500`	- 選定的發行者按鈕文字字體粗細 - 直接付款方式清單項目標題字體粗細 - 插入訂單標題和扣除金額字體粗細 - 可信的描述字體粗細 - 支付按鈕文字字體粗細 - UPI分段控製文字字型粗細
`--adyen-sdk-text-subtitle-font-size`	`16px`	- Blik 助手字體大小 - 可信的描述標題 - 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)`	- 卡片可用品牌圖像和優惠券品牌圖像的盒子陰影 - 選取段的框陰影