Skip to main content

​
Appearance

const card = elements.create("card", {
  theme: "default",
  style: {
    base: {
      fontSize: "16px",
      color: "#0f172a"
    },
    focus: {
      borderColor: "#16a34a"
    },
    invalid: {
      color: "#dc2626"
    }
  }
});

​
Useful events

EventPurpose
readyenable the submit button
changeclear stale validation messages and react to field validity
errordisplay internal SDK or network issues

​
Example

card.on("ready", () => {
  submitButton.disabled = false;
});

card.on("change", (event) => {
  messageEl.textContent = "";
  console.log(event.valid, event.brand);
});