13 Replies Latest reply: Jun 24, 2012 5:23 AM by n.walker RSS

    Hot Spot link to Paypal

    n.walker Community Member

      Hello,

      I am trying to use a "Hot spot" over a custom "Buy" button on my products page. Is it possible to link this to the Paypal cart?  I've tried the link option in the properties bar, with no luck.  Also, have tried pasting the code (from Paypal generated button) into the code on my web page.  Again, no luck.  Maybe I have the code wrong for this action....

      Thanks, Norm

        • 1. Re: Hot Spot link to Paypal
          Nancy O. CommunityMVP

          Image maps are for multiple hyperlinked regions (hotspots) on a large image.  There's no reason to use an image map when an ordinary image will do.

           

           

          Also, have tried pasting the code (from Paypal generated button) into the code on my web page.  Again, no luck.  Maybe I have the code wrong for this action.

          Maybe.  Can you post a link to your page?

           

           

          Nancy O.

          • 2. Re: Hot Spot link to Paypal
            n.walker Community Member

            Hi Nancy, Thanks for the reply.  Here is a link to one of the pages I'm refering to : stuartwalkerpaintings.com.  Click "prints" at the bottom of the page and then click the first print image.  When the print comes up, you'll see the "Buy Button" I am talking about.  Since the painting image,  price information etc. and the buy buttons are all one unit imported from photoshop, there is no specific code for the buy buttons.  So I can't simply paste in the code from the Paypal generated code. That's why I thought if I could use the hotspot feature, i could link to Paypal.   Hope this makes sense.  Norm

            • 3. Re: Hot Spot link to Paypal
              MurraySummers CommunityMVP

              Your code is mighty 'janky'!  For example, this will never work -

               

              <map name="Map" id="Map">

                      <input type="hidden" name="cmd" value="_s-xclick">

              <input type="hidden" name="hosted_button_id" value="52472HBSJHXWS">>

              </form>

              " alt="buy1100" />

                      <area shape="rect" coords="727,587,839,655" href="#" alt="buy2850" />

                      <area shape="rect" coords="734,392,831,458" href="<input type="hidden" name="cmd" value="_s-xclick">

              <input type="hidden" name="hosted_button_id" value="52472HBSJHXWS">

              <input type="image" src="../misc_logos/buy_button.jpg" width="152" height="43" alt="logo"logo" />" alt="buy1100" />

                    </map>

               

               

              What is the code that PayPal tells you to use on the page?

              • 4. Re: Hot Spot link to Paypal
                n.walker Community Member

                Hi Murray.....

                 

                Thanks for the response.

                 

                Here is the PayPal code using my custom button:


                 

                <input type="hidden" name="cmd" value="_s-xclick">

                <input type="hidden" name="hosted_button_id" value="52472HBSJHXWS">

                <input type="image" src="../misc_logos/buy_button.jpg" width="152" height="43" alt="logo"logo" />

                 

                I was able to get the button on my print page, but I can't position it where I want it in the layout.  See stuartwalkerpaintings.com.  Click prints at bottom.  Then click first print image and you will see the layout I am refering to with the two "buy" buttons.

                 

                 

                Thanks for the help, Norm

                • 5. Re: Hot Spot link to Paypal
                  n.walker Community Member

                  Hi again,

                   

                  Logic would tell me, I could use a hotspot over the buy buttons on my layout and link it to the paypal code for the shopping cart. 

                   

                  Would make my life simpler if this was possible.

                   

                  Thanks, Norm

                  • 6. Re: Hot Spot link to Paypal
                    Ben Pleysier CommunityMVP

                    Copy and paste the following into a new document and view in your favourite browser.

                     

                    <!doctype html>
                    <html>
                    <head>
                    <meta charset="utf-8">
                    <title>Untitled Document</title>
                    </head>
                    
                    <body>
                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="myform">
                      <input type="hidden" name="cmd" value="_xclick" />
                      <input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />
                      <input type="hidden" name="business" value="demo@paypal.com" />
                      <input type="hidden" name="item_name" value="The Music Lesson" />
                      <input type="hidden" name="item_number" value="29" />
                      <input type="hidden" name="amount" value="1100" />
                      <input type="hidden" name="currency_code" value="USD" />
                      <input type="hidden" name="undefined_quantity" value="0" />
                      <input type="hidden" name="receiver_email" value="demo@paypal.com" />
                      <input type="hidden" name="mrb" value="R-3WH47588B4505740X" />
                      <input type="hidden" name="pal" value="ANNSXSLJLYR2A" />
                      <input type="hidden" name="no_shipping" value="0" />
                      <input type="hidden" name="no_note" value="0" />
                    </form>
                    <img src="http://stuartwalkerpaintings.com/prints/music_lesson_price.jpg" alt="" width="863" height="674" usemap="#Map">
                    <map name="Map">
                      <area shape="rect" coords="735,403,830,454" nohref onclick="myform.submit();" >
                    </map>
                    </body>
                    </html>
                    

                     

                    Gramps

                    • 7. Re: Hot Spot link to Paypal
                      Nancy O. CommunityMVP

                      I guess I'll be the  one to mention this since nobody else has. 

                       

                      #1 your site has no content!  It's all images.  Since images of text are impossible to index, search, translate or use with screen readers, I don't think an image map is really your best choice here.  Real text would be much better for the site name, page title, product names, descriptions & purchase details. 

                       

                      #2 PayPal's User Agreement says you must not alter, modify or change their HTML code in any way.  I take that to mean you should stick with the default buttons they provide and not use your own.

                       

                       

                      Just my 2 cents....

                       

                       

                      Nancy O.

                      • 8. Re: Hot Spot link to Paypal
                        n.walker Community Member

                        Hello Gramps,

                         

                        This works!  Thanks for the solution.

                         

                        Now I have 42 of these pages to do including a second button on the same page.  Did you use the hotspot feature on the button?  Looks to me you did.

                         

                        So I would simply copy this code and change the appropriate figures, name, etc/ for each new image (button)?

                         

                        Thanks again., Norm

                        • 9. Re: Hot Spot link to Paypal
                          n.walker Community Member

                          Hi Nancy,

                          According to Paypal you can customize buttons as they give you that option.

                           

                           

                           

                           

                          Thanks for your help at any rate.

                          Norm

                          • 10. Re: Hot Spot link to Paypal
                            MurraySummers CommunityMVP

                            To have a second button you'd have to add a second form and a second hotspot:

                             

                            <!doctype html>

                            <html>

                            <head>

                            <meta charset="utf-8">

                            <title>Untitled Document</title>

                            </head>

                             

                             

                            <body>

                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="myform">

                              <input type="hidden" name="cmd" value="_xclick" />

                              <input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />

                              <input type="hidden" name="business" value="demo@paypal.com" />

                              <input type="hidden" name="item_name" value="The Music Lesson" />

                              <input type="hidden" name="item_number" value="29" />

                              <input type="hidden" name="amount" value="1100" />

                              <input type="hidden" name="currency_code" value="USD" />

                              <input type="hidden" name="undefined_quantity" value="0" />

                              <input type="hidden" name="receiver_email" value="demo@paypal.com" />

                              <input type="hidden" name="mrb" value="R-3WH47588B4505740X" />

                              <input type="hidden" name="pal" value="ANNSXSLJLYR2A" />

                              <input type="hidden" name="no_shipping" value="0" />

                              <input type="hidden" name="no_note" value="0" />

                            </form>

                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="myform2">

                              <input type="hidden" name="cmd" value="_xclick" />

                              <input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />

                              <input type="hidden" name="business" value="demo@paypal.com" />

                              <input type="hidden" name="item_name" value="The Music Lesson" />

                              <input type="hidden" name="item_number" value="4" />

                              <input type="hidden" name="amount" value="2850" />

                              <input type="hidden" name="currency_code" value="USD" />

                              <input type="hidden" name="undefined_quantity" value="0" />

                              <input type="hidden" name="receiver_email" value="demo@paypal.com" />

                              <input type="hidden" name="mrb" value="R-3WH47588B4505740X" />

                              <input type="hidden" name="pal" value="ANNSXSLJLYR2A" />

                              <input type="hidden" name="no_shipping" value="0" />

                              <input type="hidden" name="no_note" value="0" />

                            </form>

                            <img src="http://stuartwalkerpaintings.com/prints/music_lesson_price.jpg" alt="" width="863" height="674" usemap="#Map">

                            <map name="Map">

                              <area shape="rect" coords="735,403,830,454" href="#" onclick="myform.submit();" >

                              <area shape="rect" coords="735,597,828,645" href="#" onclick="myform2.submit();">

                            </map>

                            </body>

                            </html>

                            • 11. Re: Hot Spot link to Paypal
                              n.walker Community Member

                              Hello Murray,

                              Thanks for the great help and solution!

                               

                              I have been told this will not pass PayPal's user agreements.  I will check it out and see if this can be used the way you configured it.  As I understand it, you can modify images and text.  Anyway, thanks again for the great help.

                              It's nice to know there are people like you who are willing to help when we find ourselves in over-our-heads.

                              Norm

                              • 12. Re: Hot Spot link to Paypal
                                Ben Pleysier CommunityMVP

                                @ Norm,

                                 

                                I think that you should take Nancy's first point very seriously, it is not about how the page looks, but how it functions.

                                 

                                Think of a normal bricks-and-mortar shop that looks very attractive on the outside, but is impossible to be entered by the physically challenged. I think that lawyers will be queuing up to grab their slice.

                                 

                                Also, the shop is impossible to find. You need people to pass by, tell others of this great shop. But the shop cannot be found by the prospective customers (search engines).

                                 

                                Make sure that you comply with other legal requirements, such as returns policy, privacy policy, the different modes to get in touch with you, etc.

                                 

                                Gramps

                                • 13. Re: Hot Spot link to Paypal
                                  n.walker Community Member

                                  Gramps,

                                  Point well taken.

                                  Norm