Payment sets question

kdawg1981kdawg1981 Member
So we have a field on our form that asks the customer how they would like to have the payment made either by ACH or credit/debit card. Now is there any ways to customize this to where if the customer says to use bank account option, when they would hit next, is there a way to have the pay by ACH come up. I looked through the documentation, but I did't see anything in there would popped out at me. Here is the code that I have for the drop down selection.
<div>
<label for="Payment_meth">Payment Method:</label>
<select name="Payment Method" id="pay_meth">
<option value="Bank Account">Bank Account (Preferred)</option>
<option value="Debit/Credit">Debit/Credit Card</option>
</select>
</div>
Comments
  • fc_marijafc_marija FoxyCart Team
    edited July 9
    Hi @kdawg1981 -

    Looks like you have your payment sets set up correctly. You'll want to pass the template set code that you set up here (https://admin.foxycart.com/admin.php?ThisAction=TemplateSets) for your ACH template set to the cart when the customer selects "Bank Account" from the select.

    Here's the article on applying a template set: https://wiki.foxycart.com/v/2.0/template_sets.

    You could use JavaScript to make a JSONP request to the cart from your product page to change the template set depending upon what's selected in the "Payment Method" select. There's a JavaScript example here: https://wiki.foxycart.com/v/2.0/template_sets#applying_a_template_set. You'd just have to change the logic to get the value from the select and send the appropriate cart link. You could set the link as an attribute on the selection option if you like.

    Something like this:
    HTML:

    <div>
    <label for="Payment_meth">Payment Method:</label>
    <select name="Payment Method" id="pay_meth">
    <option value="Bank Account" data-payment-set="https://your-store.foxycart.com/cart?template_set=your-ACH-template-set-name">Bank Account (Preferred)</option>
    <option value="Debit/Credit" data-payment-set="https://your-store.foxycart.com/cart?template_set=DEFAULT">Debit/Credit Card</option>
    </select>
    </div>


    JavaScript:
    $(document).ready(function() {
    $("#pay_meth").on("change", function(e) {
    FC.client.request($(this).find(":selected").attr("data-payment-set"));
    return false;
    });
    });


    You'll also want to set your template set on page load to the ACH template set, since you have that set as your first option, which will be the default. Does that make sense? Let us know if you need further direction.
  • kdawg1981kdawg1981 Member
    edited July 10
    @fc_marija

    "You'll also want to set your template set on page load to the ACH template set, since you have that set as your first option, which will be the default. "

    Can you tell more on how to set this? Is this in the configuration page on the admin site or would it here:
    <form accept-charset="utf-8" action="https://cyas.foxycart.com/cart?template_set=bank_account" method="post">

    I followed the instructions for HTML and inserted into my page. When I select Bank account it does come up with the ACH payment set, but if I select debit/credit it will come up with the ACH page and not the card payment information. Here is what I have so for:
    <div>
    <label for="Payment_meth">Payment Method:</label>
    <select name="Payment Method" id="pay_meth">
    <option value="Bank Account" data-payment-set="https://cyas.foxycart.com/cart?template_set=bank_account">Bank Account (Preferred)</option>
    <option value="Debit/Credit" data-payment-set="https://cyas.foxycart.com/cart?template_set=DEFAULT">Debit/Credit Card</option>
    </select>
    </div>


    Please let me know if I'm doing something wrong.

    Thank you
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Sorry to hear you're having trouble getting it working. Is your test page online somewhere that we could see it in action?
  • @fc_marija

    So I added the changes to the HTML along with adding the javascript, but when I'm testing it and I select the debit /credit card option on the form, it's still defaulting to the ACH and not giving me the credit debit card payment option. I created a new payment set and template like you suggested and still not getting what I need. I know you said that I needed to change something in the javascript. "You'd just have to change the logic to get the value from the select and send the appropriate cart link. You could set the link as an attribute on the selection option if you like. Can you tell me what you were talking about here. Please forgive me my javascript is a little rusty since I don't use it on a regular basis.


    <script>
    $(document).ready(function() {
    $("#pay_meth").on("change", function(e) {
    FC.client.request($(this).find(":selected").attr("data-payment-set"));
    return true;
    });
    });
    </script>
  • kdawg1981kdawg1981 Member
    edited July 12
    @fc_marija

    When I added the JQuery to the HTML and I'm debugging it in Chrome dev tools, It's showing an error on the following screenshot:
    image
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    We've followed up on your thread in our helpdesk - but just to answer publicly here too in case someone comes across this thread in the future, for an "FC is not defined" error, you'll need to ensure that you've included the loader.js file for your store. It's accessible from the "Sample Code" section of the Foxy administration.

    When including jQuery scripts on your page as well, it's important to make sure you have also included jQuery on your page - which you can use the Google CDN to include: https://developers.google.com/speed/libraries/#jquery
  • @fc_adam

    So I have a question regarding this. I have this implemented into the site, but when I'm doing some regression tests on the site and I would select one payment method, then hit the back button on the page and it would go back to my form and I would choose the debit card payment method, and then I would hit the back button again on the checkout page and go back to the original payment method but it seems like there might be some type of caching issue to where it's not changing to the different payment method on the checkout page and leaving it as the same as before. The only way that I can clear the issue up is by clearing the cache from the browser or going to another browser to do the transaction.

    My question would be is there a way within the code to clear cache each time the customer would do this? There might not be a customer that would do this, but just trying to cover all the basis on the site and the different scenarios that come with it. If you need more information I can do a screencast of what I'm doing to show you the process that I'm doing on my site if that would help.

    Thank you for the help
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Good question. It sounds like the javascript isn't executing as it should when you go back.

    I know it wasn't previously, but is the page you're testing with online somewhere now that we could interact with it ourselves to reproduce what you're seeing? If you'd prefer to keep it private, you can whisper it by clicking the "whisper" link when replying, and enter my forum username in the text input that appears.
  • fc_adamfc_adam FoxyCart Team
    @kdawg1981,

    Thanks for whispering the details of your set up. I've spotted the issue here - specifically, as the javascript request to change the template set only runs when the dropdown is actually changed, when you go back in the browser and it's already set to the first option - that request doesn't run.

    There are two ways you could correct this.

    The first option would work well if you don't care about the "Payment Method" select field value actually being attached as a product attribute. If that's fine - you can remove the javascript that hooks into that field, and update the select to be simply this:
    <select name="template_set" id="pay_meth">
    <option value="DEFAULT">Bank Account (Preferred)</option>
    <option value="credit_debit">Debit/Credit Card</option>
    </select>
    That will ensure the template set value will always go through with the add to cart, as it's directly in the form.

    If you did specifically want to have the "Payment Method" value as a product attribute, you can approach it a little differently with the javascript. Instead of dynamically setting it via a cart request, include it as a hidden form attribute instead, and update it on page load as well as on change.

    To do that, add this next to the other hidden inputs in your form:
    <input type="hidden" name="template_set" value="DEFAULT">
    Next, update your select object like this:
    <select name="Payment Method" id="pay_meth">
    <option value="Bank Account" data-payment-set="DEFAULT">Bank Account (Preferred)</option>
    <option value="Debit/Credit" data-payment-set="credit_debit">Debit/Credit Card</option>
    </select>
    Finally, update the javascript like this:
    <script>
    $(document).ready(function() {
    $("#pay_meth").on("change", updateTemplateSet);
    updateTemplateSet();
    });

    function updateTemplateSet() {
    $('[name="template_set"]').val($("#pay_meth option:selected").attr("data-payment-set"));
    }
    </script>
    That should ensure that the template set parameter is always passed as it's set to based on the dropdown.

    Let us know if you have any questions about applying either of those to your page, or if you have anything else we can help with.
  • @fc_adam Thank you for the input and help with this. I will look into both solutions to see which one would better suit. I really appreciate the help.
Sign In or Register to comment.