Collect Cards

In this guide, we will set up PublicSquare Elements SDKs to capture cards in a frontend application and securely authorize and store the cardholder data while avoiding PCI requirements.

Getting Started

To get started, you will need a PublicSquare Account.

Sign Up

Sign In

Get your Publishable Key

Next you will need your Publishable Key. Go to your Developers section and click Reveal for your Publishable Key and copy the value.

Save the Publishable Key as it will be used in the next steps of this guide.

Configuring PublicSquare Elements

PublicSquare Elements are available for the following technologies. Click below for detailed instructions on how to install and configure them.

Javascript

React

Adding Card Elements

Once installed and configured, add the Card Elements to your application.

JavaScript

<input
  type="text"
  id="cardholderName"
  placeholder="Cardholder name"
  style={{ display: 'flex', width: '100%' }}
/>
<div id="cardNumber"></div>
<div style="display: flex;">
  <div id="cardExpirationDate" style="width: 100%;"></div>
  <div id="cardVerificationCode" style="width: 100%;"></div>
</div>

import { PublicSquare } from '@publicsquare/elements-js';

let publicsquare;
let cardNumberElement;
let cardExpirationDateElement;
let cardVerificationCodeElement;

async function init() {
  publicsquare = await new PublicSquare().init('<API_KEY>');

  // Creates Elements instances
  cardNumberElement = publicsquare.createCardNumberElement();
  cardNumberElement.mount('#cardNumber');

  cardExpirationDateElement = publicsquare.createCardExpirationDateElement();
  cardExpirationDateElement.mount('#cardExpirationDate');

  cardVerificationCodeElement = publicsquare.createCardVerificationCodeElement();
  cardExpirationDateElement.mount('#cardVerificationCode');
}

init();

React

import React, { useRef, useState } from 'react';
import {
  PublicSquareProvider,
  CardNumberElement,
  CardExpirationDateElement,
  CardVerifcationCodeElement,
  usePublicSquare,
} from '@publicsquare/elements-react';

export default function App() {
  const { publicsquare } = usePublicSquare();
  // Refs to get access to the Elements instance
  const cardholderNameRef = useRef(null);
  const cardNumberRef = useRef(null);
  const cardExpirationRef = useRef(null);
  const cardVerificationRef = useRef(null);

  return (
    <PublicSquareProvider apiKey={apiKey}>
      <input
        type="text"
        id="cardholderName"
        placeholder="Cardholder name"
        ref={cardholderNameRef}
        style={{ display: 'flex', width: '100%' }}
      />

      <CardNumberElement
        id="cardNumber"
        ref={cardNumberRef}
      />
      <div style={{ display: 'flex' }}>
        <div style={{ width: '100%' }}>
          <CardExpirationDateElement
            id="cardExpirationDate"
            ref={cardExpirationRef}
          />
        </div>
        <div style={{ width: '100%' }}>
          <CardVerificationCodeElement
            id="cardVerificationCode"
            ref={cardVerificationRef}
            cardBrand={cardBrand}
          />
        </div>
      </div>
    </PublicSquareProvider>
  );
}

Storing Cards

Now that you are cardholder data in your web application, it is time to store the card in your account.

To do this, we will call the create card method from the SDK, passing the Card Elements as data points in the payload.

Add a submit function along with a button to trigger it:

JavaScript

<!-- Form from above -->
<button id="submit">Submit</button>

async function init () {
  ...
  document.getElementById("submit").addEventListener("click", submit);
}

async function submit (e: FormEvent<HTMLFormElement>,) {
  try {
    const formData = new FormData(e.currentTarget)

    const card = await publicsquare.cards.create({
      cardholder_name: formData.cardholderName,
      card: {
        number: cardNumberElement,
        expiration_month: cardExpirationDateElement.month(),
        expiration_year: cardExpirationDateElement.year(),
        cvc: cardVerificationCodeElement,
      }
    });
    // store card.id in your database
  } catch (error) {
    console.error(error);
  }
}

init();

React

export default function App() {
  const submit = async () => {
    try {
      const card = await publicsquare?.cards.create({
        cardholder_name: cardholderNameRef.current,
        card: {
          number: cardNumberRef.current,
          expiration_month: cardExpirationRef.current.month(),
          expiration_year: cardExpirationRef.current.year(),
          cvc: cardVerificationRef.current,
        }
      });
      // store card.id in your database
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <PublicSquareProvider bt={bt}>
      ...
      <button onClick={submit}>Submit</button>
    </PublicSquareProvider>
  );
}

The created card object contains the non-sensitive information about the card:

{
  "id": "card_AjkCFKAYiTsjghXWMzoXFPMxj",
  "account_id": "acc_B518niGwGYKzig6vtrRVZGGGV",
  "environment": "test",
  "cardholder_name": "John Smith",
  "last4": "4242",
  "exp_month": "12",
  "exp_year": "2025",
  "brand": "visa",
  "fingerprint": "CC2XvyoohnqecEq4r3FtXv6MdCx4TbaW1UUTdCCN5MNL",
  "created_at": "2024-06-30T01:02:29.212Z",
  "modified_at": "2024-06-30T01:02:29.212Z"
}

You can safely store the card's id value in your database to link it with the appropriate payment or customer association.

You can optionally pass in a customer_id to associate with an existing Created Customer and billing_details to remove the requirement to pass them when Creating a Payment.

Conclusion

Following this guide, you have successfully collected a customer's credit card. To use this card, proceed with the Process Payments guide.