Advanced Usage

Styling

This example illustrates how to use the <CreditCard> and extend the styles of the card form.

The css property inside the buttonProps object is used to style the <button> element, since we are using CSS-in-JS is easy to extend all the styles that we want and even use a syntax that is almost like SASS.

The style property comes directly from Square and is used to pass the styles to the <CreditCard> input, Square use it's own set of classes to be styled, and you can only use the classes that are provided by Square.

import { CreditCard } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <CreditCard
        buttonProps={{
          css: {
            "[data-theme='dark'] &": {
              backgroundColor: '#61dafb',
              color: 'var(--ifm-color-emphasis-100)',
              '&:hover': {
                backgroundColor: '#0091ea',
              },
            },
            backgroundColor: '#771520',
            fontSize: '14px',
            color: '#fff',
            '&:hover': {
              backgroundColor: '#530f16',
            },
          },
        }}
        style={{
          input: {
            fontSize: '14px',
          },
          'input::placeholder': {
            color: '#771520',
          },
        }}
      />
    </PaymentForm>
  );
}

Test

We will never store your card data. But please use dummy data for testing.

info

After you hit the Pay button you can see the output on the console.

This is how the form looks like: