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
Sign In or Register to comment.