How to add a quantity functionality to a PayPal form

The following implementation is only valid for just one multiple products field, it will NOT work with 2 or more.


RSForm!Pro does not include, by default, a functionality that would enable you to set up a quantity field and associate it with a single product or multiple product field. However, the component's flexibility allows implementing this through custom scripting, here's what you need to do:


The RSForm!Pro Payment Package


If you have already installed and enabled the Payment Package, please skip this step.


To add any type of PayPal functionality to an RSForm!Pro form, you need to first install the RSForm!Pro Payment Package. It can be downloaded from our website:


Downloads >> My Downloads >> RSForm!Pro >> click on view all plugins and modules >> RSForm!Pro Files >> Plugins >> Payment Package (Payment Plugin + PayPal + Offline) for Joomla! 3.x.


Installing the plugin is done in the same manner as with any other Joomla! extension, through the Extensions >> Extension Manager feature.


Form field structure


To demonstrate the implementation of this type of functionality, we have created a new RSForm!Pro form containing the following fields:


  • A default PayPal integration Multiple Products field, named products with the items defined as follows:

  • 10|T-Shirt

    20|Pants

    30|Shoes



    • Please note that, although we have named the field products, you can name it in any way you like, just remember to adjust its name in the code that will be provided below as well, otherwise this example will not work. This applies for all other fields.
    • The values found to the left of the pipeline character ( | ) represent the products' prices, whereas the values found to the right side (T-Shirt, Pants and Shoes) represent the products' captions that will be displayed in the frontend.

  • A dropdown named quantity containing items from 1 to 5, each on a separate line.

    • Instead of values from 1 to 5 you can use any quantities your particular scenario requires.
    • You might want to place the field to the left or right side of the multiple product field. To do so, you will need to manually adjust the form's layout.

  • A default PayPal integration Choose Payment field. Please note that it is mandatory for this field to be present in any PayPal form.

  • The (Payment) PayPal field, also mandatory for the form to redirect to PayPal when submitted.

  • The default PayPal integration Total field - mandatory.

  • A Submit Button. Make sure you don't confuse it with the regular Button, otherwise the form won't get submitted.



The custom code


The actual functionality is being provided by the code snippets below. Please add the following code in the Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> CSS and Javascript tab >> Javascript area:


 
<script type="text/javascript">
function totalQuantity(){
  getPrice_x();
  //calculate a grand total based on the available product field
  quantity = parseInt(document.getElementById('quantity').value);
  //retrieve the value selected in the "quantity" field
  currentTotal = parseFloat(document.getElementById('total').value);
  //adjust displayed total
  total = quantity * currentTotal;
  //re-calculate the total based on the value selected in the "quantity" field
  document.getElementById('total').value = total.toFixed(2);
  //convert the "total" field's value to a float number followed by 2 decimals
  document.getElementById('payment_total_x').innerHTML = total.toFixed(2) + ' USD';
  //display the total field's value along with the "USD" currency code
  document.getElementsByName('form[rsfp_Total]')[0].value = total.toFixed(2);
 
return true;
}
 
    window.addEvent('domready', function() {
 
totalQuantity();
    });
</script>
 

Notice the getPrice_x() function and the payment_total_x form field ID. Please replace x with your form's ID.


Then, head to

  • Components >> RSForm!Pro >> Manage Forms >> edit your form >> Components >> edit the quantity field >> Attributes tab and add the following code in the Additional Attributes field:

  • onchange="totalQuantity();"

  • Components >> RSForm!Pro >> Manage Forms >> edit your form >> Components >> edit the products field >> Attributes tab and add the following code in the Additional Attributes field:

  • onchange="totalQuantity();"

12 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Plugin - PayPal (Create custom order & donation forms) HOT

Plugin - Payment Package (Wire Transfer, PayPal) HOT

Create a subscription form using RSForm!Pro and PayPal HOT

Personalize PayPal parameters per form

RSform!Pro PayPal total field is not updated properly