Answers.Body: <p>Below code should work if you have <code>amount</code> parameter set in the url for example <code>amount=300&amp;id=10&amp;reset=1</code></p>
  <pre><code>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=&quot;' + singleAmount + '&quot;]').length) {
          jQuery('[data-amount=&quot;' + singleAmount + '&quot;]').prop('checked', true).trigger('click');
        }
        else {
          jQuery('input[value=&quot;0&quot;]').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');
      }
    }
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-12-10T23:58:37.767Z
Answers.LastActivityDate: 2021-12-10T23:58:37.767Z
Answers.UserDisplayName: Pradeep Nayak
Body: <p>We would like to be able to pre-fill the price or &quot;other amount&quot; 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:</p>
  <p><a href="https://github.com/AsylumSeekersCentre/au.org.asylumseekerscentre.pricequerystring" rel="nofollow noreferrer">https://github.com/AsylumSeekersCentre/au.org.asylumseekerscentre.pricequerystring</a></p>
  <p>This is the Javascript which I'm using:</p>
  <pre><code>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 &amp;&amp; otherAmount &gt; 0) {
  
        otherAmountInput = document.getElementById('price_'+priceSetId);
        otherAmountInput.value = (otherAmount + '')
        otherAmountInput.click();
  
      }
    }
  });
  </code></pre>
  <p>The radio buttons have ID strings like &quot;CIVICRM_QFID_78_price_14&quot;, where 14 is the price set ID and 78 is the price option ID. The querystring to select this option would include &quot;&amp;priceset=14&amp;priceoption=78&quot;. The &quot;other amount&quot; input has an ID string like &quot;price_15&quot; (the number is seemingly always equal to the price set ID plus one). To set the &quot;other amount&quot; to 11, the querystring would include &quot;&amp;priceset=15&amp;otheramount=11&quot;.</p>
  <p>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 &quot;other amount&quot;.</p>
  <p>Superficially, this looks correct when the form is loaded. However, when trying to submit the form, it returns an error:</p>
  <pre><code>Error Unable to complete payment! Missing paymentIntentID.
  </code></pre>
  <p>With the &quot;other amount&quot; 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 &quot;other amount&quot;).</p>
  <p>I think the reason might be similar to the one behind this question from 2009:</p>
  <p><a href="https://forum.civicrm.org/index.php%3Ftopic=8126.0.html" rel="nofollow noreferrer">https://forum.civicrm.org/index.php%3Ftopic=8126.0.html</a></p>
  <p>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:</p>
  <p><a href="https://stackoverflow.com/questions/1350917/send-post-variable-with-javascript">https://stackoverflow.com/questions/1350917/send-post-variable-with-javascript</a>
  <a href="https://stackoverflow.com/questions/12648639/set-a-post-variable">https://stackoverflow.com/questions/12648639/set-a-post-variable</a></p>
  <p>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?</p>
  
Tags: <forms><javascript><payment>
Title: How to pre-fill price or "other amount" from the querystring in payment pages
ThreadText: # How to pre-fill price or "other amount" from the querystring in payment pages
  
  (Asked by: username_0 on 2021-12-09)
  
  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?
  
  **Tags:** forms, javascript, payment
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-12-10. Score: 1 | Accepted answer
  
  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');
      }
    }
  });
  
  ```
  
  
  ---
  
  