@tonder.io/ionic-full-sdk 0.0.24-beta → 0.0.26-beta

package/src/helpers/template.ts

@@ -1,493 +1,521 @@
-import { getCardType } from './utils';
-
-export type CollectorIds = {
-  holderName: string,
-  cardNumber: string,
-  expirationMonth: string,
-  expirationYear: string,
-  cvv: string,
-  tonderPayButton: string,
-  msgError: string,
-  msgNotification: string,
-  cardsListContainer: string
-}
-
-export type Card = {
-  card_scheme: string,
-  cardholder_name: string,
-  card_number: string,
-  expiration_month: string,
-  expiration_year: string,
-  skyflow_id: string
-}
-
-export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
-<div class="container-tonder">
-  <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
-  <div class="pay-new-card">
-    <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
-    <label class="card-item-label-new" for="new">
-      <img class="card-image" src="${getCardType("XXXX")}" />
-      <div class="card-number">Pagar con tarjeta</div>
-    </label>
-  </div>
-  <div class="container-form">
-    <div id="${collectorIds.holderName}" class="empty-div"></div>
-    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
-    <div class="collect-row">
-      <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
-      <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
-      <div id="${collectorIds.cvv}" class="empty-div"></div>
-    </div>
-    <div class="checkbox">
-      <input id="save-checkout-card" type="checkbox">
-      <label for="save-checkout-card">
-        Guardar tarjeta para futuros pagos
-      </label>
-    </div>
-    <div id="${collectorIds.msgError}"></div>
-    <div id="${collectorIds.msgNotification}"></div>
-  </div>
-  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
-</div>
-
-${external ? `` : `<style>
-
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
-.error-custom-inputs-tonder {
-  background-color: white;
-  position: absolute;
-  left: 0px;
-  bottom: -1px;
-  width: 100%;
-  font-size: 12px;
-  color: red;
-  font-family: "Inter", sans-serif !important;
-}
-
-.expiration-year .error-custom-inputs-tonder {
-  background-color: white;
-  position: absolute;
-  left: 0px;
-  bottom: 3px;
-  width: 100%;
-  font-size: 12px;
-  color: red;
-  font-family: "Inter", sans-serif !important;
-}
-
-.container-tonder {
-  background-color: #F9F9F9;
-  margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
-  overflow: hidden;
-  transition: max-height 0.5s ease-out;
-  max-width: 600px;
-  border: solid 1px #e3e3e3;
-}
-
-.collect-row {
-  display: flex !important;
-  justify-content: space-between !important;
-  width: 100% !important;
-}
-
-.collect-row > :first-child {
-  min-width: 120px; !important
-}
-
-.expiration-year {
-  position: relative !important;
-  padding-top: 24px !important;
-}
-
-.empty-div {
-  position: relative;
-  height: 80px !important;
-  margin-top: 2px;
-  margin-bottom: 4px;
-  margin-left: 10px !important;
-  margin-right: 10px !important;
-}
-
-.error-container{
-  color: red !important;
-  background-color: #FFDBDB !important;
-  margin-bottom: 13px !important;
-  font-size: 80% !important;
-  padding: 8px 10px !important;
-  border-radius: 10px !important;
-  text-align: left !important;
-}
-
-.message-container{
-  color: #3bc635 !important;
-  background-color: #DAFCE4 !important;
-  margin-bottom: 13px !important;
-  font-size: 80% !important;
-  padding: 8px 10px !important;
-  border-radius: 10px !important;
-  text-align: left !important;
-}
-
-.pay-button {
-  font-size: 16px;
-  font-weight: bold;
-  min-height: 2.3rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-  border: none;
-  background-color: #000;
-  color: #fff;
-  margin-bottom: 10px;
-  display: none;
-  font-family: "Inter", sans-serif !important;
-}
-
-.pay-button:disabled, pay-button[disabled] {
-  background-color: #B9B9B9;
-}
-
-.lds-dual-ring {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-}
-
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 6px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .payment_method_zplit {
-    font-size: 16px !important;
-    width: 100% !important;
-  }
-
-  .payment_method_zplit  label img {
-    display: none !important;
-  }
-}
-
-.cards-list-container {
-  display: flex;
-  flex-direction: column;
-  padding: 0px 10px 0px 10px;
-  gap: 33% 20px;
-}
-
-.checkbox label {
-  margin-left: 10px;
-  font-size: '12px';
-  font-weight: '500';
-  color: #1D1D1D;
-  font-family: "Inter", sans-serif !important;
-}
-
-.checkbox {
-  margin-top: 10px;
-  margin-bottom: 20px;
-  width: 100%;
-  text-align: left;
-}
-
-.pay-new-card {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-.pay-new-card .card-number {
-  font-size: 16px;
-  font-family: "Inter", sans-serif !important;
-}
-
-.card-image {
-  width: 39px;
-  height: 24px;
-  text-align: left;
-}
-
-.card-item-label-new {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-.card_selected {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  appearance: none;
-  cursor: pointer;
-  border-radius: 100%;
-  border: 1px #3bc635 solid;
-  color: #3bc635;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.card_selected:before {
-  width: 8px;
-  height: 8px;
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: block;
-  transform: translate(-50%, -50%);
-  border-radius: 100%;
-  background-color: #3bc635;
-  opacity: 0;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.card_selected:checked {
-  border: 1px #3bc635 solid;
-  position: relative;
-  width: 16px;
-  height: 16px;
-  appearance: none;
-  cursor: pointer;
-  border-radius: 100%;
-  color: #3bc635;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.card_selected:checked:before {
-  content: "";
-  border: 1px #3bc635 solid;
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: block;
-  transform: translate(-50%, -50%);
-  border-radius: 100%;
-  background-color: #3bc635;
-  opacity: 50;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.card_selected:hover:before {
-  width: 8px;
-  height: 8px;
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: block;
-  transform: translate(-50%, -50%);
-  border-radius: 100%;
-  background-color: #3bc635;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  opacity: 10;
-}
-
-</style>
-`}`
-
-export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
-  
-  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
-    return `${total}
-    <div class="card-item" id="card_container-${card.skyflow_id}">
-        <input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
-        <label class="card-item-label" for="${card.skyflow_id}">
-          <img class="card-image" src="${getCardType(card.card_scheme)}" />
-          <div class="card-number">${card.card_number}</div>
-          <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
-          <div class="card-delete-icon">
-            <button id="delete_button_${card.skyflow_id}" class="card-delete-button">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
-              </svg>
-            </button>
-          </div>
-        </label>
-    </div>`
-  }, ``);
-
-  const cardItemStyle = external ? '' : `
-    <style>
-
-      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
-      .card-item-label {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: #1D1D1D;
-        gap: 33% 20px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
-        width: 90%;
-      }
-
-      .card-item {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        gap: 33% 20px;
-      }
-
-      .card-item .card-number {
-        font-size: 16px;
-        font-family: "Inter", sans-serif !important;
-      }
-
-      .card-item .card-expiration {
-        font-size: 16px;
-        font-family: "Inter", sans-serif !important;
-      }
-
-      .card-image {
-        width: 39px;
-        height: 24px;
-        text-align: left;
-      }
-
-      .card-delete-button {
-        background-color: transparent !important;
-        color: #000000 !important;
-      }
-
-      .card-delete-button:hover {
-        background-color: transparent !important;
-        color: #D91C1C !important;
-      }
-
-      .card_selected {
-        position: relative;
-        width: 16px;
-        height: 16px;
-        appearance: none;
-        cursor: pointer;
-        border-radius: 100%;
-        border: 1px #3bc635 solid;
-        color: #3bc635;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-      }
-      
-      .card_selected:before {
-        width: 8px;
-        height: 8px;
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: block;
-        transform: translate(-50%, -50%);
-        border-radius: 100%;
-        background-color: #3bc635;
-        opacity: 0;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-      }
-      
-      .card_selected:checked {
-        border: 1px #3bc635 solid;
-        position: relative;
-        width: 16px;
-        height: 16px;
-        appearance: none;
-        cursor: pointer;
-        border-radius: 100%;
-        color: #3bc635;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-      }
-      
-      .card_selected:checked:before {
-        content: "";
-        border: 1px #3bc635 solid;
-        width: 8px;
-        height: 8px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: block;
-        transform: translate(-50%, -50%);
-        border-radius: 100%;
-        background-color: #3bc635;
-        opacity: 50;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-      }
-      
-      .card_selected:hover:before {
-        width: 8px;
-        height: 8px;
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: block;
-        transform: translate(-50%, -50%);
-        border-radius: 100%;
-        background-color: #3bc635;
-        transition-property: opacity;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        opacity: 10;
-      }
-
-    </style>
-  `
-  const cardItem = `
-  ${cardItemsHTML}
-  ${cardItemStyle}
-  `
-  return cardItem;
+import { getCardType } from './utils';
+
+export type CollectorIds = {
+  holderName: string,
+  cardNumber: string,
+  expirationMonth: string,
+  expirationYear: string,
+  cvv: string,
+  tonderPayButton: string,
+  tonderSaveCardButton: string,
+  msgError: string,
+  msgNotification: string,
+  cardsListContainer: string
+}
+
+export type Card = {
+  card_scheme: string,
+  cardholder_name: string,
+  card_number: string,
+  expiration_month: string,
+  expiration_year: string,
+  skyflow_id: string
+}
+
+export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEnrollmentCard: boolean = false) => `
+<div class="container-tonder">
+  <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
+  ${!isEnrollmentCard ? `
+    <div class="pay-new-card">
+      <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
+      <label class="card-item-label-new" for="new">
+        <img class="card-image" src="${getCardType("XXXX")}" />
+        <div class="card-number">Pagar con tarjeta</div>
+      </label>
+    </div>
+  `:``}
+  <div class="container-form">
+    <div id="${collectorIds.holderName}" class="empty-div"></div>
+    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
+    <div class="collect-row">
+      <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
+      <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
+      <div id="${collectorIds.cvv}" class="empty-div"></div>
+    </div>
+    ${!isEnrollmentCard ? `
+      <div class="checkbox">
+        <input id="save-checkout-card" type="checkbox">
+        <label for="save-checkout-card">
+          Guardar tarjeta para futuros pagos
+        </label>
+      </div>
+    `:``}
+    <div id="${collectorIds.msgError}"></div>
+    <div id="${collectorIds.msgNotification}"></div>
+  </div>
+  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
+  <button id="${collectorIds.tonderSaveCardButton}" class="save-card-button">Guardar</button>
+</div>
+
+${external ? `` : `<style>
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
+.error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: -1px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
+.expiration-year .error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: 3px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
+.container-tonder {
+  background-color: #F9F9F9;
+  margin: 0 auto !important;
+  padding: 30px 10px 30px 10px;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  max-width: 600px;
+  border: solid 1px #e3e3e3;
+}
+
+.collect-row {
+  display: flex !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+}
+
+.collect-row > :first-child {
+  min-width: 120px; !important
+}
+
+.expiration-year {
+  position: relative !important;
+  padding-top: 24px !important;
+}
+
+.empty-div {
+  position: relative;
+  height: 80px !important;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+
+.error-container{
+  color: red !important;
+  background-color: #FFDBDB !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
+.message-container{
+  color: #3bc635 !important;
+  background-color: #DAFCE4 !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
+.pay-button {
+  font-size: 16px;
+  font-weight: bold;
+  min-height: 2.3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  border: none;
+  background-color: #000;
+  color: #fff;
+  margin-bottom: 10px;
+  display: none;
+  font-family: "Inter", sans-serif !important;
+}
+
+.pay-button:disabled, pay-button[disabled] {
+  background-color: #B9B9B9;
+}
+
+.save-card-button {
+  font-size: 16px;
+  font-weight: bold;
+  min-height: 2.3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  border: none;
+  background-color: #000;
+  color: #fff;
+  margin-bottom: 10px;
+  margin-top: 25px;
+  display: none;
+  font-family: "Inter", sans-serif !important;
+}
+
+.save-card-button:disabled, save-card-button[disabled] {
+  background-color: #B9B9B9;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .payment_method_zplit {
+    font-size: 16px !important;
+    width: 100% !important;
+  }
+
+  .payment_method_zplit  label img {
+    display: none !important;
+  }
+}
+
+.cards-list-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+  gap: 33% 20px;
+}
+
+.checkbox label {
+  margin-left: 10px;
+  font-size: '12px';
+  font-weight: '500';
+  color: #1D1D1D;
+  font-family: "Inter", sans-serif !important;
+}
+
+.checkbox {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  width: 100%;
+  text-align: left;
+}
+
+.pay-new-card {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.pay-new-card .card-number {
+  font-size: 16px;
+  font-family: "Inter", sans-serif !important;
+}
+
+.card-image {
+  width: 39px;
+  height: 24px;
+  text-align: left;
+}
+
+.card-item-label-new {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.card_selected {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  border: 1px #3bc635 solid;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked {
+  border: 1px #3bc635 solid;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked:before {
+  content: "";
+  border: 1px #3bc635 solid;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 50;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:hover:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  opacity: 10;
+}
+
+</style>
+`}`
+
+export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
+  
+  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
+    return `${total}
+    <div class="card-item" id="card_container-${card.skyflow_id}">
+        <input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
+        <label class="card-item-label" for="${card.skyflow_id}">
+          <img class="card-image" src="${getCardType(card.card_scheme)}" />
+          <div class="card-number">${card.card_number}</div>
+          <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
+          <div class="card-delete-icon">
+            <button id="delete_button_${card.skyflow_id}" class="card-delete-button">
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
+              </svg>
+            </button>
+          </div>
+        </label>
+    </div>`
+  }, ``);
+
+  const cardItemStyle = external ? '' : `
+    <style>
+
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
+      .card-item-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 33% 20px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        width: 90%;
+      }
+
+      .card-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 20px;
+      }
+
+      .card-item .card-number {
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
+      }
+
+      .card-item .card-expiration {
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
+      }
+
+      .card-image {
+        width: 39px;
+        height: 24px;
+        text-align: left;
+      }
+
+      .card-delete-button {
+        background-color: transparent !important;
+        color: #000000 !important;
+      }
+
+      .card-delete-button:hover {
+        background-color: transparent !important;
+        color: #D91C1C !important;
+      }
+
+      .card_selected {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        border: 1px #3bc635 solid;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 0;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked {
+        border: 1px #3bc635 solid;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked:before {
+        content: "";
+        border: 1px #3bc635 solid;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 50;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:hover:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        opacity: 10;
+      }
+
+    </style>
+  `
+  const cardItem = `
+  ${cardItemsHTML}
+  ${cardItemStyle}
+  `
+  return cardItem;
 }