How to pre-fill price or "other amount" from the querystring in payment pages

Question

We would like to be able to pre-fill the price or "other amount" in a Civi payment page based on the querystring parameters. I have tried creating an extension which adds some Javascript to select the radio button and fill the amount if appropriate:

https://github.com/AsylumSeekersCentre/au.org.asylumseekerscentre.pricequerystring

This is the Javascript which I'm using:

CRM.$(document).ready(function ($) {

  var objUrlParams = new URLSearchParams(window.location.search);
  selected = parseInt(objUrlParams.get('priceoption'));
  priceSetId = parseInt(objUrlParams.get('priceset'));
  radio = document.getElementById('CIVICRM_QFID_'+selected+'_price_'+priceSetId);

  if (radio != null) {

    radio.click();

  }
  else {

    otherAmount = parseInt(objUrlParams.get('otheramount'));

    if (otherAmount != null && otherAmount > 0) {

      otherAmountInput = document.getElementById('price_'+priceSetId);
      otherAmountInput.value = (otherAmount + '')
      otherAmountInput.click();

    }
  }
});

The radio buttons have ID strings like "CIVICRM_QFID_78_price_14", where 14 is the price set ID and 78 is the price option ID. The querystring to select this option would include "&priceset=14&priceoption=78". The "other amount" input has an ID string like "price_15" (the number is seemingly always equal to the price set ID plus one). To set the "other amount" to 11, the querystring would include "&priceset=15&otheramount=11".

The code above first tries to select one of the default price options (if the querystring has the appropriate parameters), and if that fails, it attempts to set the "other amount".

Superficially, this looks correct when the form is loaded. However, when trying to submit the form, it returns an error:

Error Unable to complete payment! Missing paymentIntentID.

With the "other amount" option on a page where Stripe is the payment processor, the payment box doesn't appear until after there is subsequent user interaction. With the default options, the box does appear immediately but still returns the error above. If the user changes the pre-filled payment section, the form does submit correctly (e.g. if they delete and re-enter the "other amount").

I think the reason might be similar to the one behind this question from 2009:

https://forum.civicrm.org/index.php%3Ftopic=8126.0.html

If that answer is still applicable, I don't understand how to apply it. I looked at these pages, but I'm not sure if they help in this context:

https://stackoverflow.com/questions/1350917/send-post-variable-with-javascript https://stackoverflow.com/questions/12648639/set-a-post-variable

I don't want to automatically submit the form, just prefill the payment amount and leave the form in a state where it can be submitted. Is there a way to do this?

Answer 1

Below code should work if you have amount parameter set in the url for example amount=300&id=10&reset=1

jQuery(document).ready(function() {
  let amount = new URLSearchParams(window.location.search).get('amount');
  
  if (jQuery('.contribution_amount-section').length) {
    if (amount !== null) {
      singleAmount = amount + '.000000000';
      //do we have an input that matches this amount?
      if (jQuery('[data-amount="' + singleAmount + '"]').length) {
        jQuery('[data-amount="' + singleAmount + '"]').prop('checked', true).trigger('click');
      }
      else {
        jQuery('input[value="0"]').prop('checked', true).click();
        jQuery('.other_amount-content input').val(amount);
        calculateText(jQuery('.other_amount-content input'));
      }
      jQuery('#priceset .price-set-row span').removeClass('highlight');
      jQuery('#priceset .price-set-row input:checked').parent().addClass('highlight');
    }
  }
});