Personnaliser l'apparence

Personnalisez votre intégration dans l'application avec l'API Appearance.

Le composant Payment Element prendre en charge la personnalisation visuelle, ce qui vous permet de vous adapter au design de votre application. La mise en page reste cohérente, mais vous pouvez modifier les couleurs, les polices et bien plus encore en créant votre objet EmbeddedPaymentElement.Configuration avec un objet Appearance.

Personnaliser la police
Personnaliser les couleurs à l’image de votre application
Personnaliser les formes, comme l’angle des bordures
Ajuster les composants spécifiques

// The following code creates the appearance shown in the screenshot above
import androidx.compose.ui.graphics.Color

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
        ),
    ),
    embeddedAppearance = PaymentSheet.Appearance.Embedded(
        style = PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton(
            spacingDp = 20f,
            additionalInsetsDp = 10f
        )
    )
)

// ...

embeddedPaymentElement.configure(
    intentConfiguration = intentConfiguration,
    configuration = EmbeddedPaymentElement.Configuration.Builder(merchantName)
        .appearance(appearance)
        .build()
)

Polices de caractères

Personnalisez la police en définissant typography.fontResId sur l’ID de ressource de votre police personnalisée. L’Element Payment pour mobile utilise la famille de police de votre police personnalisée, mais détermine les tailles et épaisseurs lui-même.

Pour augmenter ou diminuer la taille du texte, définissez typography.sizeScaleFactor. Stripe multiplie les tailles de police par cette valeur avant de les afficher. Ce paramètre est utile si votre police personnalisée est légèrement plus grande ou plus petite que la police système.

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 = EmbeddedPaymentElement.Configuration(merchantName).Builder()
    .appearance(appearance)
    .build()

Couleurs

Personnalisez les couleurs de l’Element Payment pour mobile en modifiant les catégories de couleur définies dans PaymentSheet.Colors. Chaque catégorie de couleur détermine la couleur d’au moins un des composants de l’interface utilisateur. Par exemple, primary définit la couleur du bouton Payer et de certains autres éléments, comme la case à cocher Enregistrer cette carte. Référez-vous au diagramme ci-dessous pour découvrir les éléments d’interface utilisateur associés à chaque catégorie de couleur.

Remarque

Pour prendre en charge le mode sombre, définissez appearance.colorsDark. Vous pouvez désactiver le mode sombre en définissant appearance.colorsDark sur la même valeur que appearance.colorsLight.

Formes

Outre les polices et les couleurs, vous pouvez également personnaliser l’angle des coins et la largeur de la bordure utilisés dans le Mobile Payment Element en définissant appearance.shapes.

Composants spécifiques de l’interface utilisateur

Les sections ci-dessus décrivent les options de personnalisation globales du Payment Element pour mobile, qui modifient plusiers composants d’interface utilisateur. Nous proposons également des options de personnalisation spécifiques au bouton principal (par exemple, le bouton Payer). Référez-vous à la documentation sur Appearance.PrimaryButton pour découvrir la liste complète des options de personnalisation.

Les options de personnalisation de composants d’interface utilisateur spécifiques priment sur les autres valeurs. Par exemple, appearance.primaryButton.shapes.cornerRadius remplace la valeur de appearance.shapes.cornerRadius.

Remarque

Si vous avez des idées d’options de personnalisation supplémentaires, n’hésitez pas à nous contacter.

Payment Element

L’Element Payment a les styles suivants : plat avec des cases d’option, plat avec des coches, plat avec divulgation et boutons flottants. Chaque style a ses propres options.

Plan avec cases d’option

Pour utiliser le plan avec le style des cases d’option, définissez les propriétés FlatWithRadio comme illustré dans l’exemple de code.

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Colors(
    selectedColor = Color.Yellow.toArgb(), // Change color of radio button when selected to yellow
    unselectedColor = Color.DarkGray.toArgb(), // Change color of radio button when unselected to darkGray
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithRadio.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()

Plan avec cases à cocher

Pour utiliser le plan avec le style des cases à cocher, définissez les propriétés FlatWithCheckmark, comme illustré dans l’exemple de code.

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Colors(
    checkmarkColor = Color.Blue.toArgb(), // Change color of the checkmark
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithCheckmark.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .checkmarkInsetDp(2f) // Inset the checkmark
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()

Appartement avec divulgation

To use the flat with disclosure style, set the FlatWithDisclosure properties, as shown in the code example below.

Le style FlatWithDisclosure vous oblige à définir le comportement de sélection de ligne immediateAction. Une fois que le client a sélectionné un mode de paiement, déplacez-le vers un nouvel écran (par exemple, vers votre écran de paiement principal), car la ligne du mode de paiement sélectionné n’apparaîtra pas sélectionnée.

Élément de paiement intégré stylisé à l’aide d’un plat avec divulgation

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb

// EmbeddedPaymentElement initialization

val embeddedBuilder = EmbeddedPaymentElement.Builder(
  ...,
)
  // The FlatWithDisclosure style requires the immediateAction row selection behavior, which accepts a handler for a user selecting a payment method.
  .rowSelectionBehavior(EmbeddedPaymentElement.RowSelectionBehavior.immediateAction { embeddedPaymentElement ->
    // Handle the customer tapping a payment method row here
  })

...

// Configuration

val embeddedColors = PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Colors(
    disclosureColor = Color.Blue.toArgb(), // Change color of the disclosure
    separatorColor = Color.Gray.toArgb(), // Change the separator color to gray
)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FlatWithDisclosure.Builder()
        .separatorThicknessDp(2f) // Increase separator thickness to 2
        .startSeparatorInsetDp(0f) // Make start separator full width
        .endSeparatorInsetDp(0f) // Make end separator full width
        .topSeparatorEnabled(false) // Hide the top separator
        .bottomSeparatorEnabled(false) // Hide the bottom separator
        .additionalVerticalInsetsDp(10f) // Increase row height
        .horizontalInsetsDp(10f)
        .colorsLight(embeddedColors)
        .colorsDark(embeddedColors)
        .build()
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
  .appearance(appearance)
  .build()

Boutons flottants

Pour utiliser le style des boutons flottants, définissez les propriétés FloatingButton, comme illustré dans l’exemple de code.

Payment Element intégré de style défini par un bouton flottant

val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    .rowStyle(
      PaymentSheet.Appearance.Embedded.RowStyle.FloatingButton.Builder()
        .additionalInsetsDp(10f) // Increase row height
        .spacingDp(20f) // Increase spacing
    )
    .build()


val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()

Personnalisations courantes des rangées

Vous pouvez personnaliser les propriétés de ligne qui s’appliquent à tous les styles de ligne :

@OptIn(AppearanceAPIAdditionsPreview::class)
val embeddedAppearance = PaymentSheet.Appearance.Embedded.Builder()
    // Custom margins for the payment method icon (e.g. the Klarna logo)
    .paymentMethodIconMargins(
      PaymentSheet.Insets(
        horizontalDp = 10f,
        verticalDp = 5f
      )
    )
    // Custom font for the row title (e.g. "Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 20f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    // Custom font for the row subtitle (e.g. "Buy now or pay later with Klarna")
    .titleFont(
      PaymentSheet.Typography.Font(
        fontFamily = R.font.custom_font,
        fontSizeSp = 14f,
        fontWeight = 50,
        letterSpacingSp = 8f
      )
    )
    .build()

val appearance = PaymentSheet.Appearance(
    embeddedAppearance = embeddedAppearance,
)

val configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
    .appearance(appearance)
    .build()