2

Tengo una variable en PHP llamada $output la cual al hacer un var_dump() muestra los siguientes datos:

C:\wamp64\www\ecuservi\profile\retornarventa.php:12:
object(Transbank\Webpay\wsTransactionDetailOutput)[9]
  public 'authorizationCode' => string '1415' (length=4)
  public 'paymentTypeCode' => string 'VD' (length=2)
  public 'responseCode' => int 0
  public 'sharesNumber' => int 0
  public 'amount' => string '11900' (length=5)
  public 'commerceCode' => string '597020000540' (length=12)
  public 'buyOrder' => string '849401686' (length=9)

En el código PHP quiero almacenar las variables con localStorage para mostrarlas en otro archivo:

$tokenWs = filter_input(INPUT_POST,'token_ws');
$result = $transaction->getTransactionResult($tokenWs);
$output = $result->detailOutput;
var_dump($output);
if($output->responseCode == 0){


    echo '<script>window.localStorage.clear();</script>';
    echo '<script>window.localStorage.setItem("codigoautorizacion",'.$output->authorizationCode.');</script>';
    echo '<script>window.localStorage.setItem("tipopago",'.$output->paymentTypeCode.');</script>';
    echo '<script>window.localStorage.setItem("precio",'.$output->amount.');</script>';
    echo '<script>window.localStorage.setItem("ordencompra",'.$output->buyOrder.');</script>';
    echo '<script>window.localStorage.setItem("numerotarjeta",'.$result->cardDetail->cardNumber.');</script>';  
    echo '<script>window.localStorage.setItem("responseCode",'.$output->responseCode.');</script>';
}

Pero por más que lo intento resulta ser que la variable paymentTypeCode no se muestra en la otra página, pero sí lo hacen las demás variables, al hacer un console.log(tipopago) muestra null.

¿Cómo puedo lograr obtener dicha variable?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Precio <span id="precio"></span></p>
    <p>Codigo  <span id="codigoautorizacion"></span></p>
    <p>Tarjeta  <span id="numerotarjeta"></span></p>
    <p>N° Orden  <span id="ordencompra"></span></p>
    <p>Tipo Pago  <span id="tipopago"></span></p>   
    <script>
        document.getElementById('precio').innerHTML = window.localStorage.getItem('precio');
        document.getElementById('codigoautorizacion').innerHTML = window.localStorage.getItem('codigoautorizacion');
        document.getElementById('numerotarjeta').innerHTML = window.localStorage.getItem('numerotarjeta');
        document.getElementById('ordencompra').innerHTML = window.localStorage.getItem('ordencompra');
        document.getElementById('tipopago').innerHTML = window.localStorage.getItem('tipopago');
        console.log(window.localStorage.getItem('paymentTypeCode'));
    </script>   
</body>
</html>

Precio 11900

Codigo 1415

Tarjeta 7763

N° Orden 849401686

Tipo Pago
4
  • ¿Cuál es el HTML generado por el código PHP? ¿Te aparece algún mensaje de error en la consola de depuración de javascript? Además, ¡¿estás intentando buscar por id elementos que aún no han sido generados en el DOM?! Commented el 27 ene. 2021 a las 6:36
  • El Html es lo último que se ve en la publicación, desde donde dice precio 11900 hacia abajo, son esas 5 líneas que se se generan en el html, y la única variable que no se muestra es paymentTypeCode, las demás si se muestran Commented el 27 ene. 2021 a las 6:42
  • ¿Podrías comprobar si mi respuesta solucionó tus problemas? Además, por si no lo sabías, podrías usar un único registro del almacenamiento interno del navegador para almacenar todos los valores. Si lo deseas te indico cómo hacerlo (simplifica muchísimo tu código). Commented el 27 ene. 2021 a las 6:49
  • He agregado lo que te comenté a mi respuesta. Si tienes alguna duda sobre su funcionamiento házmelo saber en un comentario. Commented el 27 ene. 2021 a las 10:21

1 respuesta 1

3

En tu código veo varios fallos que deberías corregir. Algunos están relacionados con tu problema y otros están relacionados con problemas de seguridad, ya que tu código es vulnerable a ataques XSS (coss-site scripting).

Para empezar, modificaré la manera en la que guardas los valores desde javascript:

if ($output->responseCode == 0) {
    ?><script>
        window.localStorage.clear();
        window.localStorage.setItem(
            "codigoautorizacion",
            <?= json_encode($output->authorizationCode) ?>
        );
        window.localStorage.setItem(
            "tipopago",
            <?= json_encode($output->paymentTypeCode) ?>
        );
        window.localStorage.setItem(
            "precio",
            <?= json_encode($output->amount) ?>
        );
        window.localStorage.setItem(
            "ordencompra",
            <?= json_encode($output->buyOrder) ?>
        );
        window.localStorage.setItem(
            "numerotarjeta",
            <?= json_encode($result->cardDetail->cardNumber) ?>
        );
        window.localStorage.setItem(
            "responseCode",
            <?= json_encode($output->responseCode) ?>
        );
    </script><?php
}

Cambios realizados:

  • Una única etiqueta <script> para todo el código javascript, no es necesario una por cada línea.
  • He salido de PHP para generar con sencillez el código HTML/javascript, en vez de ir haciendo salidas parciales con echo línea a línea.
  • La única forma segura de enviar datos desde PHP a javascript (evitando XSS y otros problemas relacionados) es haciendo uso de json_encode().

En el lado de la página que debe mostrar esos valores, vamos a esperar a que se genere el DOM antes de acceder a elementos por su id usando el evento Events.DOMContentLoaded de la siguiente manera:

<script>
    /* No ejecutamos el siguiente código hasta que el DOM haya sido generado */
    document.addEventListener("DOMContentLoaded", function(e) {
        document.getElementById('precio').innerText = window.localStorage.getItem('precio');
        document.getElementById('codigoautorizacion').innerText = window.localStorage.getItem('codigoautorizacion');
        document.getElementById('numerotarjeta').innerText = window.localStorage.getItem('numerotarjeta');
        document.getElementById('ordencompra').innerText = window.localStorage.getItem('ordencompra');
        document.getElementById('tipopago').innerText = window.localStorage.getItem('tipopago');
        console.log(window.localStorage.getItem('paymentTypeCode'));
    });
</script>   

Esto te permitirá poder mover el código javascript a un archivo externo y no preocuparte de que se ejecute antes o después del HTML que debe acceder.

Además, he cambiado innerHTML a innerText para evitar, de nuevo, problemas relacionados con XSS (caracteres HTML que se puedan malinterpretar).


Te sugiero una forma alternativa sugerida para simplificar tu código.

En la parte que guardas los datos:

if ($output->responseCode == 0) {
    ?><script>
        window.localStorage.clear();
        window.localStorage.setItem(
            "result",
            JSON.stringify(<?= json_encode($result) ?>)
        );
    </script>DATOS ALMACENADOS<?php
}

Como no se puedan guardar datos sin serializar en localStorage, hago uso de JSON.stringify para convertir el objeto JSON generado desde PHP a una cadena que se pueda almacenar.

En la parte que lee los datos:

document.addEventListener("DOMContentLoaded", function(e) {
    /* Obtenemos los datos almacenados */
    let result = JSON.parse(window.localStorage.getItem("result"));
    document.getElementById('precio').innerText = result.detailOutput.amount;
    document.getElementById('codigoautorizacion').innerText = result.detailOutput.authorizationCode;
    document.getElementById('numerotarjeta').innerText = result.cardDetail.cardNumber;
    document.getElementById('ordencompra').innerText = result.detailOutput.buyOrder;
    document.getElementById('tipopago').innerText = result.detailOutput.paymentTypeCode;
    console.log(result.detailOutput.paymentTypeCode);
});

Tienes el código de esta respuesta funcionando en los siguientes enlaces:

1
  • 1
    Muchas gracias estimado, su respuesta me a funcionado a la perfección Commented el 29 ene. 2021 a las 22:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.