{"id":9559,"date":"2026-09-24T19:42:02","date_gmt":"2026-09-24T19:42:02","guid":{"rendered":"https:\/\/mostros.co\/?page_id=9559"},"modified":"2026-09-24T20:11:51","modified_gmt":"2026-09-24T20:11:51","slug":"payment","status":"publish","type":"page","link":"https:\/\/mostros.co\/es\/payment\/","title":{"rendered":"Payment"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"9559\" class=\"elementor elementor-9559\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34f19c1 e-flex e-con-boxed e-con e-parent\" data-id=\"34f19c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6d6984 elementor-widget elementor-widget-html\" data-id=\"c6d6984\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"mostros-payment-page\">\n\n  <div class=\"payment-wrapper\">\n\n    <!-- LOGO -->\n    <!--<a-->\n    <!--  href=\"https:\/\/mostros.co\/\"-->\n    <!--  class=\"mostros-logo\"-->\n    <!--  aria-label=\"Mostros home\"-->\n    <!-->\n    <!--  MOSTROS -->\n    <!--<\/a>-->\n\n    <!-- PAYMENT CARD -->\n    <div class=\"payment-card\">\n\n      <div class=\"card-top\">\n        <span class=\"eyebrow\">PAYMENT REQUEST<\/span>\n\n        <div class=\"status\">\n          <span class=\"status-dot\"><\/span>\n          SECURE\n        <\/div>\n      <\/div>\n\n      <div class=\"client-section\">\n        <span class=\"label\">PAYMENT FOR<\/span>\n        <h1 id=\"payment-client\">Loading...<\/h1>\n      <\/div>\n\n      <div class=\"amount-section\">\n        <span class=\"label\">AMOUNT DUE<\/span>\n\n        <div class=\"amount-wrapper\">\n          <span id=\"payment-amount\">\u2014<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"details\">\n\n        <div class=\"detail\">\n          <span>INVOICE<\/span>\n          <strong id=\"payment-invoice\">\u2014<\/strong>\n        <\/div>\n\n        <div class=\"detail\">\n          <span>CURRENCY<\/span>\n          <strong id=\"payment-currency\">\u2014<\/strong>\n        <\/div>\n\n      <\/div>\n\n      <a\n        id=\"wise-button\"\n        href=\"#\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"wise-button\"\n      >\n        <span>Continue with Wise<\/span>\n\n        <span class=\"arrow\">\n          \u2192\n        <\/span>\n      <\/a>\n\n      <p class=\"secure-text\">\n        You'll be redirected to Wise to complete your payment securely.\n      <\/p>\n\n    <\/div>\n\n\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   MOSTROS PAYMENT PAGE\n   ========================================================= *\/\n\n#mostros-payment-page {\n\n  --mostros-orange: #E8532A;\n  --mostros-yellow: #F9E771;\n  --mostros-blue: #2C4DE9;\n  --mostros-black: #111111;\n  --mostros-white: #FFFFFF;\n  --mostros-gray: #F3F3F0;\n\n\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background:;\n\n  font-family:\n    \"Inter\",\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   WRAPPER\n   ========================================================= *\/\n\n.payment-wrapper {\n\n  width: 100%;\n  max-width: 540px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  animation: pageEnter .7s cubic-bezier(.22,1,.36,1) both;\n}\n\n\n\/* =========================================================\n   LOGO\n   ========================================================= *\/\n\n.mostros-logo {\n\n  display: inline-block;\n\n  margin-bottom: 28px;\n\n  color: var(--mostros-black);\n\n  font-size: 26px;\n  font-weight: 900;\n\n  letter-spacing: -1.8px;\n\n  text-decoration: none;\n\n  transition:\n    transform .25s ease,\n    opacity .25s ease;\n}\n\n.mostros-logo:hover {\n\n  transform: translateY(-2px) rotate(-1deg);\n\n  opacity: .75;\n}\n\n\n\/* =========================================================\n   PAYMENT CARD\n   ========================================================= *\/\n\n.payment-card {\n\n  width: 100%;\n\n  box-sizing: border-box;\n\n  padding: 42px;\n\n  background: rgba(255,255,255,.92);\n\n  border: 1px solid rgba(0,0,0,.07);\n\n  border-radius: 28px;\n\n  box-shadow:\n    0 30px 80px rgba(0,0,0,.08),\n    0 5px 20px rgba(0,0,0,.04);\n\n  backdrop-filter: blur(20px);\n\n  transition:\n    transform .35s cubic-bezier(.22,1,.36,1),\n    box-shadow .35s ease;\n}\n\n.payment-card:hover {\n\n  transform: translateY(-5px);\n\n  box-shadow:\n    0 40px 100px rgba(0,0,0,.11),\n    0 10px 30px rgba(0,0,0,.05);\n}\n\n\n\/* =========================================================\n   TOP BAR\n   ========================================================= *\/\n\n.card-top {\n\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  margin-bottom: 50px;\n}\n\n.eyebrow {\n\n  font-size: 10px;\n  font-weight: 800;\n\n  letter-spacing: 1.8px;\n\n  color: #777;\n}\n\n.status {\n\n  display: flex;\n\n  align-items: center;\n  gap: 7px;\n\n  font-size: 9px;\n  font-weight: 800;\n\n  letter-spacing: 1.2px;\n\n  color: #555;\n}\n\n.status-dot {\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background: #45B36B;\n\n  box-shadow:\n    0 0 0 4px rgba(69,179,107,.12);\n\n  animation: pulse 2s infinite;\n}\n\n\n\/* =========================================================\n   LABELS\n   ========================================================= *\/\n\n.label {\n\n  display: block;\n\n  margin-bottom: 9px;\n\n  font-size: 10px;\n  font-weight: 800;\n\n  letter-spacing: 1.6px;\n\n  color: #8A8A8A;\n}\n\n\n\/* =========================================================\n   CLIENT\n   ========================================================= *\/\n\n.client-section {\n\n  margin-bottom: 42px;\n}\n\n#payment-client {\n\n  margin: 0;\n\n  color: var(--mostros-black);\n\n  font-size: clamp(36px, 7vw, 56px);\n\n  line-height: .95;\n\n  letter-spacing: -3px;\n\n  font-weight: 800;\n\n  word-break: break-word;\n\n  animation:\n    contentEnter .7s .15s cubic-bezier(.22,1,.36,1) both;\n}\n\n\n\/* =========================================================\n   AMOUNT\n   ========================================================= *\/\n\n.amount-section {\n\n  margin-bottom: 35px;\n\n  padding: 28px;\n\n  border-radius: 20px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #F9E771 0%,\n      #F8E47A 100%\n    );\n\n  overflow: hidden;\n\n  position: relative;\n}\n\n.amount-section::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 180px;\n  height: 180px;\n\n  right: -80px;\n  top: -80px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.25);\n}\n\n.amount-wrapper {\n\n  position: relative;\n  z-index: 2;\n\n  overflow: hidden;\n}\n\n#payment-amount {\n\n  display: block;\n\n  font-size: clamp(38px, 8vw, 58px);\n\n  line-height: 1;\n\n  letter-spacing: -3px;\n\n  font-weight: 900;\n\n  color: #111;\n\n  animation:\n    amountEnter .8s .25s cubic-bezier(.22,1,.36,1) both;\n}\n\n\n\/* =========================================================\n   DETAILS\n   ========================================================= *\/\n\n.details {\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 12px;\n\n  margin-bottom: 30px;\n}\n\n.detail {\n\n  padding: 17px 18px;\n\n  border-radius: 15px;\n\n  background: #F5F5F2;\n\n  transition:\n    transform .25s ease,\n    background .25s ease;\n}\n\n.detail:hover {\n\n  transform: translateY(-2px);\n\n  background: #EEEEEA;\n}\n\n.detail span {\n\n  display: block;\n\n  margin-bottom: 7px;\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 1.3px;\n\n  color: #999;\n}\n\n.detail strong {\n\n  font-size: 14px;\n\n  font-weight: 750;\n\n  color: #222;\n\n  word-break: break-word;\n}\n\n\n\/* =========================================================\n   WISE BUTTON\n   ========================================================= *\/\n\n.wise-button {\n\n  position: relative;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n\n  box-sizing: border-box;\n\n  padding: 18px 20px;\n\n  border-radius: 15px;\n\n  background: #163300;\n\n  color: #FFFFFF !important;\n\n  text-decoration: none !important;\n\n  font-size: 15px;\n  font-weight: 750;\n\n  overflow: hidden;\n\n  transition:\n    transform .25s cubic-bezier(.22,1,.36,1),\n    box-shadow .25s ease;\n}\n\n.wise-button::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: -100%;\n\n  width: 70%;\n  height: 100%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.12),\n      transparent\n    );\n\n  transform: skewX(-20deg);\n\n  transition: left .6s ease;\n}\n\n.wise-button:hover::before {\n\n  left: 140%;\n}\n\n.wise-button:hover {\n\n  transform: translateY(-3px);\n\n  box-shadow:\n    0 12px 25px rgba(22,51,0,.18);\n}\n\n.wise-button:active {\n\n  transform: translateY(0) scale(.985);\n}\n\n.arrow {\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.12);\n\n  font-size: 20px;\n\n  transition:\n    transform .25s ease,\n    background .25s ease;\n}\n\n.wise-button:hover .arrow {\n\n  transform: translateX(4px);\n\n  background: rgba(255,255,255,.2);\n}\n\n\n\/* =========================================================\n   SECURITY TEXT\n   ========================================================= *\/\n\n.secure-text {\n\n  margin: 15px 0 0;\n\n  text-align: center;\n\n  font-size: 11px;\n\n  line-height: 1.5;\n\n  color: #999;\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n.footer {\n\n  display: flex;\n\n  align-items: center;\n  gap: 6px;\n\n  margin-top: 22px;\n\n  font-size: 8px;\n\n  letter-spacing: 1.4px;\n\n  color: #999;\n}\n\n.footer strong {\n\n  color: #555;\n\n  font-weight: 900;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n   ========================================================= *\/\n\n@keyframes pageEnter {\n\n  from {\n\n    opacity: 0;\n\n    transform:\n      translateY(25px)\n      scale(.97);\n  }\n\n  to {\n\n    opacity: 1;\n\n    transform:\n      translateY(0)\n      scale(1);\n  }\n}\n\n\n@keyframes contentEnter {\n\n  from {\n\n    opacity: 0;\n\n    transform:\n      translateY(20px);\n  }\n\n  to {\n\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n}\n\n\n@keyframes amountEnter {\n\n  from {\n\n    opacity: 0;\n\n    transform:\n      translateY(25px)\n      scale(.92);\n  }\n\n  to {\n\n    opacity: 1;\n\n    transform:\n      translateY(0)\n      scale(1);\n  }\n}\n\n\n@keyframes pulse {\n\n  0%,\n  100% {\n\n    box-shadow:\n      0 0 0 4px rgba(69,179,107,.12);\n  }\n\n  50% {\n\n    box-shadow:\n      0 0 0 7px rgba(69,179,107,.03);\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 600px) {\n\n  #mostros-payment-page {\n\n    padding: 35px 15px;\n\n    align-items: flex-start;\n  }\n\n  .payment-wrapper {\n\n    margin-top: 25px;\n  }\n\n  .payment-card {\n\n    padding: 28px 22px;\n\n    border-radius: 22px;\n  }\n\n  .card-top {\n\n    margin-bottom: 40px;\n  }\n\n  #payment-client {\n\n    letter-spacing: -2px;\n  }\n\n  .amount-section {\n\n    padding: 23px;\n\n    border-radius: 18px;\n  }\n\n  #payment-amount {\n\n    letter-spacing: -2px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #mostros-payment-page *,\n  #mostros-payment-page {\n\n    animation: none !important;\n\n    transition: none !important;\n  }\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/*\n   * ======================================================\n   * READ PAYMENT DATA FROM URL\n   * ======================================================\n   *\/\n\n  const params = new URLSearchParams(\n    window.location.search\n  );\n\n  const client = params.get(\"client\");\n  const amount = params.get(\"amount\");\n  const currency = (\n    params.get(\"currency\") || \"USD\"\n  ).toUpperCase();\n\n  const invoice = params.get(\"invoice\");\n\n\n  \/*\n   * ======================================================\n   * YOUR GENERAL WISE PROFILE LINK\n   * ======================================================\n   *\/\n\n  const WISE_URL =\n    \"https:\/\/wise.com\/pay\/me\/stevenh3377\";\n\n\n  \/*\n   * ======================================================\n   * VALIDATION\n   * ======================================================\n   *\/\n\n  if (!client || !amount || !invoice) {\n\n    document.getElementById(\n      \"mostros-payment-page\"\n    ).innerHTML = `\n\n      <div style=\"\n        text-align:center;\n        max-width:450px;\n        padding:40px;\n        font-family:Arial,sans-serif;\n      \">\n\n        <h2>\n          Payment information unavailable\n        <\/h2>\n\n        <p>\n          Please use the payment link provided\n          by Mostros.\n        <\/p>\n\n      <\/div>\n\n    `;\n\n    return;\n  }\n\n\n  \/*\n   * ======================================================\n   * VALIDATE AMOUNT\n   * ======================================================\n   *\/\n\n  const numericAmount = Number(amount);\n\n  if (\n    !Number.isFinite(numericAmount) ||\n    numericAmount <= 0\n  ) {\n\n    document.getElementById(\n      \"mostros-payment-page\"\n    ).innerHTML = `\n\n      <div style=\"\n        text-align:center;\n        max-width:450px;\n        padding:40px;\n        font-family:Arial,sans-serif;\n      \">\n\n        <h2>\n          Invalid payment amount\n        <\/h2>\n\n        <p>\n          Please contact Mostros.\n        <\/p>\n\n      <\/div>\n\n    `;\n\n    return;\n  }\n\n\n  \/*\n   * ======================================================\n   * DISPLAY CLIENT\n   * ======================================================\n   *\/\n\n  document.getElementById(\n    \"payment-client\"\n  ).textContent = client;\n\n\n  \/*\n   * ======================================================\n   * DISPLAY INVOICE\n   * ======================================================\n   *\/\n\n  document.getElementById(\n    \"payment-invoice\"\n  ).textContent = invoice;\n\n\n  \/*\n   * ======================================================\n   * DISPLAY CURRENCY\n   * ======================================================\n   *\/\n\n  document.getElementById(\n    \"payment-currency\"\n  ).textContent = currency;\n\n\n\n\/*\n * ======================================================\n * FORMAT AMOUNT\n * ======================================================\n *\/\n\nlet formattedAmount;\n\ntry {\n\n  formattedAmount =\n    new Intl.NumberFormat(\n      \"en-US\",\n      {\n        style: \"currency\",\n        currency: currency,\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2\n      }\n    ).format(numericAmount);\n\n} catch (error) {\n\n  formattedAmount =\n    numericAmount.toLocaleString(\n      \"en-US\",\n      {\n        maximumFractionDigits: 2\n      }\n    ) + \" \" + currency;\n}\n\n\ndocument.getElementById(\n  \"payment-amount\"\n).textContent = formattedAmount;\n\n  \/*\n   * ======================================================\n   * WISE BUTTON\n   * ======================================================\n   *\/\n\n  document.getElementById(\n    \"wise-button\"\n  ).href = WISE_URL;\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>PAYMENT REQUEST SECURE PAYMENT FOR Loading&#8230; AMOUNT DUE \u2014 INVOICE \u2014 CURRENCY \u2014 Continue with Wise \u2192 You&#8217;ll be redirected to Wise to complete your payment securely.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9559","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/comments?post=9559"}],"version-history":[{"count":25,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9559\/revisions"}],"predecessor-version":[{"id":9585,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9559\/revisions\/9585"}],"wp:attachment":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/media?parent=9559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}