Web Payments SDK

Customize the Card Entry Form

The Web Payments SDK lets you customize the style of the card entry and gift card entry forms. This topic shows you what style choices you have, how to set them, and what the resulting form looks like. You can see several customization ideas by viewing the Design Showcase sample on GitHub.

The steps in this topic add code to the application you created from the quickstart project sample. If you haven't created an application using the quickstart, you need to do so before completing the following steps. You can find a complete example of the customized card on GitHub.

You can view the supported stylesheet classes and properties in the CardClassSelectors object API reference.

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:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

Configure a customized Card payment method
Dynamic layout
Related topics

Link to section
Configure a customized Card payment method

The following steps produce the dark mode card previously shown.

Link to section
Step 1: Add a dark mode style to the page

Add a reference to the dark-mode css class to the body of the page.

 <body class="dark-mode">
   <form id="payment-form">
     <div id="card-container"></div>
   </form>
 </body>

Add a <link> tag below the current <link href="app.css" rel="stylesheet" /> in the header to add the dark-mode.css.
- 1
```
 <link href="dark-mode.css" rel="stylesheet" />
```

Link to section
Step 2: Define a custom style

Declare style customizing options in the CardOptions object. The style field value is of the CardClassSelectors type.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

const darkModeCardStyle = {
  '.input-container': {
    borderColor: '#2D2D2D',
    borderRadius: '6px',
  },
  '.input-container.is-focus': {
    borderColor: '#006AFF',
  },
  '.input-container.is-error': {
    borderColor: '#ff1600',
  },
  '.message-text': {
    color: '#999999',
  },
  '.message-icon': {
    color: '#999999',
  },
  '.message-text.is-error': {
    color: '#ff1600',
  },
  '.message-icon.is-error': {
    color: '#ff1600',
  },
  input: {
    backgroundColor: '#2D2D2D',
    color: '#FFFFFF',
    fontFamily: 'helvetica neue, sans-serif',
  },
  'input::placeholder': {
    color: '#999999',
  },
  'input.is-error': {
    color: '#ff1600',
  },
  '@media screen and (max-width: 600px)': {
     'input': {
        'fontSize': '12px',
     }
  }     
};

Link to section
Step 3: Initialize the Card payment method with a custom style

Add the style parameter to the payments.card function call.

async function initializeCard(payments) {
  const card = await payments.card({
    style: darkModeCardStyle,
  });
  await card.attach('#card-container');

  return card;
}

Link to section
Dynamic layout

Your application and the buyer's actions determine whether the form is shown as a single line or a two-line form. If your application has styled the <div> that the form is attached to as a fixed width of less than 480 pixels, the form is rendered as two lines. If the <div> is declared with minimum and maximum widths that let the buyer resize the page, then the form reacts to a wider <div> container by rendering as a single line.

Link to section
Related topics

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.

Docs

Customize the Card Entry Form

On this page

Link to section
Configure a customized Card payment method

Link to section
Step 1: Add a dark mode style to the page

Link to section
Step 2: Define a custom style

Link to section
Step 3: Initialize the Card payment method with a custom style

Link to section
Dynamic layout

Link to section
Related topics

On this page

Docs

Customize the Card Entry Form

On this page

Link to section Configure a customized Card payment method

Link to section Step 1: Add a dark mode style to the page

Link to section Step 2: Define a custom style

Link to section Step 3: Initialize the Card payment method with a custom style

Link to section Dynamic layout

Link to section Related topics

On this page

Link to section
Configure a customized Card payment method

Link to section
Step 1: Add a dark mode style to the page

Link to section
Step 2: Define a custom style

Link to section
Step 3: Initialize the Card payment method with a custom style

Link to section
Dynamic layout

Link to section
Related topics