In this guide, you will learn how to:

• Set up a basic CanJS application.
• Collect form data and post it to a service endpoint when the form is submitted.
• Do basic validation.

The final widget looks like:

See the Pen Credit Card Guide (Simple) [Finished] by Bitovi (@bitovi) on CodePen.

To use the widget:

1. Enter a Card Number, Expiration Date, and CVC.
2. Click on the form so those inputs lose focus. The Pay button should become enabled.
3. Click the Pay button to get a token from Stripe, which could be used to create a credit card payment.
4. Change the inputs to invalid values. An error message should appear, the invalid inputs should be highlighted red, and the Pay button should become disabled.

START THIS TUTORIAL BY CLONING THE FOLLOWING CODEPEN:

See the Pen Credit Card Guide (Simple) [Starter] by Bitovi (@bitovi) on CodePen.

This CodePen has initial prototype HTML and CSS which is useful for getting the application to look right.

The following sections are broken down into:

• The problem — A description of what the section is trying to accomplish.
• What you need to know — Information about CanJS that is useful for solving the problem.
• The solution — The solution to the problem.

Setup

The problem

Let’s create a cc-payment component, which will have an amount property that defaults to 9.99. When complete, we should be able update the displayed “pay amount”.

What you need to know

• To use Stripe, you must call Stripe.setPublishableKey.

• A basic CanJS setup uses instances of a StacheElement, which glues ObservableObject-like properties to a view in order to manage its behavior as follows:

  import { StacheElement } from "can";
  
  // Define the Component
  class CCPayment extends StacheElement {
    static view = "...";
  
    static props = {};
  }
  
  // Define the custom element tag
  customElements.define("cc-payment", CCPayment);
  

• CanJS component will be mounted in the DOM by adding the the component tag in the HTML page:

  <cc-payment></cc-payment>
  

• CanJS component uses can-stache to render data in a template and keep it live.

• The properties defined in the props object can have default values like:

  class MyComponent extends StacheElement {
    static props = {
      age: {
        default: 34
      }
    };
  }
  

The solution

Update the HTML tab to:

<cc-payment></cc-payment>
<script src="https://js.stripe.com/v2/"></script>

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form>
      <input type="text" name="number" placeholder="Card Number">

      <input type="text" name="expiry" placeholder="MM-YY">

      <input type="text" name="cvc" placeholder="CVC">

      <button>Pay $\{{ amount }}</button>
    </form>
  `;

  static props = {
    amount: { default: 9.99 }
  };
}

customElements.define("cc-payment", CCPayment);

Read form values

The problem

Let’s send the form values to the cc-payment element so we can process and validate them. In this step, we’ll send the form values to the element and print out the values to make sure the element has them correctly.

Print out the exported values like:

<p>{{userCardNumber}}, {{userExpiry}}, {{userCVC}}</p>

What you need to know

• Use value:bind to set up a two-way binding in can-stache. For example, the following keeps email on the element props and the input’s value in sync:

  <input value:bind="email"/>
  

• can-observable-object allows you to define a property by defining its type like so:

  import { ObservableObject } from "can";
  
  class Person extends ObservableObject {
    static props = {
      name: String,
      age: Number
    };
  }
  

The solution

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form>
      <input type="text" name="number" placeholder="Card Number"
          value:bind="this.userCardNumber">

      <input type="text" name="expiry" placeholder="MM-YY"
          value:bind="this.userExpiry">

      <input type="text" name="cvc" placeholder="CVC"
          value:bind="this.userCVC">

      <button>Pay $\{{ this.amount }}</button>

      <p>{{ this.userCardNumber }}, {{ this.userExpiry }}, {{ this.userCVC }}</p>
    </form>
  `;

  static props = {
    amount: {
      default: 9.99
    },

    userCardNumber: String,

    userExpiry: String,

    userCVC: String
  };
}

customElements.define("cc-payment", CCPayment);

Format form values

The problem

Our data needs to be cleaned up before we pass it to the server. We need to create the following properties, with associated behaviors:

• cardNumber - The user’s card number as a string without hyphens (-).
• expiryMonth - A number for the month entered.
• expiryYear - A number for the year entered.
• cvc - A number for the cvc entered.

So that we can print out the values like:

<p>{{cardNumber}}, {{expiryMonth}}-{{expiryYear}}, {{cvc}}</p>

What you need to know

• ES5 Getter Syntax can be used to define an ObservableObject property that changes when another property changes. For example, the following defines a firstName property that always has the first word of the fullName property:

  class Person extends ObservableObject {
    static props = {
      fullName: String,
  
      get firstName() {
        return this.fullName.splice(" ")[0];
      }
    };
  }
  

The solution

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form>
      <input type="text" name="number" placeholder="Card Number"
          value:bind="this.userCardNumber">

      <input type="text" name="expiry" placeholder="MM-YY"
          value:bind="this.userExpiry">

      <input type="text" name="cvc" placeholder="CVC"
          value:bind="this.userCVC">

      <button>Pay $\{{ this.amount }}</button>

      <p>{{ this.userCardNumber }}, {{ this.userExpiry }}, {{ this.userCVC }}</p>
      <p>{{ this.cardNumber }}, {{ this.expiryMonth }}-{{ this.expiryYear }}, {{ this.cvc }}</p>
    </form>
  `;

  static props = {
    amount: {
      default: 9.99
    },

    userCardNumber: String,

    get cardNumber() {
      return this.userCardNumber ? this.userCardNumber.replace(/-/g, "") : null;
    },

    userExpiry: String,

    get expiryParts() {
      if (this.userExpiry) {
        return this.userExpiry.split("-").map(function(p) {
          return parseInt(p, 10);
        });
      }
    },

    get expiryMonth() {
      return this.expiryParts && this.expiryParts[0];
    },

    get expiryYear() {
      return this.expiryParts && this.expiryParts[1];
    },

    userCVC: String,

    get cvc() {
      return this.userCVC ? parseInt(this.userCVC, 10) : null;
    }
  };
}

customElements.define("cc-payment", CCPayment);

Validate individual form values

The problem

We need to add class="is-error" when a form value has a value that is not valid according to Stripe’s validators. To do that, we need to create the following properties that will return an error message for their respective form property:

• cardError - “Invalid card number (ex: 4242-4242-4242).”
• expiryError - “Invalid expiration date (ex: 01-22).”
• cvcError - “Invalid CVC (ex: 123).”

What you need to know

• Stripe has validation methods:

  • Stripe.card.validateCardNumber(number)
  • Stripe.card.validateExpiry(month, year)
  • Stripe.card.validateCVC(cvc)

• Use {{# if(value) }} to do if/else branching in can-stache.

  {{# if(error) }}class="is-error"{{/ if }}
  

The solution

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form>
      <input type="text" name="number" placeholder="Card Number"
          {{# if(this.cardError) }}class="is-error"{{/ if }}
          value:bind="this.userCardNumber">

      <input type="text" name="expiry" placeholder="MM-YY"
          {{# if(this.expiryError) }}class="is-error"{{/ if }}
          value:bind="this.userExpiry">

      <input type="text" name="cvc" placeholder="CVC"
          {{# if(this.cvcError) }}class="is-error"{{/ if }}
          value:bind="this.userCVC">

      <button>Pay $\{{ this.amount }}</button>

      <p>{{ this.userCardNumber }}, {{ this.userExpiry }}, {{ this.userCVC }}</p>
      <p>{{ this.cardNumber }}, {{ this.expiryMonth }}-{{ this.expiryYear }}, {{ this.cvc }}</p>
    </form>
  `;

  static props = {
    amount: { default: 9.99 },

    userCardNumber: String,

    get cardNumber() {
      return this.userCardNumber ? this.userCardNumber.replace(/-/g, "") : null;
    },

    get cardError() {
      if (this.cardNumber && !Stripe.card.validateCardNumber(this.cardNumber)) {
        return "Invalid card number (ex: 4242-4242-4242).";
      }
    },

    userExpiry: String,

    get expiryParts() {
      if (this.userExpiry) {
        return this.userExpiry.split("-").map(function(p) {
          return parseInt(p, 10);
        });
      }
    },

    get expiryMonth() {
      return this.expiryParts && this.expiryParts[0];
    },

    get expiryYear() {
      return this.expiryParts && this.expiryParts[1];
    },

    get expiryError() {
      if (
        (this.expiryMonth || this.expiryYear) &&
        !Stripe.card.validateExpiry(this.expiryMonth, this.expiryYear)
      ) {
        return "Invalid expiration date (ex: 01-22).";
      }
    },

    userCVC: String,

    get cvc() {
      return this.userCVC ? parseInt(this.userCVC, 10) : null;
    },

    get cvcError() {
      if (this.cvc && !Stripe.card.validateCVC(this.cvc)) {
        return "Invalid CVC (ex: 123).";
      }
    }
  };
}

customElements.define("cc-payment", CCPayment);

Get payment token from Stripe

The problem

When the user submits the form, we need to call Stripe to get a token that we may use to charge the credit card. When we get a token, we will simply alert it to the user like:

alert("Token: " + response.id);

After submitting the form, you should see an alert like:

What you need to know

• Use on:event to listen to an event on an element and call a method in can-stache. For example, the following calls doSomething() when the <div> is clicked:

  <div on:click="this.doSomething(scope.event)"> ... </div>
  

  Notice that it also passed the event object with scope.event.

• To prevent a form from submitting, call event.preventDefault().

• Stripe.card.createToken can be used to get a token that can be used to charge a card:

  Stripe.card.createToken({
    number: this.cardNumber,
    cvc: this.cvc,
    exp_month: this.expiryMonth,
    exp_year: this.expiryYear
  }, stripeResponseHandler(status, response) )
  

  • stripeResponseHandler gets called back with either:
    • success: a status of 200 and a response with an id that is the token.
    • failure: a status other than 200 and a response with an error.message value detailing what went wrong.

The solution

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form on:submit="this.pay(scope.event)">
      <input type="text" name="number" placeholder="Card Number"
          {{# if(this.cardError) }}class="is-error"{{/ if }}
          value:bind="this.userCardNumber">

      <input type="text" name="expiry" placeholder="MM-YY"
          {{# if(this.expiryError) }}class="is-error"{{/ if }}
          value:bind="this.userExpiry">

      <input type="text" name="cvc" placeholder="CVC"
          {{# if(this.cvcError) }}class="is-error"{{/ if }}
          value:bind="this.userCVC">

      <button>Pay $\{{ this.amount }}</button>

      <p>{{ this.userCardNumber }}, {{ this.userExpiry }}, {{ this.userCVC }}</p>
      <p>{{ this.cardNumber }}, {{ this.expiryMonth }}-{{ this.expiryYear }}, {{ this.cvc }}</p>
    </form>
`;

  static props = {
    amount: { default: 9.99 },

    userCardNumber: String,

    get cardNumber() {
      return this.userCardNumber ? this.userCardNumber.replace(/-/g, "") : null;
    },

    get cardError() {
      if (this.cardNumber && !Stripe.card.validateCardNumber(this.cardNumber)) {
        return "Invalid card number (ex: 4242-4242-4242).";
      }
    },

    userExpiry: String,

    get expiryParts() {
      if (this.userExpiry) {
        return this.userExpiry.split("-").map(function(p) {
          return parseInt(p, 10);
        });
      }
    },

    get expiryMonth() {
      return this.expiryParts && this.expiryParts[0];
    },

    get expiryYear() {
      return this.expiryParts && this.expiryParts[1];
    },

    get expiryError() {
      if (
        (this.expiryMonth || this.expiryYear) &&
        !Stripe.card.validateExpiry(this.expiryMonth, this.expiryYear)
      ) {
        return "Invalid expiration date (ex: 01-22).";
      }
    },

    userCVC: String,

    get cvc() {
      return this.userCVC ? parseInt(this.userCVC, 10) : null;
    },

    get cvcError() {
      if (this.cvc && !Stripe.card.validateCVC(this.cvc)) {
        return "Invalid CVC (ex: 123).";
      }
    }
  };

  pay(event) {
    event.preventDefault();

    Stripe.card.createToken(
      {
        number: this.cardNumber,
        cvc: this.cvc,
        exp_month: this.expiryMonth,
        exp_year: this.expiryYear
      },
      function(status, response) {
        if (status === 200) {
          alert("Token: " + response.id);
          // stripe.charges.create({
          //   amount: this.amount,
          //   currency: "usd",
          //   description: "Example charge",
          //   source: response.id,
          // })
        } else {
          alert("Error: " + response.error.message);
        }
      }
    );
  }
}

customElements.define("cc-payment", CCPayment);

Validate the form

The problem

We need to show a warning message when information is entered incorrectly and disable the form until they have entered it correctly.

To do that, we’ll add the following properties to the cc-payment element:

• isCardValid - returns true if the card is valid
• isCardInvalid - returns true if the card is invalid
• errorMessage - returns the error for the first form value that has an error.

What you need to know

• Use disabled:from to make an input disabled, like:

  <button disabled:from="this.isCardInvalid">...
  

The solution

Update the JavaScript tab to:

import { StacheElement } from "//unpkg.com/can@6/core.mjs";

Stripe.setPublishableKey("pk_test_zCC2JrO3KSMeh7BB5x9OUe2U");

class CCPayment extends StacheElement {
  static view = `
    <form on:submit="this.pay(scope.event)">
      {{# if(this.errorMessage) }}
        <div class="message">{{ this.errorMessage }}</div>
      {{/ if }}

      <input type="text" name="number" placeholder="Card Number"
          {{# if(this.cardError) }}class="is-error"{{/ if }}
          value:bind="this.userCardNumber">

      <input type="text" name="expiry" placeholder="MM-YY"
          {{# if(this.expiryError) }}class="is-error"{{/ if }}
          value:bind="this.userExpiry">

      <input type="text" name="cvc" placeholder="CVC"
          {{# if(this.cvcError) }}class="is-error"{{/ if }}
          value:bind="this.userCVC">

      <button disabled:from="this.isCardInvalid">Pay $\{{ this.amount }}</button>
    </form>
  `;

  static props = {
    amount: { default: 9.99 },

    userCardNumber: String,

    get cardNumber() {
      return this.userCardNumber ? this.userCardNumber.replace(/-/g, "") : null;
    },

    get cardError() {
      if (this.cardNumber && !Stripe.card.validateCardNumber(this.cardNumber)) {
        return "Invalid card number (ex: 4242-4242-4242).";
      }
    },

    userExpiry: String,

    get expiryParts() {
      if (this.userExpiry) {
        return this.userExpiry.split("-").map(function(p) {
          return parseInt(p, 10);
        });
      }
    },

    get expiryMonth() {
      return this.expiryParts && this.expiryParts[0];
    },

    get expiryYear() {
      return this.expiryParts && this.expiryParts[1];
    },

    get expiryError() {
      if (
        (this.expiryMonth || this.expiryYear) &&
        !Stripe.card.validateExpiry(this.expiryMonth, this.expiryYear)
      ) {
        return "Invalid expiration date (ex: 01-22).";
      }
    },

    userCVC: String,

    get cvc() {
      return this.userCVC ? parseInt(this.userCVC, 10) : null;
    },

    get cvcError() {
      if (this.cvc && !Stripe.card.validateCVC(this.cvc)) {
        return "Invalid CVC (ex: 123).";
      }
    },

    get isCardValid() {
      return (
        Stripe.card.validateCardNumber(this.cardNumber) &&
        Stripe.card.validateExpiry(this.expiryMonth, this.expiryYear) &&
        Stripe.card.validateCVC(this.cvc)
      );
    },

    get isCardInvalid() {
      return !this.isCardValid;
    },

    get errorMessage() {
      return this.cardError || this.expiryError || this.cvcError;
    }
  };

  pay(event) {
    event.preventDefault();

    Stripe.card.createToken(
      {
        number: this.cardNumber,
        cvc: this.cvc,
        exp_month: this.expiryMonth,
        exp_year: this.expiryYear
      },
      function(status, response) {
        if (status === 200) {
          alert("Token: " + response.id);
          // stripe.charges.create({
          //   amount: this.amount,
          //   currency: "usd",
          //   description: "Example charge",
          //   source: response.id,
          // })
        } else {
          alert("Error: " + response.error.message);
        }
      }
    );
  }
}

customElements.define("cc-payment", CCPayment);

Result

When complete, you should have a working credit card payment form like the following CodePen:

See the Pen Credit Card Guide (Simple) [Finished] by Bitovi (@bitovi) on CodePen.