asp.netopayo

cardIdentifier returned in URL QueryString rather than hidden-field

I have integrated SagePay's 'Drop In Checkout' into a test solution. The issue is, when I am submitting the form for the 'cardIdentifier', it is returned in the URL as a QueryString, rather than a hidden field, as per the documentation.

http://integrations.sagepay.co.uk/content/getting-started-integrate-using-drop-checkout

"Once the customer initiates the form submission, the payment details are validated, tokenised and passed as a hidden field called cardIdentifier which is then posted with the rest of the form contents"

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomPayment.aspx.cs" Async="true" Inherits="SagePayDropInTest.CustomPayment" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
    <script src="https://pi-test.sagepay.com/api/v1/js/sagepay-dropin.js"></script>

  </head>
  <body>

    <div id="main">
      <h1>My Test Shop</h1>
      <form id ="checkout-form">
        <h2>Payment Details</h2>
        <div id="payment-details"></div>
        <div id="submit-container">
         <input type="submit"/>
        </div>
      </form>
    </div>

<script>
sagepayCheckout({
merchantSessionKey: '<%=MerchID%>',
containerSelector: '#payment-details'
}).form({
formSelector: '#checkout-form'
});
</script>

</body>
</html>

C# CodeBehind

namespace SagePayDropInTest
{
public partial class CustomPayment : System.Web.UI.Page
{
    public string MerchID = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        MerchID = GetMerchSessionID();
}}}

It does return the cardIdentifier, but just as a QueryString, but I would rather I was getting it as a hidden-field, as documented. The rest of the integration works as documented, it is just this step which is throwing me.

I am no doubt missing something obvious, and any guidance would be much appreciated.

Solution

  • Try changing the <form> tag to include a method="post" attribute. This should mean that the cardIdentifier is sent as a posted field rather than in the query string. The default method for a form is normally a GET request, the SagePay JS probably doesn't change this.

    Also, there looks like an extra space in the <form id ="checkout-form"> tag as it is. I would recommend taking this out as some less forgiving browsers may not parse this correctly, breaking the CSS selector in your JS.