{"id":4267,"date":"2025-09-14T16:45:01","date_gmt":"2025-09-14T23:45:01","guid":{"rendered":"https:\/\/ievolutionclub.com\/?page_id=4267"},"modified":"2026-04-11T09:19:30","modified_gmt":"2026-04-11T16:19:30","slug":"payment-page-new","status":"publish","type":"page","link":"https:\/\/stage.ievolutionclub.com\/es\/payment-page-new\/","title":{"rendered":"p\u00e1gina-de-pago-nueva"},"content":{"rendered":"<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');\n\n  \/* ===== iEvolution Brand Tokens ===== *\/\n  .iev-pay {\n    --navy: #1B2A4A;\n    --navy-light: #2D3E5F;\n    --navy-dark: #111D35;\n    --teal: #2AAFD3;\n    --teal-light: #5DC4E0;\n    --teal-dark: #1E8FAD;\n    --teal-bg: rgba(42, 175, 211, 0.08);\n    --teal-border: rgba(42, 175, 211, 0.15);\n    --white: #FFFFFF;\n    --grey-bg: #F8FAFB;\n    --grey-text: #6B7B8D;\n    --grey-muted: #94A3B8;\n    --border: #E8EDF2;\n    --danger: #DC2626;\n    --danger-bg: rgba(220, 38, 38, 0.06);\n    --radius-sm: 12px;\n    --radius-md: 16px;\n    --radius-lg: 20px;\n    --radius-pill: 100px;\n    --shadow-card: 0 20px 50px -12px rgba(27, 42, 74, 0.12);\n    --shadow-hover: 0 10px 28px -6px rgba(42, 175, 211, 0.35);\n\n    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    color: var(--navy);\n    -webkit-font-smoothing: antialiased;\n    line-height: 1.6;\n    min-height: 100vh;\n    padding: 48px 24px;\n    background:\n      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(42, 175, 211, 0.06), transparent 70%),\n      var(--white);\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n  }\n\n  .iev-pay *,\n  .iev-pay *::before,\n  .iev-pay *::after {\n    box-sizing: border-box;\n  }\n\n  \/* ===== Card ===== *\/\n  .iev-pay__card {\n    width: 100%;\n    max-width: 460px;\n    background: var(--white);\n    border: 1px solid var(--border);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-card);\n    overflow: hidden;\n    position: relative;\n  }\n  .iev-pay__card::before {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, var(--teal), var(--navy));\n  }\n\n  \/* ===== Header ===== *\/\n  .iev-pay__header {\n    padding: 40px 32px 24px;\n    text-align: center;\n  }\n  .iev-pay__logo {\n    display: block;\n    width: 170px;\n    max-width: 60%;\n    height: auto;\n    margin: 0 auto 24px;\n  }\n  .iev-pay__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 2.5px;\n    text-transform: uppercase;\n    color: var(--teal);\n    margin-bottom: 14px;\n  }\n  .iev-pay__eyebrow::before,\n  .iev-pay__eyebrow::after {\n    content: '';\n    width: 24px;\n    height: 2px;\n    background: var(--teal);\n  }\n  .iev-pay__heading {\n    font-size: 24px;\n    font-weight: 800;\n    letter-spacing: -0.8px;\n    line-height: 1.15;\n    color: var(--navy);\n    margin: 0 0 6px;\n  }\n  .iev-pay__subheading {\n    font-size: 14px;\n    color: var(--grey-text);\n    margin: 0;\n    font-weight: 400;\n  }\n\n  \/* ===== Total pill ===== *\/\n  .iev-pay__total {\n    margin: 20px 32px 8px;\n    padding: 18px 20px;\n    background: var(--grey-bg);\n    border: 1px solid var(--border);\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n  }\n  .iev-pay__total-label {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    color: var(--grey-muted);\n  }\n  .iev-pay__total-amount {\n    font-size: 22px;\n    font-weight: 800;\n    letter-spacing: -0.5px;\n    color: var(--navy);\n    font-variant-numeric: tabular-nums;\n  }\n  .iev-pay__total-amount.is-loading {\n    display: inline-block;\n    width: 96px;\n    height: 22px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, var(--border) 0%, #F1F5F9 50%, var(--border) 100%);\n    background-size: 200% 100%;\n    animation: iev-shimmer 1.4s linear infinite;\n    color: transparent;\n  }\n  @keyframes iev-shimmer {\n    0%   { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n  }\n\n  \/* ===== Form body ===== *\/\n  .iev-pay__form {\n    padding: 16px 32px 32px;\n  }\n  #payment-element {\n    margin-bottom: 20px;\n    padding: 18px;\n    border-radius: var(--radius-sm);\n    background: var(--grey-bg);\n    border: 1px solid var(--border);\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  }\n  #payment-element.focused {\n    border-color: var(--teal);\n    box-shadow: 0 0 0 3px var(--teal-bg);\n  }\n\n  \/* ===== Buttons ===== *\/\n  .iev-pay__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    width: 100%;\n    padding: 16px 24px;\n    border-radius: var(--radius-pill);\n    font-family: inherit;\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n    transition: background 0.25s ease, color 0.25s ease,\n                transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;\n    border: 2px solid transparent;\n    text-decoration: none;\n    font-variant-numeric: tabular-nums;\n  }\n  .iev-pay__btn:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px var(--teal-bg), 0 0 0 2px var(--teal);\n  }\n\n  .iev-pay__btn--primary {\n    background: var(--navy);\n    color: var(--white);\n    border-color: var(--navy);\n  }\n  .iev-pay__btn--primary:hover:not(:disabled) {\n    background: var(--teal);\n    border-color: var(--teal);\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-hover);\n  }\n  .iev-pay__btn--primary:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none;\n    box-shadow: none;\n  }\n\n  .iev-pay__btn--outline {\n    background: transparent;\n    color: var(--navy);\n    border-color: var(--navy);\n    margin-top: 12px;\n    padding: 14px 24px;\n    font-size: 14px;\n  }\n  .iev-pay__btn--outline:hover {\n    background: var(--navy);\n    color: var(--white);\n    transform: translateY(-1px);\n  }\n\n  \/* ===== Payment message ===== *\/\n  .iev-pay__message {\n    margin-top: 16px;\n    padding: 0 4px;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 18px;\n    color: var(--danger);\n    font-weight: 500;\n    text-align: center;\n  }\n  .iev-pay__message.is-error {\n    padding: 12px 16px;\n    background: var(--danger-bg);\n    border: 1px solid rgba(220, 38, 38, 0.15);\n    border-radius: var(--radius-sm);\n  }\n  .iev-pay__message.is-success {\n    color: var(--teal-dark);\n    padding: 12px 16px;\n    background: var(--teal-bg);\n    border: 1px solid var(--teal-border);\n    border-radius: var(--radius-sm);\n    font-weight: 600;\n  }\n\n  \/* ===== Security footer ===== *\/\n  .iev-pay__security {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    margin: 24px 32px 28px;\n    padding: 12px 16px;\n    background: var(--teal-bg);\n    border: 1px solid var(--teal-border);\n    border-radius: var(--radius-pill);\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.3px;\n    color: var(--navy);\n  }\n  .iev-pay__security svg {\n    width: 14px;\n    height: 14px;\n    fill: var(--teal);\n    flex-shrink: 0;\n  }\n\n  \/* ===== Spinner ===== *\/\n  .iev-pay__spinner {\n    display: inline-block;\n    width: 14px;\n    height: 14px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-radius: 50%;\n    border-top-color: #fff;\n    animation: iev-spin 0.8s linear infinite;\n  }\n  @keyframes iev-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  \/* ===== Success check ===== *\/\n  @keyframes iev-checkmark {\n    0%   { transform: scale(0); }\n    50%  { transform: scale(1.2); }\n    100% { transform: scale(1); }\n  }\n  .iev-pay__check {\n    display: inline-block;\n    animation: iev-checkmark 0.5s ease;\n  }\n\n  \/* ===== Mobile ===== *\/\n  @media (max-width: 520px) {\n    .iev-pay { padding: 20px 16px; }\n    .iev-pay__card { border-radius: var(--radius-md); }\n    .iev-pay__header { padding: 32px 20px 20px; }\n    .iev-pay__heading { font-size: 22px; }\n    .iev-pay__total { margin: 16px 20px 8px; padding: 16px; }\n    .iev-pay__total-amount { font-size: 20px; }\n    .iev-pay__form { padding: 12px 20px 24px; }\n    .iev-pay__security { margin: 20px 20px 24px; }\n  }\n\n  \/* ===== Reduced motion ===== *\/\n  @media (prefers-reduced-motion: reduce) {\n    .iev-pay *,\n    .iev-pay *::before,\n    .iev-pay *::after {\n      animation-duration: 0.01ms !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n\n  \/* ===== RTL for Arabic ===== *\/\n  <\/style>\n\n<div class=\"iev-pay\">\n  <div class=\"iev-pay__card\">\n    <header class=\"iev-pay__header\">\n      <img decoding=\"async\" src=\"https:\/\/stage.ievolutionclub.com\/wp-content\/uploads\/2026\/02\/Result-2026-02-17T124741.544.webp\"\n           alt=\"iEvolution\"\n           class=\"iev-pay__logo\" \/>\n      <div class=\"iev-pay__eyebrow\">Pago Seguro<\/div>\n      <h1 class=\"iev-pay__heading\">Completa tu pago<\/h1>\n      <p class=\"iev-pay__subheading\">Est\u00e1s a un paso de tu pedido iEvolution.<\/p>\n    <\/header>\n\n    <div class=\"iev-pay__total\" aria-live=\"polite\">\n      <span class=\"iev-pay__total-label\">Total del pedido<\/span>\n      <span id=\"total-amount\" class=\"iev-pay__total-amount is-loading\">\u2014<\/span>\n    <\/div>\n\n    <form id=\"checkout-form\" class=\"iev-pay__form\" novalidate>\n      <div id=\"payment-element\"><\/div>\n      <button type=\"submit\" id=\"submit\" class=\"iev-pay__btn iev-pay__btn--primary\">\n        Cargando\u2026      <\/button>\n      <button type=\"button\" id=\"back-button\" class=\"iev-pay__btn iev-pay__btn--outline\">\n        Volver al Checkout      <\/button>\n      <div id=\"payment-message\" class=\"iev-pay__message\" role=\"alert\" aria-live=\"polite\"><\/div>\n    <\/form>\n\n    <div class=\"iev-pay__security\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"\/>\n      <\/svg>\n      <span>SSL de 256 bits \u00b7 Protegido por Stripe<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/js.stripe.com\/v3\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', async () => {\n  \/\/ Translations\n  const translations = {\"eyebrow\":\"Pago Seguro\",\"heading\":\"Completa tu pago\",\"subheading\":\"Est\\u00e1s a un paso de tu pedido iEvolution.\",\"total_label\":\"Total del pedido\",\"loading\":\"Cargando\\u2026\",\"pay\":\"Pagar\",\"back_to_checkout\":\"Volver al Checkout\",\"missing_params\":\"Faltan los par\\u00e1metros client_secret o thankpage.\",\"processing\":\"Procesando\\u2026\",\"payment_successful\":\"\\u00a1Pago exitoso! Redirigiendo\\u2026\",\"payment_failed\":\"No se pudo confirmar el pago. Por favor, int\\u00e9ntalo de nuevo.\",\"secure_payment\":\"SSL de 256 bits \\u00b7 Protegido por Stripe\",\"card_declined\":\"Tu tarjeta fue rechazada. Por favor, intenta con otro m\\u00e9todo de pago.\",\"insufficient_funds\":\"Tu tarjeta no tiene fondos suficientes.\",\"expired_card\":\"Tu tarjeta ha expirado. Por favor, usa otra tarjeta.\",\"incorrect_cvc\":\"El c\\u00f3digo de seguridad de tu tarjeta es incorrecto.\",\"processing_error\":\"Ocurri\\u00f3 un error al procesar tu tarjeta. Por favor, int\\u00e9ntalo de nuevo.\",\"network_error\":\"Error de conexi\\u00f3n. Verifica tu internet e int\\u00e9ntalo de nuevo.\",\"generic_error\":\"Ocurri\\u00f3 un error inesperado. Por favor, int\\u00e9ntalo de nuevo.\"};\n  const stripeLocale = 'es';\n  const currentLang = 'es';\n\n  const params       = new URLSearchParams(window.location.search);\n  const clientSecret = params.get('client_secret');\n  const thankPage    = params.get('thankpage');\n  const btn          = document.getElementById('submit');\n  const backBtn      = document.getElementById('back-button');\n  const msgEl        = document.getElementById('payment-message');\n  const totalEl      = document.getElementById('total-amount');\n  const peWrapper    = document.getElementById('payment-element');\n\n  \/\/ Back to checkout with language support\n  backBtn.addEventListener('click', () => {\n    let checkoutUrl = 'https:\/\/stage.ievolutionclub.com\/checkout';\n    if (currentLang !== 'en') {\n      checkoutUrl = checkoutUrl.replace('\/checkout', `\/${currentLang}\/checkout`);\n    }\n    window.location.href = checkoutUrl;\n  });\n\n  if (!clientSecret || !thankPage) {\n    showError(translations.missing_params);\n    btn.disabled = true;\n    backBtn.disabled = true;\n    totalEl.classList.remove('is-loading');\n    totalEl.textContent = '\u2014';\n    return;\n  }\n\n  const stripe = Stripe('pk_live_toarlatNd0x4Gj5unV6jEZ3U004cEzxmVX', { locale: stripeLocale });\n\n  \/\/ Retrieve PaymentIntent and display formatted amount\n  const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);\n  if (paymentIntent) {\n    const amt = (paymentIntent.amount \/ 100).toFixed(2);\n    const cur = paymentIntent.currency.toUpperCase();\n\n    let formattedAmount;\n    switch (currentLang) {\n      case 'es':\n      case 'fr':\n      case 'it':\n      case 'pt':\n      case 'de':\n        formattedAmount = `${amt.replace('.', ',')} ${cur}`;\n        break;\n      case 'ja':\n        formattedAmount = `\u00a5${Math.round(paymentIntent.amount \/ 100)}`;\n        break;\n      case 'zh':\n        formattedAmount = `\u00a5${amt}`;\n        break;\n      default:\n        formattedAmount = `$${amt} ${cur}`;\n    }\n\n    totalEl.classList.remove('is-loading');\n    totalEl.textContent = formattedAmount;\n\n    btn.textContent = `${translations.pay} ${formattedAmount}`;\n    btn.setAttribute('aria-label', `${translations.pay} ${formattedAmount}`);\n    btn.setAttribute('data-original-text', btn.textContent);\n  }\n\n  const elements = stripe.elements({ clientSecret, locale: stripeLocale });\n\n  \/\/ Payment element \u2014 iEvolution brand\n  const paymentElement = elements.create('payment', {\n    style: {\n      variables: {\n        colorPrimary: '#1B2A4A',\n        colorBackground: '#F8FAFB',\n        colorText: '#1B2A4A',\n        colorTextPlaceholder: '#94A3B8',\n        colorDanger: '#DC2626',\n        fontFamily: '\"Plus Jakarta Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n        fontSizeBase: '15px',\n        spacingUnit: '4px',\n        borderRadius: '12px'\n      }\n    },\n    wallets: {\n      applePay: 'auto',\n      googlePay: 'auto'\n    },\n    fields: {\n      billingDetails: {\n        address: 'auto'\n      }\n    },\n    paymentMethodOrder: ['card'],\n    paymentMethodTypes: ['card']\n  });\n\n  paymentElement.mount('#payment-element');\n  paymentElement.on('focus', () => peWrapper.classList.add('focused'));\n  paymentElement.on('blur',  () => peWrapper.classList.remove('focused'));\n\n  \/\/ Error code \u2192 translation\n  const getErrorMessage = (error) => {\n    const errorMessages = {\n      'card_declined': translations.card_declined,\n      'insufficient_funds': translations.insufficient_funds,\n      'expired_card': translations.expired_card,\n      'incorrect_cvc': translations.incorrect_cvc,\n      'processing_error': translations.processing_error,\n      'network_error': translations.network_error\n    };\n    return errorMessages[error.code] || error.message || translations.generic_error;\n  };\n\n  function showSuccess() {\n    msgEl.classList.remove('is-error');\n    msgEl.classList.add('is-success');\n    msgEl.innerHTML = `<span class=\"iev-pay__check\">\u2713<\/span> ${translations.payment_successful}`;\n  }\n\n  function showError(message) {\n    msgEl.classList.remove('is-success');\n    msgEl.classList.add('is-error');\n    msgEl.textContent = message;\n  }\n\n  function resetBtn() {\n    btn.disabled = false;\n    btn.setAttribute('aria-busy', 'false');\n    btn.textContent = btn.getAttribute('data-original-text') || translations.pay;\n  }\n\n  async function waitForSuccess(secret, interval = 2000, timeout = 30000) {\n    const start = Date.now();\n    while (Date.now() - start < timeout) {\n      const { paymentIntent: pi } = await stripe.retrievePaymentIntent(secret);\n      if (pi.status === 'succeeded') return true;\n      if (['requires_payment_method', 'canceled'].includes(pi.status)) break;\n      await new Promise(r => setTimeout(r, interval));\n    }\n    return false;\n  }\n\n  document.getElementById('checkout-form').addEventListener('submit', async e => {\n    e.preventDefault();\n    btn.disabled = true;\n    btn.setAttribute('aria-busy', 'true');\n    btn.innerHTML = `<span class=\"iev-pay__spinner\"><\/span> ${translations.processing}`;\n    msgEl.className = 'iev-pay__message';\n    msgEl.textContent = '';\n\n    try {\n      const { error, paymentIntent: pi } = await stripe.confirmPayment({\n        elements,\n        confirmParams: { return_url: window.location.href },\n        redirect: 'if_required'\n      });\n\n      if (error) {\n        showError(getErrorMessage(error));\n        resetBtn();\n        return;\n      }\n\n      if (pi.status === 'succeeded') {\n        showSuccess();\n        setTimeout(() => { window.location.href = thankPage; }, 1000);\n        return;\n      }\n\n      if (pi.status === 'requires_action') {\n        const { error: nextError } = await stripe.handleNextAction(pi.client_secret);\n        if (nextError) {\n          showError(getErrorMessage(nextError));\n          resetBtn();\n          return;\n        }\n        const { paymentIntent: finalPI } = await stripe.retrievePaymentIntent(pi.client_secret);\n        if (finalPI.status === 'succeeded') {\n          showSuccess();\n          setTimeout(() => { window.location.href = thankPage; }, 1000);\n          return;\n        }\n      }\n\n      if (await waitForSuccess(pi.client_secret)) {\n        showSuccess();\n        setTimeout(() => { window.location.href = thankPage; }, 1000);\n      } else {\n        showError(translations.payment_failed);\n        resetBtn();\n      }\n    } catch (err) {\n      showError(translations.generic_error);\n      resetBtn();\n    }\n  });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"spb-full-width.php","meta":{"footnotes":""},"wf_page_folders":[],"class_list":["post-4267","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/comments?post=4267"}],"version-history":[{"count":4,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4267\/revisions"}],"predecessor-version":[{"id":4271,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4267\/revisions\/4271"}],"wp:attachment":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/media?parent=4267"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/wf_page_folders?post=4267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}