adyen web
6.5.1
Adyen Web은 쇼핑객이 선택한 결제 방법을 사용하여 결제할 수 있도록 쇼핑객을 위한 체크아웃 경험을 제공하는 구성 요소를 제공합니다.
다음 두 가지 방법으로 Adyen Web과 통합할 수 있습니다.
| 메이저 버전 | 상태 | 더 이상 사용되지 않음 | 수명 종료 |
|---|---|---|---|
| 6.xx | 활동적인 | --- | --- |
| 5.xx | 비활성 | 추후 공지 | 추후 공지 |
| 4.xx | 비활성 | 추후 공지 | 추후 공지 |
| 3.xx | 더 이상 사용되지 않음 | 2024년 10월 | 2025년 10월 |
버전 관리 및 Drop-in/Components 수명주기에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
우리는 이러한 설치 방법 중 하나를 사용하는 경우에만 완전한 지원을 제공합니다.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> 태그 사용 웹 구성 요소 통합 가이드에 표시된 대로 <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 | - 양식 지침, 양식 필드 라벨, 상황별/도우미 텍스트 등 결제 양식 내부의 라벨 색상입니다. - 필드셋 제목 색상 - 입력 필드 텍스트 색상 - 드롭인 결제 방법 헤더, 주문 결제 방법 헤더, 기본 상태 텍스트 색상. - 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 | - 비활성화된 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 | - 2차 결제 버튼의 배경색입니다. - 결제 양식 요소의 배경색: 입력 요소, 라디오, 선택, 체크박스. - 선택되지 않은 드롭인 결제 항목의 배경색입니다. |
--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 도우미 글꼴 크기 - 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 라이선스에 따라 사용할 수 있습니다.
