Paypal Pro: Ability to change credit card image

  • Profile Image
    jillynne
    Asked on February 22, 2013 at 05:09 PM

    I'm trying to replace the standard credit card image with my own which doesn't have the AmEx logo on it.

    My form is at:  https://secure.jotform.us/jillynne/creativejpay

    I tried following the instructions below, but not getting it to work.

    I uploaded my new image, then used that URL. I inserted the new CSS code, but the old image is still showing and am not being able to get the new image to move to new position.

    I am wondering if the image ID for my image should be different.

     

    Can you please look at my form and see what needs to be done to replace the CC images so only my image with Visa, MasterCard and Discover show?

     

    Thanks.

     

     

    Answered by jeanettebmz on February 20, 2013 at 06:19 PM 

    @jillynne

    You will need hide the current image

    label[for="input_19_paymentType_credit"] img {
    visibility: hidden;
    }

    Then add an image with just the required Credit Card logo into an image repository tool. It should be added as image URL as explained on Abajan's post above,

     

    For that particular image URL , the id is 23


    #id_23 img {
    position: absolute;
    top: 200px;
    margin-left: 185px;
    }

    However, it might vary in your form's case as well as the custom CSS positioning codes

    Should you have more questions, let us know

  • Profile Image
    EduardoMendez
    Answered on February 22, 2013 at 06:26 PM

    Hi there, 

    I have tried hidding the image and placing the new image on top of that.  I would not advise it as there are issues with users being able to click on the radio button.

    However, if you use the source code on a web page of your own, you can simply change the URL of the image

    ---------------------------------------------------------

    #sublabel_addr_line2, #input_6_addr_line2, #input_6_country, #sublabel_country{display:none;}

    http://www.jotform.com/uploads/jillynne/form_files/credit-card-logo.png

     

    http://pastebin.com/112JxeQB (Link is pasted on pastebin (unlisted) to avoid long threads)

     

     

    ------------------------------------------------------------------

    I hope that helps!

     

     

  • Profile Image
    EduardoMendez
    Answered on February 22, 2013 at 06:36 PM

    BTW - The source code above is from a clone of your form, you can follow the instructions on this guide to get the code of your form:

    http://www.jotform.com/help/104-How-to-get-your-Form-Source-Code

    Also, here is a sample of a form with the image overlayed in position of the original image:

    http://form.jotformpro.com/form/30526748046961?

    Unfortunately, the overlayed image prevents users from clicking on the radio button.

  • Profile Image
    jillynne
    Answered on February 25, 2013 at 02:58 PM

    I was finally able to get it to work, however, when the user clicks on the radio button next to the credit cards, the form expands and shoves the image down further and it overlaps a portion of the form.

    Until it's possible to change the image and have it work, I've just put in a line stating that we cannot accept American Express cards.

     

    It would be great to see an option for the payment form of different images that could be selected to show up.

  • Profile Image
    Welvin
    Answered on February 25, 2013 at 04:21 PM

    Hi Jillynne,

    You may try embedding your form using full source codes as advice by my colleague Eduardo and change the image path for the credit cards image from the given codes.

    I have added this to our Feature Request list. I can't promise anything in return but we'll surely update you once this get implemented.

     

    Thanks

  • Profile Image
    liyam
    Answered on March 02, 2013 at 01:29 AM

    Helly jillyne.  One of our developers made an update on this.  You may now choose on the options which credit card images to show for the Paypal in your country supports.

    Feel free to suggest more images if there are those that do not appear on the options.

    Thanks.