adyen web
6.5.1
Adyen Web memberi Anda landasan untuk menciptakan pengalaman checkout bagi pembeli Anda, memungkinkan mereka membayar menggunakan metode pembayaran pilihan mereka.
Anda dapat berintegrasi dengan Adyen Web dengan dua cara:
| Versi utama | Negara | Tidak digunakan lagi | Akhir kehidupan |
|---|---|---|---|
| 6.xx | Aktif | --- | --- |
| 5.xx | Tidak aktif | TBA | TBA |
| 4.xx | Tidak aktif | TBA | TBA |
| 3.xx | Tidak digunakan lagi | Oktober 2024 | Oktober 2025 |
Informasi lebih lanjut tentang pembuatan versi kami dan siklus hidup Drop-in/Komponen dapat ditemukan di sini
Kami hanya memberikan dukungan penuh ketika Anda menggunakan salah satu metode instalasi ini.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> Anda juga dapat mengimpor Adyen Web menggunakan tag <script> , seperti yang ditunjukkan dalam panduan integrasi Komponen Web.
Persyaratan:
Untuk menjalankan lingkungan:
.env di folder root proyek Anda mengikuti contoh di env.default dan isi variabel lingkungan.yarn installyarn buildyarn startKami menyertakan pelokalan UI untuk banyak bahasa. Anda dapat memeriksa bahasa dan terjemahannya masing-masing di sini. Selain itu, Anda dapat menyesuaikan terjemahan saat ini dengan mengganti teks default dengan teks Anda sendiri jika Anda menginginkannya.
Adyen Web dapat bertema dan menggunakan variabel CSS yang dapat diganti untuk mencapai gaya yang diinginkan.
Untuk elemen yang tidak ada di dalam iframe, Anda dapat menyesuaikan gaya dengan mengganti gaya ini dalam file css. Sebagian besar gaya kami ditentukan dengan variabel css dengan nilai default. Untuk mengganti gaya tersebut, Anda dapat memeriksa DOM dan mengubah nilai variabel css baik di tingkat akar atau dengan menargetkan elemen tertentu. Perlu diketahui bahwa jika Anda mengubah nilai variabel css di tingkat akar, Anda juga mengubah gaya untuk semua elemen turunan yang menggunakan variabel css yang sama.
Buat override.css dengan variabel yang ingin Anda gaya
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} Pastikan untuk mengimpor override.css setelah mengimpor CSS utama perpustakaan
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | Variabel css | Nilai bawaan | Cakupan |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - Warna label di dalam formulir pembayaran, seperti instruksi formulir, label bidang formulir, dan teks kontekstual/pembantu. - Warna judul kumpulan bidang - Masukkan warna teks bidang - Header metode pembayaran drop-in, header metode pembayaran pesanan, warna teks status default. - Warna teks tombol Bacs Edit - Warna teks perkenalan untuk Transfer Bank, Voucher, Blik - Warna teks status donasi, warna latar belakang kampanye - UPI, ANCV, Blik, MBWay menunggu warna teks kontainer - Sekunder, warna teks tombol hantu - (Persetujuan) warna label kotak centang |
--adyen-sdk-color-label-secondary | #5c687c | - Warna label untuk informasi tambahan di header metode pembayaran drop-in. - Warna label penafian. - QR menghitung mundur warna label. - Hanya baca pilih dan masukan warna. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - Warna label untuk label klik untuk membayar. |
--adyen-sdk-color-label-disabled | #8d95a3 | - Warna label untuk tombol logout Klik untuk Membayar yang dinonaktifkan. - Segmen yang dinonaktifkan. - Warna latar belakang untuk tombol pembayaran dalam keadaan memuat. |
--adyen-sdk-color-label-critical | #e22d2d | - Warna batas untuk kolom masukan kesalahan dan pesan validasi kesalahan. |
--adyen-sdk-color-label-highlight | #0070f5 | - Warna tombol tautan. |
--adyen-sdk-color-label-on-color | #ffffff | - Warna teks tombol. - Warna teks deskripsi kampanye donasi. - Warna centang kotak centang. |
--adyen-sdk-color-background-primary | #ffffff | - Warna latar belakang untuk tombol pembayaran Sekunder. - Warna latar belakang untuk elemen formulir pembayaran: elemen input, radio, pilih, kotak centang. - Warna latar belakang untuk item pembayaran drop-in yang tidak dipilih. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - Warna latar belakang untuk drop-in item metode pembayaran yang dipilih. - Warna latar belakang untuk tombol yang dipilih di dalam grup tombol (digunakan dalam komponen Donasi). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - Warna latar belakang untuk tombol hantu melayang. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - Warna latar belakang untuk tombol hantu aktif. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - Warna latar belakang untuk kontrol tersegmentasi yang digunakan oleh UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - Warna latar belakang untuk elemen formulir yang dinonaktifkan. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Warna latar belakang untuk drop-in menghapus tombol konfirmasi metode pembayaran yang tersimpan. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - Warna latar belakang untuk mengarahkan tombol pembayaran. |
--adyen-sdk-color-background-always-dark | #00112c | - Warna latar belakang untuk tombol pembayaran utama. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - Warna latar belakang untuk tombol pembayaran utama yang aktif dan melayang. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - Drop-in menghapus konfirmasi kartu yang disimpan, warna latar belakang tombol - Warna latar belakang peringatan kartu hadiah |
--adyen-sdk-color-outline-primary | #dbdee2 | - Daftar metode pembayaran drop-in item warna batas yang tidak dipilih. - Warna bayangan kotak tombol penerbit yang disorot. - Elemen formulir pembayaran (termasuk kotak centang dan radio) warna batas. |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - Item daftar metode pembayaran drop-in melayang dan warna bayangan kotak tidak dipilih. - Radio dan kotak centang melayang tidak fokus pada warna bayangan kotak. |
--adyen-sdk-color-outline-primary-active | #00112c | - Bentuk elemen masukan terfokus pada bayangan kotak dan warna batas. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - Masukkan warna batas item pembayaran yang dipilih. - Warna batas wadah status default drop-in. - UPI, ANCV, Blik, MBWay menunggu warna border container. - Warna batas wadah kode QR. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - Warna batas pembayaran pesanan drop-in, warna teks biaya tambahan - Warna teks saldo kartu Gif - UPI, ANCV, Blik, MBWay menunggu hitung mundur warna teks - Radio, kotak centang arahkan warna bayangan kotak - Warna bayangan kotak fokus tombol bayar/reguler - Warna pemisah konten |
--adyen-sdk-color-outline-disabled | #dbdee2 | - Tombol sekunder menonaktifkan warna batas |
--adyen-sdk-color-outline-critical | #e22d2d | - Drop down warna batas tombol tidak valid |
--adyen-sdk-color-separator-primary | #dbdee2 | - Bidang masukan, pilih, kotak centang, dan formulir radio warna batas tidak valid |
--adyen-sdk-text-caption-line-height | 18px | - Berbagai tempat yang bukan body/subjudul/judul |
--adyen-sdk-text-caption-font-size | 12px | - Ukuran font pesan peringatan kartu hadiah - Item daftar metode pembayaran drop-in informasi tambahan ukuran font teks - Ukuran font teks pesan penafian - Formulir instruksi lapangan, kontekstual, ukuran font teks kesalahan |
--adyen-sdk-text-body-font-size | 14px | - Berbagai tempat yang bukan judul/sub judul/caption |
--adyen-sdk-text-body-line-height | 20px | - Tinggi garis teks radio - Ketinggian garis instruksi Payme - Klik untuk membayar tinggi baris info kotak centang otp - Bentuk garis label bidang tinggi |
--adyen-sdk-text-body-font-weight | 400 | - Tanggal kedaluwarsa kartu yang disimpan, masukkan berat font teks |
--adyen-sdk-text-body-stronger-font-weight | 500 | - Berat font teks tombol penerbit yang dipilih - Berat font judul item daftar metode pembayaran drop-in - Header pesanan drop-in dan jumlah berat font yang dikurangi - Berat font deskripsi yang dapat dipercaya - Berat font teks tombol bayar - Berat font teks kontrol tersegmentasi UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - Blik ukuran font pembantu - Tajuk deskripsi yang dapat dipercaya - UPI, ANCV, Blik, MBWay menunggu subtitle dan ukuran font indikator - Subtitle QR dan ukuran font indikator - Input, drop down input field ukuran font teks - Ukuran font jumlah voucher |
--adyen-sdk-text-subtitle-font-weight | 500 | - Berat font judul set bidang |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - Berat font label daftar metode pembayaran drop-in |
--adyen-sdk-text-subtitle-line-height | 26px | - Tinggi garis label daftar metode pembayaran drop-in - Bidang mengatur tinggi baris judul |
--adyen-sdk-text-title-font-size | 16px | - Ukuran font status akhir default drop-in - Ukuran font header pesanan drop-in - Ukuran font judul item daftar metode pembayaran drop-in - Ukuran font teks tombol bayar - Ukuran font pengenalan hasil voucher Directdebit_GB - Ukuran font judul kampanye donasi |
--adyen-sdk-text-title-font-weight | 600 | - Klik untuk membayar berat font judul header |
--adyen-sdk-text-title-line-height | 26px | - Tinggi baris teks masukan tanggal kedaluwarsa kartu yang disimpan |
--adyen-sdk-text-title-l-font-size | 24px | - Ukuran font teks referensi voucher |
--adyen-sdk-spacer-100 | 32px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-110 | 40px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-120 | 48px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-130 | 56px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-140 | 64px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-000 | 0px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-010 | 2px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-020 | 4px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-030 | 6px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-040 | 8px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-050 | 10px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-060 | 12px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-070 | 16px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-080 | 20px | Berbagai tempat untuk dimensi |
--adyen-sdk-spacer-090 | 24px | Berbagai tempat untuk dimensi |
--adyen-sdk-border-radius-xs | 2px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-radius-s | 4px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-radius-m | 8px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-radius-l | 12px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-radius-xl | 24px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-width-s | 1px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-width-m | 2px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-border-width-l | 3px | Berbagai tempat untuk radius perbatasan |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - Box shadow untuk Kartu tersedia gambar merek dan gambar merek voucher - Bayangan kotak untuk segmen yang dipilih |
Untuk menata bidang yang diamankan seperti nomor kartu, CVC, dan tanggal kedaluwarsa kartu, Anda dapat mengikuti tautan Menata bidang masukan kartu.
Mulai v5.16.0, integrasi Drop-in dan Komponen berisi fitur analitik dan pelacakan yang diaktifkan secara default. Cari tahu lebih lanjut tentang apa yang kami lacak dan bagaimana Anda dapat mengontrolnya.
Kami menggabungkan setiap permintaan tarik ke cabang main . Kami bertujuan untuk menjaga main dalam kondisi yang baik, yang memungkinkan kami merilis versi baru kapan pun kami membutuhkannya.
Lihat pedoman kontribusi kami untuk mengetahui cara mengajukan permintaan penarikan.
Jika Anda memiliki permintaan fitur, atau menemukan bug atau masalah teknis, buatlah masalah di sini.
Untuk pertanyaan lain, hubungi tim dukungan kami.
Repositori ini tersedia di bawah lisensi MIT.
