send data with a redirect

Question

i'm implementing card payments in my app, when a payment is approved or rejected it redirects to a URL

I need when redirecting to send the variable 'status' 'status detail' 'id' to the controller

     <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.status == "approved"){

window.location.href = "/thanks";

}else{
  window.location.href = "/rejected";
}
})
                    .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>

i don't have much knowledge with js, so far the process is correct but I need to redirect and pass the data

How can I pass that data with js? help please.

Answer 1

You should not be storing payment transaction details using ajax or GET. This is insecure and very vulnerable to being exploited.

I suppose you use the transaction info on the backed, such as approved or accredited to offer some goods or service to the customer. I could easily POST using ajax or forge the GET request and fake a transaction that you would store on your backend. I could then receive the service for free.

You need to validate payment on the backend. So your payment provider should have some webhook where they POST the transaction details to your API, you only allow them to post to that API. Then you store those details in your DB and fulfill the order.

Another approach is to encrypt the form details and send it to your backend, then from your backend you post it to the payment provider, and they respond through the backend. The reason it has to be encrypted on the frontend is that credit card info should never touch your servers because it's a big security issue. The encryption JS is usually provided by the payment provider/merchant.

Try to check if your paycheck provider offers some alternatives, such as a webhook or an encryption JS for your forms.

Answer 2

simply you can pass details using query string to the url or just call ajax like this way

window.location.href = "/thanks?status="+result.status+"&id="+result.id;

or using ajax

                $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{url('/thanks')}}",
                        type: "POST",
                        data:  {"id" : result.id,"status":result.status},
                        success: function(data){
                            console.log("ajax called succesfully");
                        }

                    });