[Feature] - Support for Checkout customization

[JonatanSalas]

Motivation

• Enable users to customize checkout UI colors.
• Provide an easier way to customize.

Current Limitations

On Android the current API for styling is static, that said, we can't expose to the Javascript module a way to pass custom colors for checkout. We've open an issue on Android PX repository, see issue here.

Draft APIs

We've in mind the following APIs:

Simpler Customization

It matches with the following documentation.

const payment = await MercadoPagoCheckout.createPayment({
    publicKey: Env.MP_PUBLIC_KEY,
    preferenceId: `your_preference_id`,
    themeOptions: { 
        primaryColor: `#your_color`
    }
});

Advanced Customization

It matches with the following documentation.

const payment = await MercadoPagoCheckout.createPayment({
    publicKey: Env.MP_PUBLIC_KEY,
    preferenceId: `your_preference_id`,
    themeOptions: { 
        primaryColor: `#your_color`, 
        highlightBackgroundColor: `#your_color`, 
        navigationBarStyle: {
            backgroundColor: `#your_color`, 
            tintColor: `#your_color`, 
        },
        loadingStyle: {
            backgroundColor: `#your_color`, 
            tintColor: `#your_color`, 
        },
        fontsStyle: {
             default: `your_font_name`,
             light: `your_light_font_name`,
             semiBold: `your_semibold_font_name`
        }
    }
});

[LuisGarcia9000]

HI @JonatanSalas, there is any update about this feature?

[JonatanSalas]

Hi @LuisGarcia9000, for now no because I'm out of time. But if you want to add it, feel free to fork our repo and make us a PR.