Adding metadata to Stripe PaymentIntent token

Question

Good afternoon,

First timer here with very little knowledge of coding, but I'm in a bind and I am familiar with Stack Overflow being the "go-to" for coding solutions.

I work for a non-profit and we recently created a new website that accepts donations. We are using Stripe as the payment gateway and a PaymentIntent API.

So, we have a payment modal form on our page that is activated when the visitor goes to the donations page. Donor enters personal information along with comments or instructions (comments field can be blank as well) into this modal form and clicks "Donate Now" button. Payment is successful.

When paymentintents is created and the transaction is complete and successful, most of the information goes through to out back office in Stripe to the payment record with the exception of the "Comments" section.

Looking at the code, all the modal form field lines are "ID"'d except for the Comments field. My guess is that it is probably the reason - lack of "ID"ing.

We need the comments field value to be transferred so that we can capture it on the backend for our records and also send an email to the donor noting the metadata (e.g in honour of John Doe).

I am thinking there should be a metadata or description attribute in the first part. I just don't know how to do it, how to point it at the "Comments" field, and tie them together to be sent with the token.

I'm thinking this needs to be labeled:

<textarea rows="4" placeholder="Comments"></textarea>

Any thoughts? Input ID (like how the others fields have it), description or metadata attribute?

I have been to Stripe Support twice and they keep pointing me back to our developer. However, the developer is currently unavailable. I have a feeling this is only a one-line correction.

Any guidance will be greatly appreciated.

Here is the original redacted code:

<?php
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);
    require_once('../../../vendor/autoload.php');
    \Stripe\Stripe::setApiKey("******************(REDACTED)");
    $usamt = $_GET['amt'];
    $dollars = $usamt/100;
    $intent = \Stripe\PaymentIntent::create([
      'amount' => $usamt,
      'currency' => 'usd',
    ]);
?>
<div class="payment-modal showing">
    <div class="closeme genericon-close"></div>
    <div class="payment-contain">
        <div class="logo">
            <img alt="**********(REDACTED)" src="***********(REDACTED).png">
        </div>
        <div class="stripe-donate-form form-group">
            <h3 class="block-heading">Personal Info</h3>
<!--            <p class="rqrd">*Required</p> -->
            <div class="half-wrap">
                <input class="first-last vcheck" type="text" id="firstname" name="firstname" placeholder="First Name*">
                <input class="first-last vcheck" type="text" id="lastname" name="lastname" placeholder="Last Name*">
            </div>
            <input id="email-address" class="vmail" type="email" placeholder="Email address*">
            <textarea rows="4" placeholder="Comments"></textarea>
            <h3 class="block-heading">Credit Card Info</h3>
            <!-- placeholder for Elements -->
            <div class="security">
                <span class="genericon-lock secure"></span> This is a secure SSL encrypted payment.
            </div>
            <input id="cardholder-name" class="vcheck" type="text" placeholder="Cardholder Name*">
            <div id="card-element" class="form-control" style="margin-top: 15px;background:#f7f7f7;border:1px solid rgba(0,0,0,0.1);padding:3px 6px;"></div>
            <div id="card-errors"></div>
            <h3 class="block-heading">Billing Details</h3>
            <select required class="select-css vcheck" name="billing_country" autocomplete="country" id="billing_country" class="billing-country billing_country give-select required" required="" aria-required="true">
                <option value="" selected disabled>Select country*</option><option value="US">United States</option><option value="CA">Canada</option><option value="GB">United Kingdom</option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="BN">Brunei Darrussalam</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CD">Congo, Democratic People's Republic</option><option value="CG">Congo, Republic of</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="CI">Cote d'Ivoire</option><option value="HR">Croatia/Hrvatska</option><option value="CU">Cuba</option><option value="CY">Cyprus Island</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="TP">East Timor</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="GQ">Equatorial Guinea</option><option value="SV">El Salvador</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GR">Greece</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard and McDonald Islands</option><option value="VA">Holy See (City Vatican State)</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Lao People's Democratic Republic</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libyan Arab Jamahiriya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MD">Moldova, Republic of</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Island</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RE">Reunion Island</option><option value="RO">Romania</option><option value="RU">Russian Federation</option><option value="RW">Rwanda</option><option value="SH">Saint Helena</option><option value="KN">Saint Kitts and Nevis</option><option value="LC">Saint Lucia</option><option value="PM">Saint Pierre and Miquelon</option><option value="VC">Saint Vincent and the Grenadines</option><option value="SM">San Marino</option><option value="ST">Sao Tome and Principe</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovak Republic</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard and Jan Mayen Islands</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syrian Arab Republic</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TH">Thailand</option><option value="TT">Trinidad and Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="UY">Uruguay</option><option value="UM">US Minor Outlying Islands</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VG">Virgin Islands (British)</option><option value="VI">Virgin Islands (USA)</option><option value="WF">Wallis and Futuna Islands</option><option value="EH">Western Sahara</option><option value="WS">Western Samoa</option><option value="YE">Yemen</option><option value="YU">Yugoslavia</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option>
            </select>
            <input id="address1" class="vcheck" type="text" placeholder="Address Line 1*">
            <input id="address2" type="text" placeholder="Address Line 2">
            <input id="city" class="vcheck" type="text" placeholder="City*">
            <div class="half-wrap">
                <input id="state" class="vcheck" type="text" placeholder="State / Province / County*">
                <input id="zip" class="vcheck" type="text" placeholder="Zip / Postal Code*">
            </div>
            <div class="donation-recap">
                <div class="donttl">Donation Total:</div>
                <div class="donamt">US$ <?php echo $dollars ?></div>
            </div>
            <div class="cb-contain">
                <div class="stripe-form-errors">Please correct errors in red</div>
                <button id="card-button" data-secret="<?= $intent->client_secret ?>">Donate Now</button>
            </div>
        </div>
    </div>
</div>

Answer 1

The presence of 'card-element' as a class name suggests that you're using the stripe Elements (javascript) library to do the actual payment capture and processing.

This means that certain elements in your form are handled and submitted straight to Stripe's systems through their own code (bypassing your server, limiting the amount of PCI compliance testing needed etc).

You have limited control in terms of them capturing extra data from your form - but can pass extra data to them with the creation of the payment intent (which you do in your php/server side code).

E.g. amending your code as follows:

 $intent = \Stripe\PaymentIntent::create([
      'amount' => $usamt,
      'currency' => 'usd',
      'metadata' => ['comments' => 'A comment you wish to pass to Stripes systems'],
    ]);

Would pass that extra comment data into Stripe's record of this transaction. You would however need to capture that and submit it to Stripe in your server-side code - their Javascript library that is handling the magic of creating card number, expiry date type fields isn't going to capture it automatically.

It sounds like it may be a job that needs to wait for your developer.

Answer 2

You can add metadata to your PaymentIntent object. The API reference contains information on the PaymentIntent object, as well as links to guides and documentation.