Implementación del CustomStyle

https://elements.sandbox.deuna.io/click_to_pay?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}&cssFile=UUID_FROM_DEUNA

https://elements.sandbox.deuna.io/vault?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}&cssFile=UUID_FROM_DEUNA

https://pay.sandbox.deuna.io/now/{{order_token}}?cssFile=UUID_FROM_DEUNA

// Recibir el evento de la información de la tarjeta
window.addEventListener('message', (event) => {
   let firstParsedData;
   if (typeof event.data === 'string') {
     firstParsedData = JSON.parse(event.data);
    } else {
     firstParsedData = event.data;
    }

    // La información de la tarjeta viene en el "parsedData" en el campo "metadata"
    /*
        metadata: {
           cardBin: number,
           cardBran: string
        }
    */
    const parsedData = JSON.parse(firstParsedData);

    // Este evento se dispara cuando el usuario escribe los primeros 6 dígitos de su tarjeta
    if (
       parsedData &&
       parsedData.type === "onBinDetected"
     ) {
       iframeRef.current?.contentWindow?.postMessage(
         JSON.stringify({
           type: "setCustomCSS",
           data: getCustomCSS(parsedData)
         }),
        '*'
        );
     } 
});

const cardBrands = {
  Mastercard: '#E94F37',
  Visa: '#04264E'
};

// Ejemplo de función helper de getCustomCSS
export const getCustomCSS = (parsedData: any) => ({
  theme: {
    colors: {
      primaryTextColor: "#023047",
      backgroundSecondary: "#8ECAE6",
      backgroundPrimary: "#8ECAE6",
      buttonPrimaryFill: "#FFB703",
      buttonPrimaryHover: "#FFB703",
      buttonPrimaryText: "#000000",
      buttonPrimaryActive: "#FFB703"
    }
  },
  CardInfoPattern: {
    title: "Ingresa los datos de tu tarjeta",
    subtitle: {
      content: "Ingresa los datos de tu tarjeta 🔅"
    }
  },
  UpperTagPattern: {
    title: "Tienes 10% de descuento",
    description: `Debido a que tu tarjeta es ${parsedData.data?.metadata?.cardBrand}, tienes descuento`,
    style: {
      color: '#F6F7EB',
      backgroundColor: `${(cardBrands as any)[parsedData.data?.metadata?.cardBrand]}`
    }
  },
  UserCardPattern: {
    translations: {
      es: {
        addNewCard: {
          info: "Agregar nueva tarjeta 🙂"
        },
        moreOptions: {
          payWith: "👀 Pagar con"
        }
      }
    }
  },
  CardPattern: {
    translations: {
      es: {
        inputs: {
          identityNumber: {
            label: "this is a custom label"
          },
          cardNumber: {
            label: "This is a number custom"
          },
          cardHolder: {
            label: "This is a holder custom"
          }
        }
      }
    }
  },
  TermsConditionsPattern: {
    showForGuest: false,
    showForAuth: false,
    legalMessage: "Al continuar, estás aceptando nuestras",
    connectorText: "and",
    hideCompanyDisclaimer: true
  },
  PaymentButtonPattern: {
    label: "Pagar",
    showOrderTotal: true,
    styles: {
      padding: "10px 20px",
      borderRadius: "25px"
    }
  },
  PoweredByPatter: {
    url: "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
    hideText: true,
		hide: false, 
    imageStyle: {
      filter: "none",
      width: "50px",
      heigh: "200px"
   				 }
 			 }
});

{
  "theme": {
    "colors": {
      "buttonPrimaryFill": "#8A2BE2"
    }
  },
  "CardInfoPattern": {
    "title": "¡Dale vida a tu compra!🤩",
    "header": {
      "content": "Introduce los detalles de tu tarjeta aquí."
    }
  },
  "TermsConditionsPattern": {
    "showForGuest": true,
    "showForAuth": false,
    "hideCompanyDisclaimer": true
  },
  "PaymentButtonPattern": {
    "label": "Pagar",
    "showOrderTotal": true,
    "styles": {
      "padding": "10px 20px",
      "borderRadius": "25px"
   },
   "PoweredByPattern": {
    "hide": true
   }
  }
}

{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#5F529E"
    },
     "typography": {
       "primaryFontFamily": "Lobster"
     },
 		"inputs": {
			"borderRadius": "50px",
		},
		"buttons": {
			"borderRadius": "20px"
		}  
  },
  "HeaderPattern": {
            "overrides": {
                "Logo": {
                    "props": {
                        "url":"https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
                        "position": "center",
                        "style": {
	                        "min-width": "150px"
                        }
                    }
                }
            }
        },
  "OtpPage": {
    "overrides": {
      "Header": {
        "props": {
          "overrides": {
            "Logo": {
              "props": {
                "url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg"
              }
            }
          }
        }
      },
      "Headings": {
        "props": {
          "title": "Ingresa el código de verificación",
          "description": "Para ver tus tarjetas guardadas ingresa el código enviado a"
        }
      },
      "OtpChangeChannelButton": {
        "props": {
          "description": {
            "sms": "Enviar código por correo",
            "email": "Enviar código por SMS"
          }
        }
      },
      "ContinueAsGuestButton": {
        "props": {
          "description": "Continuar sin ingresar el código"
        }
      }
    }
  },
  "CardInfoPattern": {
    "title": "Pago con tarjeta de crédito o débito",
    "subtitle": {
      "content": "Ingresa los datos de tu tarjeta"
    }
  },
  "CardPattern": {
    "translations": {
      "es": {
        "inputs": {
          "identityNumber": {
            "label": "Número de documento"
          },
          "identityDocument": {
            "label": {
              "CO": "CO: Cédula / Doc de identidad",
              "CL": "CL: RUT/DNI",
              "EC": "EC: Cédula / Doc de identidad",
              "MX": "MX: Otro documento",
              "BR": "BR: CPF/ CNPJ del titular",
              "AR": "AR: DNI / Doc de identidad",
              "UY": "UY: Cédula / Doc de identidad"
            }
          },
          "cardNumber": {
            "label": "Número de tarjeta"
          },
          "cardHolder": {
            "label": "Nombre en la tarjeta"
          },
          "installment": {
            "label": "Selecciona las cuotas",
            "withoutInstallments": "Sin cuotas"
          }
        }
      }
    }
  },
  "TermsConditionsPattern": {
    "showForGuest": true,
    "showForAuth": false,
    "legalMessage": "Al continuar aceptas las",
    "connectorText": "y",
    "hideCompanyDisclaimer": false
  },
  "PaymentButtonPattern": {
    "label": "Pagar",
    "showOrderTotal": true,
    "styles": {
      "padding": "10px 20px",
      "borderRadius": "25px"
    }
  },
   "PoweredByPattern": {
    "url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
    "hideText": true,
		"hide": false, 
    "imageStyle": {
      "filter": "none",
      "width": "50px",
      "height": "200px"
   				 }
 			 },
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Agregar una tarjeta"
        },
        "moreOptions": {
          "payWith": "Tarjeta seleccionada"
        },
        "paymentMethods": {
          "seeAllMyCards": "Ver tarjetas guardadas",
          "expiredCard": "Tarjeta expirada",
          "warningExpiredCard": "Selecciona un método de pago disponible",
          "confirmDeleteMethodTitle": "Eliminar esta tarjeta",
          "deleteMainText": "Eliminar",
          "confirmDeleteMethodAccept": "Confirmar",
          "confirmDeleteMethodCancel": "Cancelar",
          "confirmDeleteMethod": "Ten en cuenta que al eliminarla no podrás restaurarla."
        }
      }
    }
  }
}