Adyen Web มอบองค์ประกอบพื้นฐานเพื่อสร้างประสบการณ์การชำระเงินให้กับผู้ซื้อของคุณ ทำให้พวกเขาชำระเงินโดยใช้วิธีการชำระเงินที่พวกเขาเลือกได้
คุณสามารถผสานรวมกับ Adyen Web ได้สองวิธี:
รุ่นหลัก | สถานะ | เลิกใช้แล้ว | บั้นปลายชีวิต |
---|---|---|---|
6.xx | คล่องแคล่ว | - | - |
5.xx | ไม่ได้ใช้งาน | จะแจ้งภายหลัง | จะแจ้งภายหลัง |
4.xx | ไม่ได้ใช้งาน | จะแจ้งภายหลัง | จะแจ้งภายหลัง |
3.xx | เลิกใช้แล้ว | ตุลาคม 2024 | ตุลาคม 2568 |
ข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดเวอร์ชันของเราและวงจรการใช้งานดรอปอิน/คอมโพเนนต์สามารถพบได้ที่นี่
เราจะให้การสนับสนุนอย่างเต็มที่เฉพาะเมื่อคุณใช้วิธีการติดตั้งอย่างใดอย่างหนึ่งเหล่านี้
npm install @adyen/adyen-web --save
import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;
<script>
คุณยังสามารถนำเข้า Adyen Web โดยใช้แท็ก <script>
ดังที่แสดงในคู่มือการรวม Web Components
ความต้องการ:
ในการรันสภาพแวดล้อม:
.env
บนโฟลเดอร์รูทของโปรเจ็กต์ของคุณตามตัวอย่างใน env.default
และกรอกตัวแปรสภาพแวดล้อมyarn install
yarn build
yarn start
เรารวมการแปล UI สำหรับหลายภาษา คุณสามารถตรวจสอบภาษาและคำแปลที่เกี่ยวข้องได้ที่นี่ นอกจากนี้ คุณยังสามารถปรับแต่งการแปลปัจจุบันโดยแทนที่ข้อความเริ่มต้นด้วยข้อความของคุณเองได้ในกรณีที่คุณต้องการ
Adyen Web มีธีมและใช้ตัวแปร CSS ที่สามารถแทนที่ได้เพื่อให้ได้สไตล์ที่ต้องการ
สำหรับองค์ประกอบที่ไม่อยู่ใน iframe คุณสามารถปรับแต่งสไตล์ได้โดยการแทนที่สไตล์เหล่านี้ในไฟล์ css สไตล์ส่วนใหญ่ของเราถูกกำหนดด้วยตัวแปร css พร้อมค่าเริ่มต้น หากต้องการแทนที่สไตล์เหล่านั้น คุณสามารถตรวจสอบ DOM และเปลี่ยนค่าสำหรับตัวแปร css ที่ระดับรูทหรือโดยการกำหนดเป้าหมายองค์ประกอบเฉพาะ โปรดทราบว่าหากคุณเปลี่ยนค่าสำหรับตัวแปร CSS ที่ระดับราก คุณจะเปลี่ยนสไตล์สำหรับองค์ประกอบลูกทั้งหมดที่ใช้ตัวแปร CSS เดียวกันด้วย
สร้าง override.css
ด้วยตัวแปรที่คุณต้องการจัดรูปแบบ
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
}
ตรวจสอบให้แน่ใจว่าได้นำเข้า override.css
หลังจากนำเข้า 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 | - สีป้ายกำกับสำหรับคนพิการ ปุ่มคลิกเพื่อจ่ายออกจากระบบ - ส่วนผู้พิการ - สีพื้นหลังของปุ่มชำระเงินในสถานะโหลด |
--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 | - ขนาดตัวอักษรข้อความอ้างอิง Voucher |
--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 และวันหมดอายุของการ์ด คุณสามารถไปที่ลิงก์ ช่องป้อนข้อมูลการจัดรูปแบบการ์ด
ตั้งแต่เวอร์ชัน 5.16.0 เป็นต้นไป การผสานรวม Drop-in และ Components จะมีคุณลักษณะการวิเคราะห์และการติดตามที่เปิดใช้งานตามค่าเริ่มต้น ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เราติดตามและวิธีควบคุมมัน
เรารวมทุกคำขอดึงเข้ากับสาขา main
เรามุ่งมั่นที่จะรักษา main
ให้อยู่ในสภาพที่ดี ซึ่งช่วยให้เราสามารถออกเวอร์ชันใหม่ได้ทุกเมื่อที่ต้องการ
ดูหลักเกณฑ์การมีส่วนร่วมของเราเพื่อดูวิธีส่งคำขอดึง
หากคุณมีคำขอคุณลักษณะ หรือพบจุดบกพร่องหรือปัญหาทางเทคนิค ให้สร้างปัญหาที่นี่
สำหรับคำถามอื่นๆ โปรดติดต่อทีมสนับสนุนของเรา
พื้นที่เก็บข้อมูลนี้มีให้ภายใต้ใบอนุญาต MIT