Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • ianhoughton 281 posts 605 karma points c-trib
    Jun 04, 2019 @ 19:55
    ianhoughton
    0

    Saving Delivery Options - TC.GeneratePaymentForm

    Tea Commerce support
    Umbraco 7

    I have a basket step called Delivery Options that shows a dropdown of the available delivery methods, and a textfield for customer comments.

    <div class="checkout-form">
@using (Html.BeginUmbracoForm<TeaCommerceController>("SaveDeliveryOption"))
{
    @Html.AntiForgeryToken()

    <h3 class="form-title">Delivery Cost</h3>
    <div class="form-group">
        <fieldset class="half left">
            @Html.LabelFor(x => x.DeliveryOptions, "Delivery Option *", new { @class = "hidden" })
            <div class="select-wrapper">
                @Html.DropDownListFor(x => x.SelectedDeliveryOption, Model.DeliveryOptions)
            </div>
        </fieldset>
    </div>
    <fieldset>
        @Html.LabelFor(x => x.Comments, "Special Delivery Instructions")
        @Html.TextAreaFor(model => model.Comments, new { autocomplete = "off", rows = "4" })
    </fieldset>
}
@Html.Raw(TC.GeneratePaymentForm(Model.StoreId, "<button type=\"submit\" class=\"button black pull-right\">Proceed</button>"))
</div>

    I have 2 issues:

    1. I had to move the button created by TC.GeneratePaymentForm outside of my own form, this is working fine and moving me on to the next payment page.
    2. Obviously my own form is not saving the delivery data as SaveDeliveryOption on the controller is not getting hit.

    What am I doing wrong, how do I get the delivery options form to save/process the data, but then post to the payment form as usual?

    Note: The next page in the process is the payment page, which is rendering ok, and payments are working.

    Copy Link
  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Jun 05, 2019 @ 08:07
    Matt Brailsford
    100

    Hi Ian,

    The intent of the TC.GeneratePaymentForm method is that it's usually displayed on the final confirmation page rather than mid way through the details capture process. What this method does is to generate a form which is set to pass through data and redirect to the payment gateway. Ultimately, this isn't intended to perform any other actions and it assumes that the order is fully ready to have it's payment captured.

    The reason why you controller isn't getting hit then is because you've effectively got 2 forms side by side now. Your form, and the one generated by GeneratePaymentForm and the submit button is only within this later form so when you do hit submit, this will just submit that 1 form and then redirect to the payment gateway.

    Now, you have 2 options really.

    1) Split your Delivery Options selection onto it's own screen and then introduce another screen after it which displays a confirmation page and it's this page that has the GeneratePaymentForm on it. This is the traditional TC way of doing it.

    2) A trick I've used in the past is to create a hidden iframe after your form that has an ID assigned to it, then have your Delivery Options form perform it's post action with the forms target set to the iframe ID. This will make the form post via the iframe and keep the main page visible. Your controller can then do it's update, and return to a view (this is still in the iframe so it's hidden). In that view, you can keep it pretty much empty apart from a call to TC.GeneratePaymentForm but instead of passing a submit button string to be pressed, pass it an empty hidden field (to make the whole form hidden) and then use some JS to auto submit the form back up in the top most window, triggering this second form and making it continue on automatically.

    @using TeaCommerce.Umbraco.Web;
<html>
    <head>
        <title></title>
    </head>
    <body>
        @Html.Raw(TC.GeneratePaymentForm(Model.StoreId, "<input type=\"hidden\" />"))
        <script type="text/javascript">
            document.forms[0].setAttribute("target", "_top");
            document.forms[0].submit();
        </script>
    </body>
</html>

    It's a little around the houses, but effectively you need 2 form submissions, one to capture your delivery options and 1 to redirect to the payment gateway so you can either do that as two separate visible screens, or in an approach like option 2 which maintains the look of a single post, but effectively performs the second post via a hidden iframe.

    Hope this helps

    Matt

    Copy Link
  • ianhoughton 281 posts 605 karma points c-trib
    Jun 05, 2019 @ 10:06
    ianhoughton
    0

    Hi Matt,

    Thanks for the concise response!!

    I've spoken with the client and we're going for the easier option to add the intermediary page back in.

    Copy Link
  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Jun 05, 2019 @ 10:18
    Matt Brailsford
    0

    Hey Ian,

    No problem. Glad I could help.

    Matt

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft