Web Payments SDK styling

I was wondering how can I style the card container to my custom color, fontsize, etc. I wasn’t able to find any resource on that.

The Web Payments SDK lets you customize the style of the card entry and gift card entry forms. The five visual elements of the Card payment method are represented as selectors that you specify in a card option styling object. You can set colors, fonts, and border options as shown in the following image:

Is it possible to rearrange the layout of this form? We’ve been using the old SqPaymentForm, and have been able to style the inputs on different lines, and add labels above the inputs. For example:

I don’t see any way to accomplish this with the new form, since we don’t have access to place the individual inputs, is this correct?

:wave: Currently it’s not possible today to stack all the inputs. You can stack the card number above the rest of the input fields. I’ll be sure to share your request to the API product team. :slightly_smiling_face:

Also is there a way to handle the padding for each input in form?

:wave: For the card container there isn’t a way to adjust the padding currently. At this time you can set colors, fonts, and border options. :slightly_smiling_face: