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 membuat objek PaymentSheet.Configuration menggunakan objek appearance.

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

// The following code creates the appearance shown in the screenshot above
val appearance = PaymentSheet.Appearance(
   colorsLight = PaymentSheet.Colors(
       primary = Color(red = 36, green = 36, blue = 47),
       surface = Color.White,
       component = Color(red = 243, green = 248, blue = 245),
       componentBorder = Color.Transparent,
       componentDivider = Color.Black,
       onComponent = Color.Black,
       subtitle = Color.Black,
       placeholderText = Color(red = 115, green = 117, blue = 123),
       onSurface = Color.Black,
       appBarIcon = Color.Black,
       error = Color.Red,
   ),
   shapes = PaymentSheet.Shapes(
       cornerRadiusDp = 12.0f,
       borderStrokeWidthDp = 0.5f
   ),
   typography = PaymentSheet.Typography.default.copy(
       fontResId = R.font.avenir_next
   ),
   primaryButton = PaymentSheet.PrimaryButton(
   shape = PaymentSheet.PrimaryButtonShape(
       cornerRadiusDp = 20f
   ),
)

// ...

paymentSheet.presentWithPaymentIntent(
   clientSecret,
   PaymentSheet.Configuration(
       merchantDisplayName = merchantName,
       appearance = appearance
   )
)

Font

Sesuaikan font dengan mengatur typography.fontResId ke identifikasi sumber daya font custom Anda. Payment Element seluler menggunakan keluarga font dari font custom Anda, tetapi menentukan ukuran dan bobot itu sendiri.

Untuk menambah atau mengurangi ukuran teks, atur typography.sizeScaleFactor. Stripe mengalikan ukuran font dengan nilai ini sebelum menampilkannya. Pengaturan ini berguna jika font custom Anda sedikit lebih besar atau lebih kecil dari font sistem.

val appearance = PaymentSheet.Appearance(
    // …
    typography = PaymentSheet.Typography.default.copy(
        sizeScaleFactor = 1.15f, // Increase the size of all text by 1.15x
        fontResId = R.font.myFont,
    ),
)
val configuration = PaymentSheet.Configuration(
    // …
    appearance = appearance
)

Warna

Sesuaikan warna di Payment Element seluler dengan mengubah kategori warna yang ditentukan di PaymentSheet.Colors. Setiap kategori warna menentukan warna satu atau beberapa komponen di UI. Misalnya, primary 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 menyesuaikan font dan warna, Anda juga dapat menyesuaikan radius sudut serta lebar batas yang digunakan di seluruh Payment Element seluler dengan mengatur appearance.shapes.

Komponen UI spesifik

Bagian di atas 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 Appearance.PrimaryButton untuk mengetahui daftar lengkap opsi penyesuaian.

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