React-stripe-elements: Documentation is wrong about createPaymentMethod

[thechefchen]

Summary

There's no second param of cardelement in this function call.

Other information

[dweedon-stripe]

Can you provide more details about where are you seeing this? We changed the shape of the function arguments for createPaymentMethod in the core Stripe.js library, and we updated the call sites in this library to match the new shape. The old shape still works, but the new one is preferred.

[asjustis]

This is insane. I noticed already multiple tickets regarding the documentation in general. Today I was implementing the same createPaymentMethod method, and it seems all the documentations are so conflicted about this:

1) Readme in this project is misleading ( it says to use this.props.elements.getElement('card') which is not existent, as well as passing an object {name: 'card', card: cardElement, billing_address: {name: "some name"} } to createPaymentMethod).
2) If I look at https://stripe.com/docs/js/payment_intents/create_payment_method , it also says to pass an object
3) Following a guide here ( https://stripe.com/docs/billing/subscriptions/set-up-subscription#payment-method ) we have 3 parameters
4) Migration guide here ( https://stripe.com/docs/payments/payment-intents/migration#elements ) says to use two parameters
5) only issue #378 gave me an idea to use a single parameter 'card'

To me, only step 5 worked fine since the two-argument call resolved in 400 bad request response.

@dwee-stripe sorry to sound so negative, but to answer your previous question, I think we are seeing it pretty much everywhere :)) Better documentation would get so much love for sure

[dwee-stripe]

(@asjustis wrong person! tagging @dweedon-stripe)

[dweedon-stripe]

Hi @asjustis,

Sorry for all the confusion! First let me apologize for the state of the documentation here. We definitely do have some conflicting examples that we need to fix. We recently reworked the shape of this method. One of the goals of the rework is to reduce confusion by having a single way to call the method for all users.

Previously, the stripe.createPaymentMethod signature for vanilla Stripe.js was different from its signature in react-stripe-elements:

// this call in vanilla Stripe.js
stripe.createPaymentMethod('card', cardElement);

// was the same as this call in react-stripe-elements
stripe.createPaymentMethod('card');

The new signature is the same everywhere:

const cardElement = elements.getElement('card');

// vanilla Stripe.js and react-stripe-elements
stripe.createPaymentMethod({
  type: 'card',
  card: cardElement,
});

We are currently in the process of moving all examples and documentation over to the new signature, but we don't want to break anyone's existing integration or force them to make changes. Both the old way and the new way will continue to work.

Hopefully, this explanation for the changes helps clear up some of the confusion. I also want to address each of the documentation examples that you have pointed out:

Readme in this project is misleading ( it says to use this.props.elements.getElement('card') which is not existent, as well as passing an object {name: 'card', card: cardElement, billing_address: {name: "some name"} } to createPaymentMethod).

🤔This should work. Are you using the latest version? Here is a CodeSandbox example using elements.getElement.

If I look at https://stripe.com/docs/js/payment_intents/create_payment_method , it also says to pass an object

This is the preferred way to use the method and it parallels what we have in the readme.

Following a guide here ( https://stripe.com/docs/billing/subscriptions/set-up-subscription#payment-method ) we have 3 parameters

This was updated yesterday and now uses the object.

Migration guide here ( https://stripe.com/docs/payments/payment-intents/migration#elements ) says to use two parameters

We will update this. It should use an object.

only issue #378 gave me an idea to use a single parameter 'card'

This works because react-stripe-elements automatically infers the second argument. This used to be the documented way to call this method when using react-stripe-elements.

Again, sorry for the confusion and let me know if this helped.

[asjustis]

@dweedon-stripe thanks for the clarification. As it happens, I was indeed using not the latest version (5.1.0), I will check it out and hopefully, the issue will resolve.

[asjustis]

@dweedon-stripe All works now fine with the latest 6.0.1 version and the docs seem to be in sync with this info. Thanks for the support.

[dweedon-stripe]

Great! Happy to hear it is all working.