# Sesuaikan penampilan

Sesuaikan integrasi seluler Anda dengan Appearance API.

# iOS

> This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=ios.

[Elemen Pembayaran seluler](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) mendukung penyesuaian visual, yang memungkinkan Anda mencocokkan desain aplikasi Anda. Tata letak tetap konsisten, tetapi Anda dapat memodifikasi warna, font, dan lainnya dengan menggunakan properti [penampilan](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV10appearanceAC10AppearanceVvp) di objek [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

1. Mulai dengan menyesuaikan [font](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-ios)
1. Sesuaikan [warna](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-ios) agar cocok dengan aplikasi Anda
1. Sesuaikan [bentuk](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-ios) seperti radius sudut
1. Sempurnakan [komponen spesifik](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-ios)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```swift
var configuration = PaymentSheet.Configuration()
// The following code creates the appearance shown in the screenshot abovevar appearance = PaymentSheet.Appearance()
appearance.font.base = UIFont(name: "AvenirNext-Regular", size: UIFont.systemFontSize)!
appearance.cornerRadius = 12
appearance.shadow = .disabled
appearance.borderWidth = 0.5
appearance.colors.background = .white
appearance.colors.primary = UIColor(red: 36/255, green: 36/255, blue: 47/255, alpha: 1)
appearance.colors.textSecondary = .black
appearance.colors.componentPlaceholderText = UIColor(red: 115/255, green: 117/255, blue: 123/255, alpha: 1)
appearance.colors.componentText = .black
appearance.colors.componentBorder = .clear
appearance.colors.componentDivider = UIColor(red: 195/255, green: 213/255, blue: 200/255, alpha: 1)
appearance.colors.componentBackground = UIColor(red: 243/255, green: 248/255, blue: 250/247, alpha: 1)
appearance.primaryButton.cornerRadius = 20
configuration.appearance = appearance
let paymentSheet = PaymentSheet(/* ... */, configuration: configuration)
```

## Font

Sesuaikan font dengan mengatur [font.base](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV4baseSo6UIFontCvp) ke varian font custom Anda dalam segala ukuran dan berat. Payment Element seluler menggunakan keluarga font dari font custom Anda, tetapi menentukan ukuran dan bobot itu sendiri.

Untuk menambah atau mengurangi ukuran semua teks, atur [font.sizeScaleFactor](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Font.html#/s:6Stripe12PaymentSheetC10AppearanceV4FontV15sizeScaleFactor12CoreGraphics7CGFloatVvp). 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.

```swift
var configuration = PaymentSheet.Configuration()
configuration.appearance.font.base = UIFont(name: "CustomFont-Regular", size: UIFont.systemFontSize)
configuration.appearance.font.sizeScaleFactor = 1.15 // Increase the size of all text by 1.15x
```

## Warna

Sesuaikan warna di Payment Element seluler dengan memodifikasi kategori warna yang ditentukan di [Appearance.Colors](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Setiap kategori warna menentukan warna satu atau beberapa komponen di UI. Misalnya, [primer](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Untuk mendukung mode gelap, inisialisasikan UIColors custom Anda dengan [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Bentuk

Selain font dan warna, Anda juga dapat menyesuaikan [radius sudut](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV12cornerRadius12CoreGraphics7CGFloatVvp), [lebar batas](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV11borderWidth12CoreGraphics7CGFloatVvp), dan [bayangan](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6shadowAE6ShadowVvp) yang digunakan di seluruh Payment Element seluler.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-shapes.ee37fc31111aa78f26af4045a3857468.png)

## 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/PrimaryButton.html) untuk mengetahui daftar lengkap opsi penyesuaian.

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

> [Beri tahu kami](https://github.com/stripe/stripe-ios/issues/new/choose) jika menurut Anda kami perlu menambahkan opsi penyesuaian lainnya.


# Android

> This is a Android for when platform is android. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=android.

[Elemen Pembayaran seluler](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) mendukung penyesuaian visual, yang memungkinkan Anda mencocokkan desain aplikasi Anda. Tata letak tetap konsisten, tetapi Anda dapat memodifikasi warna, font, dan lainnya dengan membuat objek [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) dengan objek [penampilan](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-431946322%2FProperties%2F2002900378).

1. Mulai dengan menyesuaikan [font](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-android)
1. Sesuaikan [warna](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-android) agar cocok dengan aplikasi Anda
1. Sesuaikan [bentuk](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-android) seperti radius sudut
1. Sempurnakan [komponen spesifik](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-android)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-before-after-example.acf584a69eb99f47fe0b5ffab24818b8.png)

```kotlin
// The following code creates the appearance shown in the screenshot aboveval 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#-786783041%2FProperties%2F2002900378) 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-typography/index.html#1477076499%2FProperties%2F2002900378). 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.

```kotlin
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.Builder("Example, Inc.")
    // …
    .appearance(appearance)
    .build()
```

## Warna

Sesuaikan warna di Payment Element seluler dengan mengubah kategori warna yang ditentukan di [PaymentSheet.Colors](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html). Setiap kategori warna menentukan warna satu atau beberapa komponen di UI. Misalnya, [primary](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-colors/index.html#1242160296%2FProperties%2F2002900378) 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.

> Untuk mendukung mode gelap, atur [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378). Anda dapat menonaktifkan mode gelap secara efektif dengan mengatur [appearance.colorsDark](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#945237406%2FProperties%2F2002900378) ke nilai yang sama dengan [appearance.colorsLight](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#2092498352%2FProperties%2F2002900378)
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-colors.413c76aaf01a54c25478cb8d7532c7e7.png)

## Bentuk

Selain menyesuaikan font dan warna, Anda juga dapat menyesuaikan [radius sudut](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#-1129752289%2FProperties%2F2002900378) serta [lebar batas](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-shapes/index.html#495484314%2FProperties%2F2002900378) yang digunakan di seluruh Payment Element seluler dengan mengatur [appearance.shapes](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-appearance/index.html#-2108514638%2FProperties%2F2002900378).
![](https://b.stripecdn.com/docs-statics-srv/assets/android-appearance-shapes.800169ea6a81e0bfdbccbb18bfdf7121.png)

## 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) 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`.

> Jika Anda memiliki ide untuk opsi penyesuaian tambahan, [beri tahu kami](https://github.com/stripe/stripe-android/issues/new/choose).


# React Native

> This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/elements/appearance-api/mobile?platform=react-native.

[Elemen Pembayaran seluler](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native) mendukung penyesuaian visual, yang memungkinkan Anda mencocokkan desain aplikasi Anda. Tata letak tetap konsisten, tetapi Anda dapat memodifikasi warna, font, dan lainnya dengan menyertakan parameter `penampilan` saat Anda memanggil [initPaymentSheet()](https://stripe.dev/stripe-react-native/api-reference/index.html#initPaymentSheet).

1. Mulai dengan menyesuaikan [font](https://docs.stripe.com/elements/appearance-api/mobile.md#fonts-react-native)
1. Sesuaikan [warna](https://docs.stripe.com/elements/appearance-api/mobile.md#colors-react-native) agar cocok dengan aplikasi Anda
1. Sesuaikan [bentuk](https://docs.stripe.com/elements/appearance-api/mobile.md#shapes-react-native) seperti radius batas
1. Sempurnakan [komponen spesifik](https://docs.stripe.com/elements/appearance-api/mobile.md#specific-ui-components-react-native)
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-before-after-example.ad6a9aad238be9b198e9ebbc77ebe1d4.png)

```js
// The following code creates the appearance shown in the screenshot aboveconst 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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.

```js
 ...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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV). Setiap kategori warna menentukan warna satu atau beberapa komponen di UI. Misalnya, [primer](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Appearance/Colors.html#/s:6Stripe12PaymentSheetC10AppearanceV6ColorsV7primarySo7UIColorCvp) 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.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-appearance-colors.2063c1f71eaa17656639098f3f4d29d6.png)

> Untuk mendukung mode gelap, inisialisasikan UIColors custom Anda dengan [init(dynamicProvider:)](https://developer.apple.com/documentation/uikit/uicolor/3238041-init).

## Bentuk

Selain font dan warna, Anda juga dapat menyesuaikan [radius batas](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), [lebar batas](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#AppearanceParams), dan [bayangan](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ShadowConfig) yang digunakan di seluruh Payment Element seluler.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-appearance-shapes.a71c754a951ea02fff121f584953ba33.png)

## 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](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#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`.

> [Beri tahu kami](https://github.com/stripe/stripe-react-native/issues/new/choose) jika menurut Anda kami perlu menambahkan opsi penyesuaian lainnya.