Add an HTML credit card as a smart field in a summary view

Context: As a user I want to display the credit card infos of a client in a nice and visual way
const { collection } = require('forest-express-sequelize');
const { companies, documents } = require('../models');
// This file allows you to add to your Forest UI:
// - Smart actions: <>
// - Smart fields: <>
// - Smart relationships: <>
// - Smart segments: <>
collection('companies', {
actions: [],
fields: [
field: "Creditcard",
type: "String",
get: (company) => {
if (company.creditCard) {
return `<div class="card-wrapper">
<div class="card-container" style="font-size: 14px; border-radius: 10px; width: 250px; height: 140px; background-color: #444857; color: white; padding: 10px">
<div class="card-number-container" style="margin-top: 5px">
<div class="card-info-title" style="color: #9399af; ">card number</div>
<div class="card-info-value" style="font-size: 12px">${company.creditCard.card_number.match(/.{1,4}/g).join(' ')}</div>
<div class="card-name-date-container" style= "display: flex; margin-top: 20px">
<div class="card-name-container">
<div class="card-info-title" style="color: #9399af; ">card holder</div>
<div class="card-info-value" style="font-size: 12px">${company.creditCard.card_holder ? company.creditCard.card_holder :}</div>
<div class="card-date-container" style="margin: auto">
<div class="card-info-title" style="color: #9399af; ">expires at</div>
<div class="card-info-value" style="font-size: 12px">${company.creditCard.expiry_date}</div>
segments: [],
Use the rich text editor widget in order to interpret HTML in your field.