Credit Card Forms - An Overview

This document provides an overview for implementing Credit Card Forms, which are used for all Standard payment methods in LemonStand.

A High-Level Overview

What are Credit Card Forms?

They are exactly that - credit card forms for processing payments from your store for all Standard payment methods.

Why are they awesome?

Because, they:

How are they rendered?

They are rendered by using Twig helpers to render the form HTML, which contains a simple JavaScript to initialize functionality.

What helpers?

  • paymentForm - Used on checkouts to complete transactions.
  • subscriptionCardForm - Used for to add or update credit cards associated with a subscription.
  • customerCardForm - Used for to add or update credit cards associated with a customer.

How do I use the helpers?

Refer to the references for each for documentation on usage as well as examples:

What do they look like?

By default, like this, when empty:


And this, when full:

Styling Credit Card Forms

Customizing credit card forms can be done with a combination of the following techniques:

  • Overriding credit card form classes with CSS
  • Passing inline styles through to for credit card, security code fields (see card form references linked above for more detail)
  • Adding classes to card form fields (see card form references linked above for more detail).

Example: CSS Override with inline Card Number, Security Code styling in Ventro:

CSS Card Form Overrides (See: layout-head.htm, button.scss, custom.css)

Notes:

  • In layout-head, lemonstand.css is loaded before main.css (which contains a compiled button.scss) and custom.css.
  • Button style overrides are added in button.scss (linked above) by assigning styles defined for button classes there to .ls-card-form .submit-button and .ls-card-form .delete-button.
  • custom.css contains .ls-card-form .card-form-input overrides to match the styles of the form elements in the theme.

Payment Form Render with inline Card Number, CVV styling (See: Source)

{{ paymentForm({
        options: {
            number: {
                label: ' ',
                placeholder: 'Card number',
                style: "font-family: Verdana; letter-spacing: 0px; font-weight: 200; font-size: 15px; color: #3A3D3F; padding: 15px 19px 15px 0px; width: 91%;"
            },
            cvv: {
                label: ' ',
                placeholder: 'CVV',
                style: "font-family: Verdana; letter-spacing: 0px; font-weight: 200; font-size: 15px; color: #3A3D3F; padding: 15px 19px 15px 0px; width: 91%;"
            },
            full_name: {
                label: ' ',
                placeholder: 'Cardholder name',
            },
            expiry: {
                label: ' ',
                placeholder: 'MM/YYYY',
            },
            submit: {
                value: 'Pay Now'
            },
            save_card: {
                label: 'Save Card',
                enabled: saved_card_enabled
            }
        }
    },
    paymentMethod
) }}

Screenshot - Payment Form in Ventro Theme

Credit Card Form HTML Structure

Below is an example of a paymentForm's HTML structure:

<form class="ls-card-form ls-card-form-pay" id="ls-card-form-1" method="POST" data-ajax-handler="shop:onPay">
    <div class="card-form-row">
        <label for="ls-card-form-1-number">
            Credit Card Number
            <div id="ls-card-form-1-number" class="number card-form-input valid-highlight" placeholder="Card number"></div>
        </label>
    </div>
    <div class="card-form-row">
        <label for="full_name">
        Name
        <input type="text" class="full_name card-form-input valid-highlight" name="full_name" placeholder="Cardholder name" value="">
        </label>
    </div>
    <div class="card-form-row">
        <div class="card-form-expiry-outer">
            <label for="expiry">
            Expiration Date
            <input type="text" class="expiry card-form-input valid-highlight" name="expiry" maxlength="7" placeholder="MM/YYYY">
            </label>
        </div>
        <div class="card-form-cvv-outer">
            <label for="ls-card-form-1-cvv">
                Security Code
                <div id="ls-card-form-1-cvv" class="cvv card-form-input valid-highlight" placeholder="***"></div>
            </label>
        </div>
    </div>
    <div class="card-form-row-small">
        <div class="card-form-checkbox">
            <input type="checkbox" class="saveCard " name="saveCard">
            <label for="saveCard" class="card-form-checkbox-label">Save Card</label>
        </div>
    </div>
    <div class="card-form-row">
        <input id="submit-button" type="submit" class="card-form-text submit-button" value="Pay Now">
    </div>
</form>

Notes:

  • CVV and Credit Card Form Fields are div elements classed as card-form-input fields to match input fields that are also associated with the same class. This is to ensure both are styled in the same manner by default.

Notable CSS Classes

  • .ls-card-form - The credit card form class.
  • .card-form-input - The credit card form input field class.
  • .error-highlight - Highlights input fields on invalid data submission/input.
  • .valid-highlight - Highlights input fields on invalid data submission/input.
  • .ls-card-form .error - Credit card form error message fields.
  • .ls-card-form .error-bottom - Credit card form error message fields for the last row.
  • .card-form-row - Splits up card form row-by-row.