{
  "logoUrl": "https://assets-global.website-files.com/62e806ed6cc7b20ca6dc2b93/64c2aee779502b3676e1024a_Logo%20DEUNA.png",
  "theme": {
    "mainColor": "#FFC0CB",
    "secondaryColor": "#7FFFD4"
  },
  "title": "Pago con tarjeta crédito o débito",
  "header": {
    "content": "Ingresa los datos de tu tarjeta",
    "style": {
      "color": "#333333"
    }
  },
  "header2": {
    "content": "Detalles de Pago",
    "style": {
      "color": "#393E41"
    }
  },
  "nameInput": {
    "content": "Nombre",
    "placeholder": "Escribe Aquí..",
    "style": {
      "color": "#393E41"
    }
  },
  "lastnameInput": {
    "content": "Apellido",
    "placeholder": "Escribe Aquí..",
    "style": {
      "color": "#393E41"
    }
  },
  "hidePoweredBy": false,
  "saveButton": {
    "content": "Pagar",
    "style": {
      "color": "#F6F7EB",
      "backgroundColor": "#7BCCE5"
    }
  },
  "upperTag": {
    "title": {
      "content": "Upper Tag"
    },
    "description": {
      "content": "Aquí puedes agregar un descuento superior"
    }
  },
  "lowerTag": {
    "title": {
      "content": "Lower Tag"
    },
    "description": {
      "content": "Aquí puedes agregar un descuento inferior"
    },
    "style": {
      "color": "#F6F7EB",
      "backgroundColor": "#FFFF00"
    }
  },
  "cardHolderInput": {
    "content": "Nombre en la tarjeta"
  },
  "cardNumberInput": {
    "content": "Número de tarjeta"
  },
  "installmentsInput": {
    "content": "Cuotas"
  },

  "legalMessageText": "Al hacer clic en comprar, aceptar las",
  "showOrderTotal": true,
  "termsAndConditions": {
    "showForGuest": true,
    "showForAuth": true,
    "hideCompanyDisclaimer": false
  }
}

curl --location --request POST '{{base_url}}/merchants/{{merchant_id}}/checkout/configurations' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IlZOUDlOVGM2SWdxVDhhYVRqYlFnOTRPa2wzZHgtLWZfQjdNdXdTNmYzdmMiLCJ0eXAiOiJKV1QifQ.eyJlbWFpbCI6ImRldmVsb3BlcnNAZ2V0ZHVuYS5jb20iLCJleHAiOjE3MTQyNTc2NjcsImlhdCI6MTcxMzk5ODQ2NywibWVyY2hhbnRfaWQiOm51bGwsIm5ldHdvcmtfaWQiOm51bGwsInJvbGUiOiJzdXBlcmFkbWluIiwic3RvcmVfY29kZSI6bnVsbCwic3ViIjoiMSJ9.ClSQrcThoo6eKQqmbwQgzFduAZkUfhu1kynqMV-eMQZHH0BbCOpu3FQfzyIOkgSOO13LQc9d5C-sV7sriUu7PgDbRedWlnuyAgM0E057tjOXXbpmv1zK-yWz17xpoGaFJMA4lKynxG1PSeTtGek6SBwE0pd8oFehe_-dkK7yh8n5rL2keCoiaURuZnCcQGEb5vfGs84yosvez4J-Nm0kh19_tr7RithSd421EWSSXamsv7QZQB59FXiXLHM4AAPZSxvuc8gt3Mgj4HJe624RRVCcHBZQK7Cgti91JyZ10s95JoGr93vn4T_yxO-8s0wbQVkzYJbO7Q6ay79cuBDsbIKRAkgpZG-jB42-_0Nde6sDAawYFTYdcbMFuDJiK1VbkLXCF6NwS4ASG0L8VCnxWnfmTfiGvl-ZziRhF7FCGNEgwVbiBPuzfZd6sAJlOe_dY5t14IGlm2QzWa-niZxz0M0N3Q3_XeVVhP39hihg2cLUB5sqJj5_EGthI84-CKmU_7e0VRcbJhAKtg8GgpHcppWcV6dy3uj8ABuB_t55PUM_Bd9wbmvYBtesvakLAF9R0zmIRpAn5gfdPIL5Zt6gGheo1Ptn2FmD2UxnVXveg-J0jBRqNGSMCv_OOuHxxBDdL92N6bZqHT6WzLYnxte_ZHEwMrCjvVyEd2kORXPEBI0' \
--header 'Cookie: AWSALB=096u+D212v/57f6ijBB544CvL7oTM8O2rowoCEJ6gS9tXplw/h0/xAOQoY3ZL59jDbvWLN3xSWvfPXd11eqvgQzlAgiQNF7z+URIWNCev3ht2AgTr0S2hKQohmAJ; AWSALBCORS=096u+D212v/57f6ijBB544CvL7oTM8O2rowoCEJ6gS9tXplw/h0/xAOQoY3ZL59jDbvWLN3xSWvfPXd11eqvgQzlAgiQNF7z+URIWNCev3ht2AgTr0S2hKQohmAJ; AWSALB=zKTuhqTmSeuix1M/1pTj94W+dih3P6/vy6u6fBNJEp5norx03QQBWFlZ03Qki8Ni9CiqLXiAuJui4scrCW8MxGQzP8nKfPs9tino8DwWM6SQmxiomLaftNGERg/R; AWSALBCORS=zKTuhqTmSeuix1M/1pTj94W+dih3P6/vy6u6fBNJEp5norx03QQBWFlZ03Qki8Ni9CiqLXiAuJui4scrCW8MxGQzP8nKfPs9tino8DwWM6SQmxiomLaftNGERg/R; AWSALB=uKe+jxTFaHUQinMshpBZFQjfw6M5br+WR7m/aYUYW4/q0EgQyWOXF8FTaBjkTk6w4a1rK5k3K1j0kA1P194XJXg+JrZcP3l54cfzBfzjE24/lqbBmk/JOz7MCHPo; AWSALBCORS=uKe+jxTFaHUQinMshpBZFQjfw6M5br+WR7m/aYUYW4/q0EgQyWOXF8FTaBjkTk6w4a1rK5k3K1j0kA1P194XJXg+JrZcP3l54cfzBfzjE24/lqbBmk/JOz7MCHPo; AWSALB=b5IFrxTGYo8NDVZhW3MgBZojz6G7XWQ1gfTFxB0X4kEtcViPMqzBkiaEy/OSSieHTL33YGRRqFxMf7rb2DAzNg/fWLYHaS5tCLaFT6Az3Y2HAJiF04oCveba/K+M; AWSALBCORS=b5IFrxTGYo8NDVZhW3MgBZojz6G7XWQ1gfTFxB0X4kEtcViPMqzBkiaEy/OSSieHTL33YGRRqFxMf7rb2DAzNg/fWLYHaS5tCLaFT6Az3Y2HAJiF04oCveba/K+M' \
--data '{
    "elements_config": {
        "user_authentication_flow": false,
        "init_with_guest_user": true,
        "theme_config": [
            {
                "id": "{theme_config_id}",
                "name": "theme1",
                "config": "{\n  \"title\": \"¡Dale vida a tu compra!🤩\",\n  \"header\": {\n    \"content\": \"Introduce los detalles de tu tarjeta aquí.\"\n  },\n  \"hidePoweredBy\": true,\n  \"saveButton\": {\n    \"content\": \"Pagar\",\n     \"style\": {\n      \"backgroundColor\": \"#866DE9\",\n      \"color\": \"#ffffff\",\n      \"padding\": \"10px 20px\",\n      \"borderRadius\": \"25px\",\n      \"cursor\": \"pointer\"\n    }\n  },\n  \"termsAndConditions\": {\n    \"showForGuest\": true,\n    \"showForAuth\": false,\n    \"hideCompanyDisclaimer\": true\n  },\n  \"showOrderTotal\": true\n}\n"
            }
        ]
    }
}'

curl --location --request POST '{{base_url}}/merchants/{{merchant_id}}/checkout/configurations' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IlZOUDlOVGM2SWdxVDhhYVRqYlFnOTRPa2wzZHgtLWZfQjdNdXdTNmYzdmMiLCJ0eXAiOiJKV1QifQ.eyJlbWFpbCI6ImRldmVsb3BlcnNAZ2V0ZHVuYS5jb20iLCJleHAiOjE3MTQyNTc2NjcsImlhdCI6MTcxMzk5ODQ2NywibWVyY2hhbnRfaWQiOm51bGwsIm5ldHdvcmtfaWQiOm51bGwsInJvbGUiOiJzdXBlcmFkbWluIiwic3RvcmVfY29kZSI6bnVsbCwic3ViIjoiMSJ9.ClSQrcThoo6eKQqmbwQgzFduAZkUfhu1kynqMV-eMQZHH0BbCOpu3FQfzyIOkgSOO13LQc9d5C-sV7sriUu7PgDbRedWlnuyAgM0E057tjOXXbpmv1zK-yWz17xpoGaFJMA4lKynxG1PSeTtGek6SBwE0pd8oFehe_-dkK7yh8n5rL2keCoiaURuZnCcQGEb5vfGs84yosvez4J-Nm0kh19_tr7RithSd421EWSSXamsv7QZQB59FXiXLHM4AAPZSxvuc8gt3Mgj4HJe624RRVCcHBZQK7Cgti91JyZ10s95JoGr93vn4T_yxO-8s0wbQVkzYJbO7Q6ay79cuBDsbIKRAkgpZG-jB42-_0Nde6sDAawYFTYdcbMFuDJiK1VbkLXCF6NwS4ASG0L8VCnxWnfmTfiGvl-ZziRhF7FCGNEgwVbiBPuzfZd6sAJlOe_dY5t14IGlm2QzWa-niZxz0M0N3Q3_XeVVhP39hihg2cLUB5sqJj5_EGthI84-CKmU_7e0VRcbJhAKtg8GgpHcppWcV6dy3uj8ABuB_t55PUM_Bd9wbmvYBtesvakLAF9R0zmIRpAn5gfdPIL5Zt6gGheo1Ptn2FmD2UxnVXveg-J0jBRqNGSMCv_OOuHxxBDdL92N6bZqHT6WzLYnxte_ZHEwMrCjvVyEd2kORXPEBI0' \
--header 'Cookie: AWSALB=096u+D212v/57f6ijBB544CvL7oTM8O2rowoCEJ6gS9tXplw/h0/xAOQoY3ZL59jDbvWLN3xSWvfPXd11eqvgQzlAgiQNF7z+URIWNCev3ht2AgTr0S2hKQohmAJ; AWSALBCORS=096u+D212v/57f6ijBB544CvL7oTM8O2rowoCEJ6gS9tXplw/h0/xAOQoY3ZL59jDbvWLN3xSWvfPXd11eqvgQzlAgiQNF7z+URIWNCev3ht2AgTr0S2hKQohmAJ; AWSALB=zKTuhqTmSeuix1M/1pTj94W+dih3P6/vy6u6fBNJEp5norx03QQBWFlZ03Qki8Ni9CiqLXiAuJui4scrCW8MxGQzP8nKfPs9tino8DwWM6SQmxiomLaftNGERg/R; AWSALBCORS=zKTuhqTmSeuix1M/1pTj94W+dih3P6/vy6u6fBNJEp5norx03QQBWFlZ03Qki8Ni9CiqLXiAuJui4scrCW8MxGQzP8nKfPs9tino8DwWM6SQmxiomLaftNGERg/R; AWSALB=uKe+jxTFaHUQinMshpBZFQjfw6M5br+WR7m/aYUYW4/q0EgQyWOXF8FTaBjkTk6w4a1rK5k3K1j0kA1P194XJXg+JrZcP3l54cfzBfzjE24/lqbBmk/JOz7MCHPo; AWSALBCORS=uKe+jxTFaHUQinMshpBZFQjfw6M5br+WR7m/aYUYW4/q0EgQyWOXF8FTaBjkTk6w4a1rK5k3K1j0kA1P194XJXg+JrZcP3l54cfzBfzjE24/lqbBmk/JOz7MCHPo; AWSALB=b5IFrxTGYo8NDVZhW3MgBZojz6G7XWQ1gfTFxB0X4kEtcViPMqzBkiaEy/OSSieHTL33YGRRqFxMf7rb2DAzNg/fWLYHaS5tCLaFT6Az3Y2HAJiF04oCveba/K+M; AWSALBCORS=b5IFrxTGYo8NDVZhW3MgBZojz6G7XWQ1gfTFxB0X4kEtcViPMqzBkiaEy/OSSieHTL33YGRRqFxMf7rb2DAzNg/fWLYHaS5tCLaFT6Az3Y2HAJiF04oCveba/K+M' \
--data '{
    "elements_config": {
        "user_authentication_flow": false,
        "init_with_guest_user": true,
        "theme_config": [
            {
                "id": "{theme_config_uuid_1}",
                "name": "theme1",
                "config": "{\n  \"title\": \"¡Dale vida a tu compra!🤩\",\n  \"header\": {\n    \"content\": \"Introduce los detalles de tu tarjeta aquí.\"\n  },\n  \"hidePoweredBy\": true,\n  \"saveButton\": {\n    \"content\": \"Pagar\",\n     \"style\": {\n      \"backgroundColor\": \"#866DE9\",\n      \"color\": \"#ffffff\",\n      \"padding\": \"10px 20px\",\n      \"borderRadius\": \"25px\",\n      \"cursor\": \"pointer\"\n    }\n  },\n  \"termsAndConditions\": {\n    \"showForGuest\": true,\n    \"showForAuth\": false,\n    \"hideCompanyDisclaimer\": true\n  },\n  \"showOrderTotal\": true\n}\n"
            },
            {
                "id": "{theme_config_uuid_2}",
                "name": "theme1",
                "config": "{\n  \"title\": \"¡Dale vida a tu compra!👩‍🎤\",\n  \"header\": {\n    \"content\": \"Introduce los detalles de tu tarjeta aquí.\"\n  },\n  \"hidePoweredBy\": true,\n  \"saveButton\": {\n    \"content\": \"Pagar\",\n     \"style\": {\n      \"backgroundColor\": \"#866DE9\",\n      \"color\": \"#ffffff\",\n      \"padding\": \"10px 20px\",\n      \"borderRadius\": \"25px\",\n      \"cursor\": \"pointer\"\n    }\n  },\n  \"termsAndConditions\": {\n    \"showForGuest\": true,\n    \"showForAuth\": false,\n    \"hideCompanyDisclaimer\": true\n  },\n  \"showOrderTotal\": true\n}\n"
            }
        ]
    }
}'

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

{
  "logoUrl": "https://assets-global.website-files.com/62e806ed6cc7b20ca6dc2b93/64c2aee779502b3676e1024a_Logo%20DEUNA.png",
  "title": "Pago con tarjeta crédito o débito",
  "header": {
    "content": "Ingresa los datos de tu tarjeta",
    "style": {
      "color": "#333333"
    }
  },
  "header2": {
    "content": "Detalles de Pago",
    "style": {
      "color": "#393E41"
    }
  },
  "nameInput": {
    "content": "Nombre",
    "placeholder": "Escribe Aquí..",
    "style": {
      "color": "#393E41"
    }
  },
  "lastnameInput": {
    "content": "Apellido",
    "placeholder": "Escribe Aquí..",
    "style": {
      "color": "#393E41"
    }
  },
  "hidePoweredBy": false,
  "saveButton": {
    "content": "Pagar",
    "style": {
      "color": "#F6F7EB",
      "backgroundColor": "#7BCCE5"
    }
  },
  "upperTag": {
    "title": {
      "content": "Upper Tag"
    },
    "description": {
      "content": "Aquí puedes agregar un descuento superior"
    }
  },
  "lowerTag": {
    "title": {
      "content": "Lower Tag"
    },
    "description": {
      "content": "Aquí puedes agregar un descuento inferior"
    },
    "style": {
      "color": "#F6F7EB",
      "backgroundColor": "#FFFF00"
    }
  },
  "cardHolderInput": {
    "content": "Nombre en la tarjeta"
  },
  "cardNumberInput": {
    "content": "Número de tarjeta"
  },
  "installmentsInput": {
    "content": "Cuotas"
  },

  "legalMessageText": "Al hacer clic en comprar, aceptar las",
  "showOrderTotal": true,
  "termsAndConditions": {
    "showForGuest": true,
    "showForAuth": true,
    "hideCompanyDisclaimer": false
  }
}

// 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) => ({
  header: {
    content: 'Datos del Tarjetahabiente',
    style: {
      color: '#393E41'
    }
  },
  header2: {
    content: 'Detalles del Pago',
    style: {
      color: '#393E41'
    }
  },
  nameInput: {
    content: 'Nombre',
    placeholder: 'Escribe aquí..',
    style: {
      color: '#393E41'
    }
  },
  lastnameInput: {
    content: 'Apellido',
    placeholder: 'Escribe aquí..',
    style: {
      color: '#393E41'
    }
  },
  upperTag: {
    title: {
      content: 'Tienes 10% de descuento'
    },
    description: {
      content: `Debido a que tu tarjeta es ${parsedData.data?.metadata?.cardBrand}, tienes descuento`
    },
    style: {
      color: '#F6F7EB',
      backgroundColor: `${(cardBrands as any)[parsedData.data?.metadata?.cardBrand]}`
    }
  },
  hidePoweredBy: true,
  saveButton: {
    content: 'Confirmar',
    style: {
      color: '#F6F7EB',
      backgroundColor: '#393E41'
    }
  },
  logoUrl:'https://upload.wikimedia.org/wikipedia/commons/4/44/Cin%C3%A9polis.svg'
});

{
  "title": "¡Dale vida a tu compra!🤩",
  "header": {
    "content": "Introduce los detalles de tu tarjeta aquí."
  },
  "hidePoweredBy": true,
  "saveButton": {
    "content": "Pagar",
     "styles": {
      "backgroundColor": "#8A2BE2",
      "color": "#ffffff",
      "padding": "10px 20px",
      "borderRadius": "25px",
    }
  },
  "termsAndConditions": {
    "showForGuest": true,
    "showForAuth": false,
    "hideCompanyDisclaimer": true
  },
  "showOrderTotal": true
}