Add custom fields (like phone number) to react-stripe-elements

Question

I'm getting pretty lost in the documentation about how to create custom fields like a phone number using react-stripe-elements. I've gotten a quick example running on collecting card info using the <CardElement> component, but I can't see anywhere how to add another input for a phone number to the data that will be tokenized.

I know I could just receive the token with the card info from the built-in fields and then pass that token plus the un-tokenized phone number to my server, but I'd like to have stripe tokenize all the data together if possible.

This examples page shows a number of forms collecting phone number, but the source code seems to mostly show how they're setting up the styling, and either way it's not using react-stripe-elements so the example doesn't mirror over like I'd like it to.

Edit: I found this github issue on their page that mentions implementing your own component to provide other supported parameters like name, adress_line1, etc. Looking at the token that gets returned, it appears that phone simply isn't a supported field, so I would just need to send that info to the server in an un-tokenized format. If that's just the way it needs to be done I'm totally fine with that. Just wanted to make sure I'm going about it with the right approach.

Answer 1

You can also use your own inputs. Then, before requesting the token, add your additional data. For example, in my form, I have a separate input for the customer's name on card.

onSubmit = (e) => {

 e.preventDefault()
  const form = e.target
  const data = // your method for getting data from the form

  stripe.createToken({ name: data.card_name })
    .then(({ token }) => {
      // do things with token
    })
  } 
}

You can find out more about what data you can pass to the token in the API reference here: https://stripe.com/docs/stripe-js/reference#stripe-create-token

To add other non-standard fields, you can similarly create a Source in the same manner: https://stripe.com/docs/stripe-js/reference#stripe-create-source

stripe.createSource(element, sourceData)

Answer 2

Let's assume that you want to add a name field and tokenize it, at the same time you want to pass the card holder's name and another information, alongside CardElement of react-stripe-elements, you need to create a form wrapping CardElement with some other inputs.

onSubmit event, you need to extract the form data and tokenize it using createToken function coming from react-stripe-elements as follows:

import React, { Component } from 'react';
import { CardElement, injectStripe } from 'react-stripe-elements';
class CheckoutForm extends Component {

    submit = async (ev) => {
        ev.preventDefault();
        const { currentTarget } = ev;
        const fD = new FormData(currentTarget);
        const cardInfo = {
          name: fD.get('name'),
        };
        let { token } = await this.props.stripe.createToken(
          { name: cardInfo.name, }
        );
        console.log(token)
        let response = await fetch(`YOUR_API_URL/charge`, {
          method: "POST",
          headers: { "Content-Type": "text/plain" },
          body: token.id
        });

        if (response.ok) console.log("Purchase Complete!")
      }
      
        render() {
        return (
          <div className="checkout">
            <p>Credit Card / Debit Card</p>

            <form onSubmit={this.submit}>
              <input type='text' name='name' placeholder="Card Holder's Name" />

              <CardElement />
              <button type='submit'>Pay</button>
            </form>

          </div>
        );
      }

export default injectStripe(CheckoutForm);