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> ponent, 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 ponent 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.

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> ponent, 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 ponent 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.

• javascript
• reactjs
• stripe-payments

• Per your edit you're on the right track and re: fields like phone, yes, exactly this: "I would just need to send that info to the server in an un-tokenized format" – duck Commented Dec 10, 2017 at 17:28
• I realized the difference between the "source" and the "customer". If you create a customer object you can save a phone number and associate the source with their account. – bobbyz Commented Dec 11, 2017 at 2:59

4 Answers 4

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./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./docs/stripe-js/reference#stripe-create-source

stripe.createSource(element, sourceData)

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 ing 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);

After looking a little deeper into the documentation, it seems like you can attribute a phone number to a source's owner property, a customer's shipping property, and an order's shipping property

stripe.createToken(element, tokenData) Use stripe.createToken() to convert information collected by Elements into a single-use token that you safely pass to your server to use in an API call. 1 element: the Element you wish to tokenize data from. If applicable, the Element pulls data from other Elements you’ve created on the same instance of elements to tokenize. 2 tokenData: an object containing additional payment information you might have collected. In the case of cards, it can contain any of the following parameters:

stripe.createToken(element, tokenData).then(function(result) {
  // Handle result.error or result.token
});