---
updatedAt: 2025-09-22T21:31:47.000Z
agentTools:
  projectIndex: https://developers.digitalfemsa.io/llms.txt
---

# Bienvenidos

<HTMLBlock>{`
<div>
<h1 class="title">Documentación técnica</h1>
<p class="main__text">En este espacio podrás encontrar las guías para aceptar pagos en Efectivo en línea con Oxxo Pay.</p>
<h2 class="subtitle">Elige la integración que se adapte a tu negocio</h2>
 <div class="cards_container">
        <a href="/docs/cargo-único-1">
            <div class="card">
                <div class="card__title">Component</div>
                <h3 class="card__subtitle">Código avanzado</h3>
                <p class="card__text">Configura el flujo de recepción de<br>pagos con efectivo desde la recepción<br>de los datos en tu frontend.</p>
            </div>
        </a>
        <a href="/docs/checkout-redireccionado">
            <div class="card">
                <div class="card__title">Checkout</div>
                <h3 class="card__subtitle">Código INTERMEDIO</h3>
                <p class="card__text">Configura el pago en<br>un checkout, directamente en tu página<br>web o con un redireccionamiento.</p>
            </div>
        </a>
        
        <a href="/docs/inicio-rápido-pagos-únicos-con-component">
            <div class="card">
                <div class="card__title">Link de pago</div>
                <h3 class="card__subtitle">SIN CÓDIGO | VÍA PANEL</h3>
                <p class="card__text">Sigue el paso a paso para enviar enlaces de pago desde Panel o crea links de pago desde tu backend usando nuestra API.</p>
            </div>
        </a>
        <a href="/reference/getting-started-with-your-api">
            <div class="card">
                <div class="card__title">API</div>
                <h3 class="card__subtitle">CÓDIGO AVANZADO</h3>
                <p class="card__text">Revisa nuestra documentación técnica de API dónde podrás realizar tu propia integración a la medida y conectarlo a tu propio software</p>
            </div>
        </a>
    </div>   
</div>

<style>
  
  .markdown-body .title {
        font-weight: 700;
        color: #212247;
        font-size: 56px;
        line-height: 64px;
        margin-bottom: 36px;
        margin-top: 0;
    }

    .markdown-body .subtitle {
        font-weight: bold;
        color: #212247;
        font-size: 32px;
        line-height: 40px;
        margin-top: 0;
        margin-bottom: 16px;
    }

   .markdown-body  .main__text {
        font-weight: 400;
        color: #585987;
        font-size: 16px;
        line-height: 24px;
        width: 650px;
        margin-bottom: 56px;
    }

   .markdown-body .text {
        font-weight: 700;
        color: #8D8FBA;
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 40px;
    }

   .markdown-body .cards_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 726px;
        margin-bottom: 48px;
    }

   .markdown-body .card {
        display: flex;
        flex-direction: column;
        background-color: #FDFEFF;
        border-radius: 16px;
        width: 355px;
        height: 250px;
        align-items: center;
        border: solid 1px #D8D8E8;
        margin:0;
    }
  
  .card:hover {
      transform: scale(1.02);
      box-shadow: 0 2px 10px 0 #2C4CF529;
    }
  
  .card:active {
    transform: scale(1.02);
    box-shadow: 0 2px 10px 0 #2C4CF529;
    background-color: #F7F8FD;
  }
  
   .markdown-body .card__title {
        font-weight: 700;
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 24px;
        color: #212247;
    }

    .markdown-body .card__text {
        font-weight: 400;
        color: #585987;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        width: 290px;
        height: 66px;
        margin: 0;
    }

    .markdown-body .card__subtitle {
        font-weight: 600;
        text-transform: uppercase;
        color: #2C4CF5;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 8px;
    }

    .markdown-body .card__img {
        width: 248px;
        height: 140px;
        margin-bottom: 24px;
    }
  
 .markdown-body  a:link, a:visited, a:active {
        text-decoration: none;
    }
  
  @media(max-width: 992px) {
    
     .markdown-body .title {
        font-weight: 700;
        font-size:24px;
        line-height: 28px;
        margin-bottom:18px;
    }

    .markdown-body .subtitle {
        font-weight: bold;
        font-size: 22px;
        line-height: 19px;
        margin-bottom: 10px;
    }
    
     .markdown-body .main__text {
        font-size: 16px;
        line-height: 24px;
        width: 320px;
        margin-bottom: 26px;
    }
    
    .markdown-body .cards_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
    }
    
    .markdown-body .card {
        padding: 25px 5px;
        width: 300px;
        height: 368px;
    }
    
    .markdown-body .card__title {
        margin-bottom: 12px;
    }
    
    .markdown-body .card__img {
        margin-bottom: 12px;
    }
    
     .markdown-body .text {
        font-weight: 700;
        font-size: 16px;
        line-height:22px;
        margin-bottom: 20px;
    }
    
  }
</style>
`}</HTMLBlock>

<HTMLBlock>{`
<div class="card__api">
        <div class="card__api-left">
          	<img class="card__api-img" src="https://files.readme.io/5c72f6a-file-icon.png"></img>
            <p class="card__api-text">Conoce más sobre cómo comenzar a integrar<br>consultando nuestra API Reference.
            </p>
        </div>
        <hr class="card__api-line"></hr>
        <div class="card__api-rigth">
            <a href="/reference/autenticaci%C3%B3n" class="card__api-link">Conoce más
             <img class="card__api-icon" src="https://files.readme.io/4b5d3f6-Trailing_icon.png">
            </a>
        </div>
</div>

<style>
 .markdown-body .card__api {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #E5EDFF;
        border-radius: 16px;
        width: 727px;
        height: 100px;
        margin-bottom: 56px;
    }

    .markdown-body .card__api-img {
        width: 54px;
        height: 54px;
        margin: 0;
    }

   .markdown-body  .card__api-text {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #585987;
        margin:0
    }

    .markdown-body .card__api-rigth {
        display: flex;
        align-items: center;
      padding-right: 44.85px;
    }

    .markdown-body .card__api-link{
        font-weight: 600;
        color: #2C4CF5 !important;
        font-size: 16px;
        line-height: 24px;
        padding-right: 10.67px;
    }

   .markdown-body .card__api-icon {
        width: 20px;
        height: 20px;
    }
  
    .markdown-body .card__api-left {
        display: flex;
        gap:32px;
        align-items: center;
        padding-left: 27px
    }
  
  .markdown-body .card__api-line{
    height: 60px;
    border: solid 1px #D4D8FA;
  }
  
  @media(max-width:992px) {
   .markdown-body .card__api {
        flex-direction: column;
        width: 300px;
        height: 304px;
        padding: 30px;
        margin-bottom: 56px;
     
    }
    
    .markdown-body .card__api-left {
        flex-direction: column;
        align-items: flex-start;
        gap:32px;
        padding-left: 27px
    }
    
    .markdown-body .card__api-rigth {
        display: flex;
        align-items: flex-start;
        padding-right: 44.85px;
    }
    
    .markdown-body .card__api-line{
       display: none;
       height: 0;
    }
  }
  
</style>
`}</HTMLBlock>

<HTMLBlock>{`
<h2 class="subtitle">Habilita pago en efectivo</h2>
    <div class="line"> </div>
    <div class="container__cards-horizontal">
        <a class="card__horizontal" href="/docs/cargo-unico-efectivo-direct-api">
            <div class="card__horizontal-content">
          <img src="https://assets-prd.digitalfemsa.io/cpanel/statics/assets/img/cash.svg" /> 
                <div>
                    <h5 class="card__horizontal-subtitle">Cargo único</h5>
                    <p class="card__horizontal-text">Envía una referencia de pago
                        por cada compra.</p>
                </div>
            </div>
        </a>
        <a class="card__horizontal"
            href="/docs/cargo-unico-efectivo-direct-api#presentar-la-ficha-de-pago">
            <div class="card__horizontal-content">
          			<img src="https://assets-prd.digitalfemsa.io/cpanel/statics/assets/img/more.svg" /> 
                <div>
                    <h5 class="card__horizontal-subtitle">Notificaciones y<br>Referencias de pago</h5>
                    <p class="card__horizontal-text">Configura las notificaciones de pago, cancelación, expiración y
                        las referencias de pago.</p>
                </div>
            </div>
        </a>
        <a href="/docs/cargo-recurrente-efectivo-direct-api">
            <div class="card__horizontal">
                <div class="card__horizontal-content">
              		<img src="https://assets-prd.digitalfemsa.io/cpanel/statics/assets/img/wallet.svg" /> 
                    <div>
                        <h5 class="card__horizontal-subtitle">Cargo recurrente</h5>
                        <p class="card__horizontal-text">Envía una referencia de pago que se puede utilizar para más de
                            un pago y autoriza cada uno de ellos.</p>
                    </div>
                </div>
            </div>
        </a>
        <a class="card__horizontal" href="/docs/resumen-devoluciones-efectivo">
            <div class="card__horizontal-content">
          		<img src="https://assets-prd.digitalfemsa.io/cpanel/statics/assets/img/cash_oxxo.svg" /> 
                <div>
                    <h5 class="card__horizontal-subtitle">Devoluciones</h5>
                    <p class="card__horizontal-text">Genera devoluciones en efectivo a través de Oxxo.</p>
                </div>
            </div>
        </a>
    </div>

<style>
   .markdown-body  .card__horizontal-content {
        width: 356px;
        height: 127px;
        display: flex;
        align-items: center;
    }
  
  .card__horizontal-content:hover {
      transform: scale(1.02);
      box-shadow: 0 1px 3px 1px #2C4CF529;
      border: solid 1px #D8D8E8;
      border-radius: 8px;
    }
  
   .card__horizontal-content:active {
    transform: scale(1.02);
    box-shadow: 0 2px 10px 0 #2C4CF529;
    background-color:#F7F8FD;
  }

    .markdown-body .card__horizontal-img {
        width: 72px;
        height: 72px;
    }

   .markdown-body  .card__horizontal-subtitle {
        font-weight: 700;
        color: #212247;
        font-size: 18px;
        line-height: 24px;
        margin: 0
    }
 
    .markdown-body .card__horizontal-text {
        font-weight: 400;
        color: #585987;
        font-size: 14px;
        line-height: 22px;
        width:262px;
        margin: 0
    }
  
    .markdown-body .container__cards-horizontal {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-top: 32px;
        padding-bottom: 56px;
        width: 726px;
    }

    .markdown-body .subtitle-3 {
        font-weight: 600;
        text-transform: uppercase;
        color: #585987;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .markdown-body .line {
        border-bottom: solid 1px #D8D8E8;
        width: 726px;
    }
  
  @media(max-width:992px) {
  .markdown-body .container__cards-horizontal {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
        padding-top: 16px;
        padding-bottom:28px;
    }
    
     .markdown-body  .card__horizontal-content {
        width: 300px;
        height: 120px
    }
    
    .markdown-body .card__horizontal-text {
        font-size: 14px;
        line-height: 18px;
        width:210px;
    }
    
    .markdown-body .line {
        width: 320px;
    }
  }
  
  
</style>
`}</HTMLBlock>

<HTMLBlock>{`
<h2 class="subtitle">Después del pago</h2> 
<div class="container__cards-without-image">
        <a class="card-without-content" href="/docs/eventos-webhooks">
            <h5 class="card-without-subtitle">Webhooks</h5>
            <p class="card-without-text">Recibe eventos relacionados a tus transacciones para automatizar tus
                procesos.</p>
        </a>
        <a class="card-without-content" href="/docs/eventos-conekta">
            <h5 class="card-without-subtitle">Estatus de transacciones</h5>
            <p class="card-without-text">Desde el Panel revisa el estado de tus transacciones y movimientos.
            </p>
        </a>
        <a class="card-without-content" href="/reference/logs">
            <h5 class="card-without-subtitle">Logs</h5>
            <p class="card-without-text">Consulta vía API los registros de solicitudes generadas por tu negocio.</p>
        </a>
</div>

<style>
   .markdown-body .container__cards-without-image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 24px;
        padding-top: 16px;
        width: 726px;
        padding-bottom:185px
    }

     .markdown-body .card-without-content {
        width: 355px;
        border-radius: 16px;
        background-color: #F7F8FD;
        padding: 16px;
    }
  
   .markdown-body .card-without-content:hover {
      transform: scale(1.02);
      box-shadow: 0 2px 10px 0 #2C4CF529;
      border: solid 1px #D8D8E8;
    }
  
    .card-without-content:active{
    transform: scale(1.02);
    box-shadow: 0 2px 10px 0 #2C4CF529;
    background-color: #2C4CF5;
    }
    
  .card-without-content:active > .card-without-subtitle {
     color: #F7F8FD;
    }

    .card-without-content:active > .card-without-text {
      color: #F7F8FD;
     }
    
     .markdown-body .card-without-subtitle {
        font-weight: 700;
        color: #212247;
        font-size: 16px;
        line-height: 24px;
        margin-top: 0;
        margin-bottom: 8px;
    }
  
     .markdown-body .card-without-text {
        font-weight: 400;
        color: #585987;
        font-size: 14px;
        line-height: 22px;
        margin: 0;
    }
  
  @media(max-width:992px) {
    
    .markdown-body .container__cards-without-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
        padding-bottom: 40px;
    }
    
     .markdown-body .card-without-content {
        width: 300px;
        padding: 15px 20px;
        height: 130px;
    }
    
  }
  
</style>
`}</HTMLBlock>