Sesuaikan penampilan

const appearance = {
  theme: 'stripe',
};
stripe.initCheckout({
  fetchClientSecret,
  elementsOptions: {
    appearance,
  },
});

1. Mulai dengan memilih tema.

Mulai dan jalankan segera dengan memilih tema siap-rakit yang paling serupa dengan situs web Anda.

1. Sesuaikan tema menggunakan variabel.

Atur variabel seperti fontFamily dan colorPrimary untuk menyesuaikan komponen secara luas yang muncul di setiap Elemen.

1. Jika dibutuhkan, sempurnakan masing-masing komponen dan status menggunakan aturan.

Untuk kontrol penuh, tentukan properti CSS custom untuk masing-masing komponen yang muncul di Element.

Tema

Mulai sesuaikan Elements dengan memilih dari salah satu tema berikut:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

Variabel

Atur variabel untuk memengaruhi penampilan banyak komponen yang muncul di setiap Element.

Opsi variables berfungsi seperti variabel CSS. Anda dapat menentukan nilai CSS untuk setiap variabel dan mereferensikan variabel lain dengan sintaks var(--myVariable). Anda bahkan dapat memeriksa DOM yang dihasilkan menggunakan penjelajah DOM di browser Anda.

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

Variabel yang umum digunakan

Aturan

Opsi rules adalah peta pemilih seperti CSS ke properti CSS, yang memungkinkan penyesuaian terperinci masing-masing komponen. Setelah menentukan theme dan variables, gunakan rules untuk mengintegrasikan Elements secara mulus agar sesuai dengan desain situs Anda.

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

Semua aturan

Pemilih untuk aturan dapat menargetkan nama kelas publik mana saja di Element, serta status, semi kelas, dan semi elemen yang didukung untuk setiap kelas. Misalnya, berikut ini adalah pemilih yang valid:

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

Berikut ini bukan pemilih yang valid:

• .p-SomePrivateClass, img, hanya nama kelas publik yang dapat ditargetkan
• .Tab .TabLabel, hubungan ancestor-descendant di pemilih tidak didukung
• .Tab--invalid, the .Tab kelas tidak mendukung status --invalid

Setiap nama kelas yang digunakan di pemilih mendukung daftar izin properti CSS, yang Anda tentukan menggunakan camel case (misalnya, boxShadow untuk properti box-shadow).

Berikut ini adalah daftar lengkap nama kelas yang didukung serta status, semi kelas, dan semi element yang sesuai.

Tab

Input Formulir - Label di Atas

Pastikan Anda memilih ukuran font minimal 16px untuk bidang input di ponsel.

Input Formulir - Label Mengambang

Blokir

Input Kode

Checkbox

Dropdown

Ganti

Pemilih

Pastikan status aktif .PickerItem menonjol di antara status lainnya.

BOLEH LAKUKAN Gunakan warna, bobot, dan/atau kerangka primer yang mencolok dan kontras tinggi untuk membedakan status aktif yang sudah dipilih pelanggan Anda.	JANGAN LAKUKAN Jangan gunakan dua opsi dengan bobot yang sama atau warna kontras rendah untuk status .PickerItem karena menjadikan pembedaan mana yang aktif lebih sulit.

Menu

Akordeon

Element Pengiriman Pesan Metode Pembayaran

Ikon Radio

Anda dapat mengontrol ukuran keseluruhan ikon dengan properti width pada .RadioIcon. Anda dapat mengontrol ukuran relatif .RadioIconInner dengan properti r (radius). .RadioIconOuter dan .RadioIconInner adalah elemen SVG serta dapat diatur gayanya dengan properti stroke dan fill. Lihat daftar lengkap properti CSS yang didukung di bawah ini.

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

Opsi konfigurasi lainnya

Selain themes, variables dan rules, kami telah menyediakan opsi konfigurasi penampilan tambahan untuk mengatur gaya Elements.

Anda dapat menyesuaikannya dengan menambahkannya ke objek penampilan:

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

Saat ini kami mendukung opsi berikut: