0

Estoy integrando pagos con tarjeta en mi web, hasta ahora el proceso esta correcto, pero necesito redirigir a otra URL una vez el status sea status: "rejected" o status: "aproved" (Aclaro Tengo poco conocimiento en javascript) y en la documentación que sigo no hay más datos.

El backend lo tengo resuelto, cuando un pago se hace correctamente recibo: introducir la descripción de la imagen aquí

Ahora necesito redirigir a otro sitio por ejemplo /success

 <script>
       const cardForm = mp.cardForm({
  amount: "100.5",
  autoMount: true,
  form: {
    id: "form-checkout",
    cardholderName: {
      id: "form-checkout__cardholderName",
      placeholder: "Nombre",
    },
    cardholderEmail: {
      id: "form-checkout__cardholderEmail",
      placeholder: "E-mail",
    },
    cardNumber: {
      id: "form-checkout__cardNumber",
      placeholder: "Número de la tarjeta",
    },
    expirationDate: {
      id: "form-checkout__expirationDate",
      placeholder: "MM/YY",
    },
    securityCode: {
      id: "form-checkout__securityCode",
      placeholder: "000",
    },
    installments: {
      id: "form-checkout__installments",
      placeholder: "Cuotas",
    },
    identificationType: {
      id: "form-checkout__identificationType",
      placeholder: "Tipo de documento",
    },
    identificationNumber: {
      id: "form-checkout__identificationNumber",
      placeholder: "Número de documento",
    },
    issuer: {
      id: "form-checkout__issuer",
      placeholder: "Banco emisor",
    },
  },
  callbacks: {
    onFormMounted: error => {
      if (error) return console.warn("Form Mounted handling error: ", error);
      console.log("Form mounted");
    },
    onSubmit: event => {
      event.preventDefault();

      const {
        paymentMethodId: payment_method_id,
        issuerId: issuer_id,
        cardholderEmail: email,
        amount,
        token,
        installments,
        identificationNumber,
        identificationType,
      } = cardForm.getCardFormData();

      fetch("/process_payment", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          token,
          issuer_id,
          payment_method_id,
          transaction_amount: Number(amount),
          installments: Number(installments),
          description: "Descripción del producto",
          payer: {
            email,
            identification: {
              type: identificationType,
              number: identificationNumber,
            },
                        },
                    }),
                })
                    .then(response => {
                        return response.json();
                    })
                    .then(result => {
                        if(!result.hasOwnProperty("error_message")) {
                            document.getElementById("success-response").style.display = "block";
                            document.getElementById("payment-id").innerText = result.id;
                            document.getElementById("payment-status").innerText = result.status;
                            document.getElementById("payment-detail").innerText = result.detail;
                        } else {
                            document.getElementById("error-message").textContent = result.error_message;
                            document.getElementById("fail-response").style.display = "block";
                        }
                        
                        $('.container__payment').fadeOut(500);
                        setTimeout(() => { $('.container__result').show(500).fadeIn(); }, 500);
                    })
                    .catch(error => {
                        alert("Unexpected error\n"+JSON.stringify(error));
                    });
            },
    onFetching: (resource) => {
      console.log("Fetching resource: ", resource);

      // Animate progress bar
      const progressBar = document.querySelector(".progress-bar");
      progressBar.removeAttribute("value");

      return () => {
        progressBar.setAttribute("value", "0");
      };
    }
  },
});
   </script>

Ahora solo tengo hecho que en la vista imprima el status y el ID, solo necesito redirigir a otra URL.

También me gustaría saber si es una buena práctica hacerlo de esta forma

2
  • 1
    if (status === 'approved') window.location.href = 'misitio.com/success' Commented el 4 may. 2022 a las 1:32
  • Gracias por la ayuda, podria aplicarlo en mi codigo .?
    – seonica
    Commented el 4 may. 2022 a las 2:31

1 respuesta 1

1

Yo digo que en la promesa dónde entra result es mas efectivo acceder al valor en el objeto directamente

.then(result => {
if(result.status == "approved"){
//Tu lógica de aprobación
// window.location.href = "/thanks";
// Ejemplo de redirigir 
}else{
//Tu lógica de rechazo
}
})

Igual el backend puede regresar un booleano y solo usar

if(result.status){}
1
  • gracias por la ayuda, si quisiera pasar los valores de 'status' dentro del if a la otra vista "/thanks"; con js como podria hacerlo?
    – seonica
    Commented el 4 may. 2022 a las 22:38

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.