Sesuaikan penampilan

Payment Element seluler mendukung penyesuaian visual, yang memungkinkan Anda mencocokkan desain aplikasi. Tata letak tetap konsisten, tetapi Anda dapat mengubah warna, font, dan lainnya dengan menyertakan parameter appearance saat memanggil initPaymentSheet().

1. Mulai dengan menyesuaikan font
2. Sesuaikan warna agar cocok dengan aplikasi Anda
3. Sesuaikan bentuk seperti radius batas
4. Sempurnakan komponen spesifik

// The following code creates the appearance shown in the screenshot above
const customAppearance = {
 font: {
   family:
     Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
 },
 shapes: {
   borderRadius: 12,
   borderWidth: 0.5,
 },
 primaryButton: {
   shapes: {
    borderRadius: 20,
   },
 },
 colors: {
   primary: '#fcfdff',
   background: '#ffffff',
   componentBackground: '#f3f8fa',
   componentBorder: '#f3f8fa',
   componentDivider: '#000000',
   primaryText: '#000000',
   secondaryText: '#000000',
   componentText: '#000000',
   placeholderText: '#73757b',
 },
};

const { error } = await initPaymentSheet({
 ...
 appearance: customAppearance,
});

Font

Sesuaikan font dengan meneruskan FontConfig ke font dan mengatur family. Di iOS, nilai family harus berupa “nama PostScript name” yang ditemukan di Buku Font. Di Android, salin file .ttf atau .otf dari android/app/src/main/assets/font/<your-font> ke android/app/src/main/res/font/<your-font> serta gunakan nama file font (hanya berisi huruf kecil, karakter alfanumerik). Mobile Payment Element menggunakan keluarga font dari font custom Anda, tetapi menentukan ukuran dan bobot itu sendiri.

Untuk menambah atau mengurangi ukuran teks, atur scale. Kami mengalikan ukuran font dengan nilai ini sebelum menampilkannya. Hal ini berguna jika font custom Anda sedikit lebih besar atau lebih kecil dari font sistem.

...
const appearance: AppearanceParams = {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },

Warna

Sesuaikan warna di Payment Element seluler dengan memodifikasi kategori warna yang ditentukan di Appearance.Colors. Setiap kategori warna menentukan warna satu atau beberapa komponen di UI. Misalnya, primer menentukan warna tombol Bayar dan item yang dipilih seperti kotak centang Simpan kartu ini. Lihat diagram di bawah ini untuk mengetahui beberapa elemen UI yang dikaitkan dengan setiap kategori warna.

Bentuk

Selain font dan warna, Anda juga dapat menyesuaikan radius batas, lebar batas, dan bayangan yang digunakan di seluruh Payment Element seluler.

Komponen UI spesifik

Bagian sebelumnya menjelaskan opsi penyesuaian yang memengaruhi Payment Element seluler secara luas, di beberapa komponen UI. Kami juga menyediakan opsi penyesuaian khusus untuk tombol utama (misalnya, tombol Bayar). Lihat PrimaryButtonConfig untuk mengetahui daftar lengkap opsi penyesuaian.

Opsi penyesuaian untuk komponen UI spesifik lebih diutamakan daripada nilai lainnya. Misalnya, primaryButton.shapes.borderRadius mengesampingkan nilai shapes.borderRadius.