Donation checkout with autofill variables - errors with amount and phone

pandabeards
Contributor
Contributor

Hello!

Building a donation form for a nonprofit, and I'm trying to add in inputs for their phone number and custom donation amount. The phone number doesn't autofill in the checkout on PayPal's end—I suspect it's because of the multipart variable required for phone numbers. The 'name' for the phone number variable I've got in there now is just 'phone'.

 

Is the amount variable supported for autofill? Is there any way I can allow users to input their custom donation amount before they get to PayPal's checkout page?

 

Extra kudos to anyone with a reference, resource, or fix for the phone number autofill as well 🙂

Here's the link for the form: http://cypress-assistance-ministries.webflow.io/support/donate

Here's the code for the form:

<form id="wf-form-Donation-Form" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="donation-form-holder">

    <input type="hidden" name="business" value="CZ3FJSD3WZGDU">
    <input type="hidden" name="cmd" value="_donations">

    <!-- Specify details about the contribution -->
    <input type="hidden" name="item_name" value="Donation to Cypress Assistance Ministries">
    <input type="hidden" name="item_number" value="Web Donation">
    <input type="hidden" name="amount" value="">
    <input type="hidden" name="currency_code" value="USD">

    <label for="first-name last-name" class="donation-form-label">Name: <br></label>
        <input type="text" class="donation-field first-name w-input" maxlength="256" name="first_name" placeholder="First name" id="first-name" required="">
        <input type="text" class="donation-field last-name w-input" maxlength="256" name="last_name" placeholder="Last name" id="last-name" required="">
         
    <label for="donation-email" class="donation-form-label">Email Address:</label>
        <input type="email" class="donation-field w-input" maxlength="256" name="email" placeholder="Email address" id="donation-email" required="">
         
    <label for="donation-phone" class="donation-form-label">Phone Number:</label>
        <input type="tel" class="donation-field w-input" maxlength="20" minlength="9" name="phone" placeholder="Enter your phone number with area code" id="donation-phone" required="">
         
    <label for="amount" class="donation-form-label">Donation Amount:</label>
        <input type="text" class="donation-field w-input" name="amount" placeholder="Enter your donation amount">
         
      <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="Donate"> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
  </form>
Login to Me Too
1 REPLY 1

Anonymous_User
Not applicable

You need to use the variables:

night_phone_a  (for the area code)

night_phone_b  (for the next 3 digits)

night_phone_c   (for the last 4 digits)

 

Just for demo purposes, I tweaked your example to include the variables and removed the line:

<input type="hidden" name="amount" value="">

- you're already using the "amount" variable with the text input. 

 

Tip: Make sure you clear your web browser's cookies each time when testing code - else sometimes you get unexpected results.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">


<title>Test Example</title>
    
</head>

<body>

<!-- Start if Form -->

<form id="wf-form-Donation-Form" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="donation-form-holder">
<input type="hidden" name="business" value="CZ3FJSD3WZGDU">
<input type="hidden" name="cmd" value="_donations">

<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Donation to Cypress Assistance Ministries">
<input type="hidden" name="item_number" value="Web Donation">
<input type="hidden" name="currency_code" value="USD">
<!-- Text Input Boxes -->
<label for="first-name last-name" class="donation-form-label">Name: <br></label>
<input type="text" class="donation-field first-name w-input" maxlength="256" name="first_name" placeholder="First name" id="first-name" required="">

<br><br>

<input type="text" class="donation-field last-name w-input" maxlength="256" name="last_name" placeholder="Last name" id="last-name" required="">

<br><br>

<label for="donation-email" class="donation-form-label">Email Address:</label>
<input type="email" class="donation-field w-input" maxlength="256" name="email" placeholder="Email address" id="donation-email" required="">

<br><br>

<label for="donation-phone" class="donation-form-label">Phone Number:</label>
<input type="tel" class="donation-field w-input" maxlength="3" minlength="3" name="night_phone_a" placeholder="Enter your phone number area code" id="donation-phone" required="">

<input type="tel" class="donation-field w-input" maxlength="3" minlength="3" name="night_phone_b" placeholder="Enter next 3 Digits" id="donation-phone" required="">

<input type="tel" class="donation-field w-input" maxlength="4" minlength="4" name="night_phone_c" placeholder="Enter next 4 Digitd" id="donation-phone" required="">

<br><br>

<label for="amount" class="donation-form-label">Donation Amount:</label>
<input type="text" class="donation-field w-input" name="amount" placeholder="Enter your donation amount">

<br><br>

<input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="Donate"> <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">

</form>

<!-- End of Form -->

</body>
</html>

 

 

Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.