Card Element
The Card element provides a secure, encrypted form for collecting payment details including card number, expiry, and CVC. Card data is encrypted before it reaches your servers.
<body>
<div id="app">
<form>
<div id="card-details"></div>
</form>
</div>
<script src="https://js.framepayments.com/v1/index.js"></script>
<script>
(async () => {
const frame = await Frame.init("<PUBLISHABLE_KEY>");
const card = await frame.createElement("card", { theme: frame.themes("clean") });
card.on("complete", payload => {
console.log(payload)
})
card.mount("#card-details");
})();
</script>
</body>
API Reference
frame.createElement("card", options)
Initializes a Card UI Component, simplifying the collection of payment details.
options
Options
Optional, valid options clean, minimal, or material
If set to true, the component will automatically steal focus when it mounts.
Allows you to configure the fields displayed in the component. Possible values are name, number, expiry, and cvc. By default only number, expiry and cvc will be shown.
Allows you to customize the text shown inside of the component.
const frame = await Frame.init("<PUBLISHABLE_KEY>");
const card = await frame.createElement("card", {
theme: frame.themes("clean")
});
card.mount("#card-details");
card.mount()
Mounts the component to a specified DOM node.
card.mount("#card-details");
card.on("change")
Subscribes to changes made to the component. Access encrypted card details from the payload passed to the callback.
Payload
Information about the entered card, including meta data as well as the encrypted number and CVC.
Validation errors related to the card details.
Whether or not there are any errors shown. Validation occurs as the user loses focus on a field. You can force validation to occur with the .validate method.
Whether or not all of the fields have been filled out successfully with valid values.
card.on("change", payload => {
console.log(payload.card.number);
});
card.on("complete")
Fires once the user has successfully filled out all fields in the Card Component with valid values.
Payload
Information about the entered card, including meta data as well as the encrypted number and CVC.
Validation errors related to the card details.
Whether or not there are any errors shown. Validation occurs as the user loses focus on a field. You can force validation to occur with the .validate method.
Whether or not all of the fields have been filled out successfully with valid values.
card.on("complete", payload => {
console.log(payload.card.number);
});
card.on("ready")
Fires once the component has fully loaded and is ready to be displayed.
card.on("ready", () => {
document.getElementById("loading").addClass("hide");
document.getElementById("card-details").removeClass("hide");
});
card.on("error")
Fires if the component fails to load. Use the change event to respond to validation errors instead.
card.on("error", () => {
alert("Opps, something went wrong!");
});
card.update(options)
Updates the configuration for the component after initialization. Any arguments passed will be merged with the initial configuration.
options
Options
Optional, valid options clean, minimal, or material
If set to true, the component will automatically steal focus when it mounts.
Allows you to configure the fields displayed in the component. Possible values are name, number, expiry, and cvc. By default only number, expiry and cvc will be shown.
Allows you to customize the text shown inside of the component.
card.update({
translations: {
number: {
label: "Your card number"
}
}
});
card.validate()
Manually triggers validation for the card details fields.
card.validate();
card.unmount()
Removes the component from the DOM.
card.unmount();