Skip to main content

Customize the UI

You can tailor the appearance of the Credit Card, Apple Pay and Stc Pay components to align with your app's design by using the style parameter.

Customize the Credit Card Component​

Pass the style parameter to the CreditCard component like the following example:

<CreditCard
    paymentConfig= // PaymentConfig object
    onPaymentResult= // Callback function
    style={{ textInputs: { borderWidth: 1.25 } }}
/>

You can use the following style properties:

style={{
    container: { backgroundColor: 'white' }, // Customize the component's container
    textInputs: { borderWidth: 1.25 }, // Customize the Credit Card text fields
    textInputsPlaceholderColor: "red", // Customize the Credit Card placeholders text color
    paymentButton: { borderRadius: 10 }, // Customize the payment button component
    paymentButtonText: { fontSize: 20 }, // Customize the payment button text style
    errorText: { fontSize: 12 }, // Customize the error message style
    activityIndicatorColor: "green", // Customize the loading activity indicator color
    webviewActivityIndicatorColor: "blue", // Customize the loading activity indicator color for 3DS webview
}}

Customize the Apple Pay Button​

Pass the style parameter to the ApplePay component like the following example:

<ApplePay
    paymentConfig= // PaymentConfig object
    onPaymentResult= // Callback function
    style={{ buttonType: 'buy' }}
/>

You can use the following style properties:

style={{
    buttonType: 'buy', // 'plain', 'buy', 'inStore', 'donate' or 'setUp'
    buttonStyle: 'black', // 'black' | 'white' | 'whiteOutline'
    height: 50,
    width: '90%',
    cornerRadius: 11,
}}

Customize the Stc Pay Component​

Pass the style parameter to the StcPay component like the following example:

<StcPay
    paymentConfig= // PaymentConfig object
    onPaymentResult= // Callback function
    style={{ textInput: { borderWidth: 1.25 } }}
/>

You can use the following style properties:

style={{
    container: { backgroundColor: 'white' }, // Customize the component's container
    title: { fontSize: 20 }, // Customize the title's style
    textInputs: { borderWidth: 1.25 }, // Customize the Stc Pay text fields
    textInputsPlaceholderColor: "red", // Customize the Credit Card placeholders text color
    paymentButton: { borderRadius: 10 }, // Customize the payment button component
    paymentButtonText: { fontSize: 20 }, // Customize the payment button text style
    errorText: { fontSize: 12 }, // Customize the error message style
    activityIndicatorColor: "green", // Customize the loading activity indicator color
}}
info