Combine Payment Selection and Payment Information Pages

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tkingsle
    Mivite Lite

    • Aug 2013
    • 1
    #1

    Combine Payment Selection and Payment Information Pages

    Is there a way to combine the payment selection and payment information pages when using the credit card payment with simple validation module? By default, customers must select what type of credit card they'd like to pay with, click continue, then put in their credit card information. I find this to be extremely intuitive, and we have been getting customer complaints regarding it. Especially since they commonly miss the payment selection form, and assume that we only accept American Express since that is the default credit card type.

    Is there a way to merge these two pages?
    Tags: credit card, module, payment
    • Brennan
      Super Moderator









      • Jun 2009
      • 3481
      #2
      Re: Combine Payment Selection and Payment Information Pages

      Yes this is possible. The reason they are two pages is because the credit card page (OPAY) changes depending on which payment gateway you use, and if you use PayPal, all the fields change.

      If you are only using the Credit Card with Simple Validation module, it becomes much simpler.

      At a high level to move the payment drop down box to the same page you enter your credit card information page on the card number here are the steps:

      1. Hide the payment drop down from OSEL. It still needs to be there because it is a required field on OPAY (the credit card page). You can move it to a hidden input or hide is using CSS.
      2. On OPAY you need to add the payment selection drop down above the credit card fields. You can just hard code this.
      3. If you want you can add some JavaScript validation to force the user to select a card type so they always select the correct one vs having a default one.

      The other option completely is to leave it on the page it is now and add some JavaScript Validation to force the customer to select a card type. Or we have seen changing the drop down to radio buttons work really well for usability.
      Brennan Heyde
      VP Product
      Miva, Inc.
      [email protected]
      https://www.miva.com

        Comment

        • Keitho
          Mighty Mivite

          • Mar 2006
          • 634
          #3
          Re: Combine Payment Selection and Payment Information Pages

          As an interim step you can change the default credit card type. I set my store to default to VISA and only rarely do buyers mess up since it is the most popular card.
          Keith Oratz
          PrepareSmart, LLC - Emergency Preparedness Supplies and Professional Grade Search and Rescue Gear
          www.preparesmart.com

            Comment

            • grafcomm
              Mini Mivite

              • Sep 2010
              • 40
              #4
              Re: Combine Payment Selection and Payment Information Pages

              I am using Payflow Pro, anyone have instructions using this method?

              I tried adding this to OPAY, but when clicking on Continue, it sends me back to OSEL instead of processing the payment

              <label for="PaymentMethod" class="bold">Pay With:</label>
              <input type="radio" name="PaymentMethod" value="paypaladv:DISCOVER"> Discover &nbsp;&nbsp;&nbsp;
              <input type="radio" name="PaymentMethod" value="paypaladv:MASTERCARD"> MasterCard &nbsp;&nbsp;&nbsp;
              <input type="radio" name="PaymentMethod" value="apaypaladv:VISA" CHECKED> Visa &nbsp;&nbsp;&nbsp;

              Under Items paymentmethods, paymentmethod and payment are all checked in OPAY

              http://dev.formal-invitations.com/ (development version, switching from mmui to cssui)

                Comment

                • Brennan
                  Super Moderator









                  • Jun 2009
                  • 3481
                  #5
                  Re: Combine Payment Selection and Payment Information Pages

                  That code should work. I noticed your visa option has a typo in the value: apaypaladv:VISA shoule be: paypaladv:VISA. Perhaps that is what is causing you issues?
                  Last edited by Brennan; 10-22-13, 06:57 AM.
                  Brennan Heyde
                  VP Product
                  Miva, Inc.
                  [email protected]
                  https://www.miva.com

                    Comment

                    • grafcomm
                      Mini Mivite

                      • Sep 2010
                      • 40
                      #6
                      Re: Combine Payment Selection and Payment Information Pages

                      Originally posted by Brennan View Post
                      That code should work. I noticed your visa option has a typo in the value: apaypaladv:VISA shoule be: paypaladv:VISA. Perhaps that is what is causing you issues?
                      I just corrected it and it still sends me back to OSEL, when I click continue http://dev.formal-invitations.com/

                      Here is the OPAY page code:


                      <mvt:item name="couponrd" param="opay" />


                      <mvt:item name="html_profile" />
                      <head>
                      <title>&mvt:store:name;: Checkout: Payment Information</title>
                      <base href="&mvt:global:basehref;" />
                      <mvt:item name="head" param="css_list" />
                      <mvt:item name="head" param="head_tag" />
                      </head>
                      <body class="OPAY one-column">
                      <div id="site-container">
                      <div id="global-header"><mvt:item name="hdft" param="global_header" /></div>
                      <div id="navigation-bar"><mvt:item name="navbar" /></div>
                      <table id="content-container">
                      <tr>
                      <td id="left-navigation"><mvt:item name="category_tree" /></td>
                      <td id="main-content">
                      <div id="page-header"><mvt:item name="hdft" param="header" /></div>


                      <h1>Enter Payment Information</h1>


                      <div id="customer-fields" class="non-editable"><mvt:item name="customer" /></div>
                      <div id="basket-contents" class="non-editable"><mvt:item name="basket" /></div>


                      <mvt:if expr="l.settings:messages:error_message_count">
                      <div class="error-message">
                      <mvt:foreach iterator="error" array="messages:error_messages">
                      &mvt:error;
                      </mvt:foreach>
                      </div>
                      </mvt:if>
                      <mvt:if expr="l.settings:messages:information_message_coun t">
                      <div class="information-message">
                      <mvt:foreach iterator="message" array="messages:information_messages">
                      &mvt:message;
                      </mvt:foreach>
                      </div>
                      </mvt:if>


                      <form method="post" action="&mvt:payment:url;">
                      <input type="hidden" name="Action" value="AUTH" />
                      <input type="hidden" name="Screen" value="INVC" />
                      <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />


                      <div id="payment"><mvt:item name="payment" /></div>


                      <input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />
                      <mvt:if expr="NOT ISNULL l.settings:payment:desc">
                      <span class="bold"></span>
                      </mvt:if>


                      <mvt:if expr="NOT ISNULL l.settings:payment:message">
                      &mvt:payment:message;<br />
                      </mvt:if>


                      <div class="form_row">
                      <br>
                      <label for="PaymentMethod" class="bold">Pay With:</label>
                      <input type="radio" name="PaymentMethod" value="paypaladv:DISCOVER"> Discover &nbsp;&nbsp;&nbsp;
                      <input type="radio" name="PaymentMethod" value="paypaladv:MASTERCARD"> MasterCard &nbsp;&nbsp;&nbsp;
                      <input type="radio" name="PaymentMethod" value="paypaladv:VISA" CHECKED> Visa &nbsp;&nbsp;&nbsp;
                      </div>


                      <div id="payment-fields">
                      <mvt:foreach array="payment:fields" iterator="field">
                      <div class="form_row">
                      <mvt:if expr="l.settings:field:invalid">
                      <label class="bold red">&mvt:field:prompt;</label>
                      <mvt:else>
                      <label class="bold">&mvt:field:prompt;</label>
                      </mvt:if>
                      <mvt:item name="payment" param="field:code" />
                      </div>
                      </mvt:foreach>
                      </div>
                      <div class="continue-button"><mvt:item name="buttons" param="Continue" /></div>
                      </form>


                      <div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
                      </td>
                      </tr>
                      </table>
                      <div id="bottom-wrap"></div>
                      <div id="global-footer"><mvt:item name="hdft" param="global_footer" /></div>
                      </div>
                      </body>
                      </html>

                        Comment

                        • nottheusual1
                          Mega Mivite


                          • Jul 2008
                          • 1124
                          #7
                          Re: Combine Payment Selection and Payment Information Pages

                          <input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />

                          will be blank since no payment method has been selected yet, so it sends you back to OSEL to select it. Try commenting that bit out.

                            Comment

                            • grafcomm
                              Mini Mivite

                              • Sep 2010
                              • 40
                              #8
                              Re: Combine Payment Selection and Payment Information Pages

                              that was it!, I removed this section and it works fine, thanks!

                              <input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />
                              <mvt:if expr="NOT ISNULL l.settings:payment:desc">
                              <span class="bold"></span>
                              </mvt:if>


                              Originally posted by nottheusual1 View Post
                              <input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />

                              will be blank since no payment method has been selected yet, so it sends you back to OSEL to select it. Try commenting that bit out.

                                Comment

                                Previous template Next
                                Working...
                                X