Display payment request fields above the text box

This documentation outlines the implementation details for the feature aimed at displaying the payment request fields above the text box.

Now in our hosted session SDK, we have the labels inside the text box as below,

So, we are giving the merchants the ability to show labels above the text box as below:

How does it work?

To try this change, merchant must add a new key (showInputsLabel) for the style object that merchant used it in the mountCardInput function.

const style = {
  main: {} /* the style for the main wrapper div around the card input*/,
  base: {} /* this is the default styles that comes with it */,
  input: {} /* custom style options for the input fields */,
  invalid: {} /* custom input invalid styles */
  showInputsLabel: true /* this key is responsble to show the inputs label if it true */ 
};

📘

This key is optional, and the default value for it is false , so the web SDK remain the same as older UI layout. If we use it as true, the new UI for the web SDK will appear.