How to build a PayPal form with an Other textbox field



Finding the proper way to make more complicated projects work when I’m still a budding developer, can be hard. There are many good resources out there that I like to draw from for WordPress development and visual design. Only a few of them have tutorials that venture into the more advanced topics and thus I do find myself diving into the deep end of a plugin to find out, “How did they do that?” And when I find out how and especially how they connected one feature to another, I learn quite a bit in how I should think about the code so that I too can arrive at the same place. It’s fun, challenging and there are nights where I’m burrowing like a mole for several hours, fixated on the problem-solving mission.

This past week, I was on a mission to figure out how to add an Other textbox field to a set of radio buttons, a modified PayPal form and successfully pass the information. I gave up after two days. The next night, I was thinking more about it. I just can’t stop here! There’s a part of me, that might be seen as hard-headed, yet it’s more how I am wired.

The task was to build a PayPal form with three radio buttons instead of using the dropdown, add an Other field to the text field, add a way to write the name for In Honor of or In Memory of, and my requirement was that it had to flow with the current design and not use a table. I’ve been in/out of PayPal accounts for a long time to figure out where everything is and how to use it, especially creating hosted buttons. I looked everywhere in PayPal for my solution but it was hard to come by and I finally said to myself, if Gravity Forms (best, advanced forms available for WordPress) can figure it out, I can too.

Let’s get started! First, you’ll need to sign in to your PayPal account and create a dropdown Buy button but in the options, uncheck hosted. You’ll now have different code than if it were hosted and you can modify that code even more.

<insert code comparison here – hosted vs. unhosted>

Next, you’ll need to change the dropdown to radio buttons. Values can’t have quotes within the Value attribute else it won’t work.

<insert code comparison – dropdown vs. radio buttons >

Add Other textbox field to except alternate user donations. Now you will need to write a bit of Javascript into the Input and Other tags so that the box is selected and the user-entered value is passed to PayPal and not the value behind the radio button.

The value is set in the form correctly but it still cannot be passed on to PayPal until I’ve added another bit of Javascript to mirror the user-entered value within the form to another tag in the form. This must be written so that it occurs before the Buy button is clicked. Notice, that I’ve used a Donate button image instead of the Buy buttton image. You’ll change this when you create the button.

Go ahead, it should work now.


Start a conversation about this post

%d bloggers like this: