Migrating to 4.0.0

This doc guides you through the migration process to PCI SDK Web 4.0.0. This release contains breaking changes but you will only be affected if you are customizing your PCI View.

Changes

We provide a new way to style the form and the notifications. The OTP form has been replaced by a new component called InlineForm. This component is being used to display both the OTP form and the form to change the pin. In that way, we can unify the style of the forms and display a more cohesive look with no effort.

New inline form

We provide a new way to style the forms. This means that we have a new way to style the forms and formOTP, formOTPInput, formOTPSubmit properties in the ITheme object have been replaced with new a new object.

Now we include some default styles so you don't need to add extra configuration in the theme to style the form. In case you want to override the default styles and customize the form include this object in your PCI SDK web styles configuration with your preferred styles:

inlineForm: {
    container: {
        // Your styles for the container
    }
    input: {
        // Your styles for the input
    }
    submit: {
        // Your styles for the submit button
    }
}

Notifications

We have improved the overall experience with notifications. Now by default, we include styles that distinguish notifications between positive and negative to improve the user experience and provide more context.

We also made it so you don't need to add extra settings in the PCI SDK Web theme configuration to style the form if the default styles already fit your design. If you were customizing the notifications before you need to update the theme settings, because they will no longer apply, due to some changes we have made in version 4.0.0.

As you can see in the ITheme object example down below, the notification now has a positive and a negative properties to set the styles for each type of notification:

notification: {
    positive: {
        // Your styles for the positive notification
    }
    negative: {
        // Your styles for the negative notification
    }
}