updates to types, demos, and readme

Author: dweedon-stripe

CHANGELOG.md

@@ -19,6 +19,23 @@ get a refrence to an Element to use
 or
 [`createPaymentMethod()`](https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method).
 
+Note that the old API for `createPaymentMethod` will continue to work and
+provide automatic element injection, but we are updating documentation and
+examples to use the new argument shape:
+
+```js
+// old shape with automatic element detection - still works
+this.props.stripe.createPaymentMethod('card').then(/* ... */);
+
+// new shape without automatic element detection - recommended and will work with new non-card PaymentMethods
+this.props.stripe
+  .createPaymentMethod({
+    type: 'card',
+    card: this.props.elements.getElement('card'),
+  })
+  .then(/* ... */);
+```
+
 ### Breaking Changes
 
 - We have removed the `getElement` method on RSE components that we introduced
@@ -74,9 +91,11 @@ or
     ): Promise<{error?: Object, setupIntent?: Object}>
   ```
 
-  For more information, please review the Stripe Docs:
+````
+
+For more information, please review the Stripe Docs:
 
-  - [`stripe.handleCardSetup`](https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup)
+- [`stripe.handleCardSetup`](https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup)
 
 ### Deprecations
 
@@ -388,3 +407,4 @@ Initial release! Support for:
   - CardExpiryElement
   - CardCVCElement
   - PostalCodeElement
+````

README.md

@@ -29,7 +29,6 @@ styles, fonts).
   - [The Stripe context (`StripeProvider`)](#the-stripe-context-stripeprovider)
   - [Element groups (`Elements`)](#element-groups-elements)
   - [Setting up your payment form (`injectStripe`)](#setting-up-your-payment-form-injectstripe)
-  - [Using Stripe.js methods that do not have automatic element detection](#using-methods-that-do-not-have-automatic-element-detection)
   - [Using individual `*Element` components](#using-individual-element-components)
   - [Using the `PaymentRequestButtonElement`](#using-the-paymentrequestbuttonelement)
 - [Advanced integrations](#advanced-integrations)
@@ -197,6 +196,8 @@ class CheckoutForm extends React.Component {
     // Use Elements to get a reference to the Card Element mounted somewhere
     // in your <Elements> tree. Elements will know how to find your Card Element
     // becase only one is allowed.
+    // See our getElement documentation for more:
+    // https://stripe.com/docs/stripe-js/reference#elements-get-element
     const cardElement = this.props.elements.getElement('card');
 
     // From here we cal call createPaymentMethod to create a PaymentMethod
@@ -223,8 +224,8 @@ class CheckoutForm extends React.Component {
 
     // You can also use confirmCardSetup with the SetupIntents API.
     // See our confirmCardSetup documentation for more:
-    // https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup
-    this.props.stripe.handleCardSetup('{PAYMENT_INTENT_CLIENT_SECRET}', {
+    // https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-setup
+    this.props.stripe.confirmCardSetpu('{PAYMENT_INTENT_CLIENT_SECRET}', {
       payment_method: {
         card: cardElement,
       },
@@ -234,7 +235,7 @@ class CheckoutForm extends React.Component {
     // See our tokens documentation for more:
     // https://stripe.com/docs/stripe-js/reference#stripe-create-token
     // With createToken, you will not need to pass in the reference to
-    // the Card Element. It will be inferred automatically.
+    // the Element. It will be inferred automatically.
     this.props.stripe.createToken({type: 'card', name: 'Jenny Rosen'});
     // token type can optionally be inferred if there is only one Element
     // with which to create tokens
@@ -244,7 +245,7 @@ class CheckoutForm extends React.Component {
     // See our Sources documentation for more:
     // https://stripe.com/docs/stripe-js/reference#stripe-create-source
     // With createSource, you will not need to pass in the reference to
-    // the Card Element. It will be inferred automatically.
+    // the Element. It will be inferred automatically.
     this.props.stripe.createSource({
       type: 'card',
       owner: {
@@ -668,14 +669,13 @@ function injectStripe(
 Use `injectStripe` to wrap a component that needs to interact with `Stripe.js`
 to create sources or tokens.
 
-1.  First, create a component that accepts the `stripe` prop and calls
-    `this.props.stripe.createToken` or `this.props.stripe.createSource` when
-    necessary.
+1.  First, create a component that accepts the `stripe` prop and calls one of
+    the Stripe or Elements methods when necessary.
 2.  Wrap that component by passing it to `injectStripe` so that it actually
     receives the `stripe` and `elements` props.
 3.  Render the component that `injectStripe` returns.
 
-### Example
+#### Example
 
 ```jsx
 // 1. Create a component that uses this.props.stripe:
@@ -684,7 +684,12 @@ class CheckoutForm extends React.Component {
     /* ... */
   }
   onCompleteCheckout() {
-    this.props.stripe.createPaymentMethod('card').then(/* ... */);
+    this.props.stripe
+      .createPaymentMethod({
+        type: 'card',
+        card: this.props.stripe.getElement('card'),
+      })
+      .then(/* ... */);
   }
 }
 
@@ -715,10 +720,15 @@ available with the `getWrappedInstance()` method of the wrapper component. This
 feature can not be used if the wrapped component is a stateless function
 component.
 
-Within the wrapped component, the `stripe` prop has the type:
+Within the wrapped component, the `stripe` and `elements` props have the type:
 
 ```jsx
 type FactoryProps = {
+  elements: null | {
+    getElement: (type: string) => Element | null,
+    // and other functions available on the `elements` object,
+    // as officially documented here: https://stripe.com/docs/elements/reference#the-elements-object
+  },
   stripe: null | {
     createToken: (tokenData: {type?: string}) => Promise<{
       token?: Object,
@@ -729,8 +739,7 @@ type FactoryProps = {
       error?: Object,
     }>,
     createPaymentMethod: (
-      type: string,
-      paymentMethodData?: Object
+      paymentMethodData: Object
     ) => Promise<{
       paymentMethod?: Object,
       error?: Object,
@@ -755,10 +764,7 @@ type FactoryProps = {
 };
 ```
 
-In addition to the `stripe` prop, `injectStripe` also injects a reference to the
-Elements instance as the `elements` prop.
-
-The `stripe` and `elements` prop can only be `null` if you are using one of the
+The `stripe` and `elements` props can only be `null` if you are using one of the
 [Advanced integrations](#advanced-integrations) mentioned above, like loading
 Stripe.js asynchronously or providing an existing instance. If you are using a
 basic integration where you pass in an api key to `<StripeProvider/>`, they will
@@ -805,14 +811,9 @@ reach all components.
 2.  You can use the [`pure: false`][pure-false] option for redux-connect:
 
     ```jsx
-    const Component = connect(
-      mapStateToProps,
-      mapDispatchToProps,
-      mergeProps,
-      {
-        pure: false,
-      }
-    )(injectStripe(_CardForm));
+    const Component = connect(mapStateToProps, mapDispatchToProps, mergeProps, {
+      pure: false,
+    })(injectStripe(_CardForm));
     ```
 
 [pure-false]:

demo/intents/index.js

@@ -63,22 +63,27 @@ class _CreatePaymentMethod extends React.Component<
 
   handleSubmit = (ev) => {
     ev.preventDefault();
-    if (this.props.stripe) {
-      this.props.stripe.createPaymentMethod('card').then((payload) => {
-        if (payload.error) {
-          this.setState({
-            error: `Failed to create PaymentMethod: ${payload.error.message}`,
-            processing: false,
-          });
-          console.log('[error]', payload.error);
-        } else {
-          this.setState({
-            message: `Created PaymentMethod: ${payload.paymentMethod.id}`,
-            processing: false,
-          });
-          console.log('[paymentMethod]', payload.paymentMethod);
-        }
-      });
+    if (this.props.stripe && this.props.elements) {
+      this.props.stripe
+        .createPaymentMethod({
+          type: 'card',
+          card: this.props.elements.getElement('card'),
+        })
+        .then((payload) => {
+          if (payload.error) {
+            this.setState({
+              error: `Failed to create PaymentMethod: ${payload.error.message}`,
+              processing: false,
+            });
+            console.log('[error]', payload.error);
+          } else {
+            this.setState({
+              message: `Created PaymentMethod: ${payload.paymentMethod.id}`,
+              processing: false,
+            });
+            console.log('[paymentMethod]', payload.paymentMethod);
+          }
+        });
       this.setState({processing: true});
     } else {
       console.log("Stripe.js hasn't loaded yet.");
@@ -149,9 +154,13 @@ class _HandleCardPayment extends React.Component<
 
   handleSubmit = (ev) => {
     ev.preventDefault();
-    if (this.props.stripe) {
+    if (this.props.stripe && this.props.elements) {
       this.props.stripe
-        .handleCardPayment(this.state.clientSecret)
+        .confirmCardPayment(this.state.clientSecret, {
+          payment_method: {
+            card: this.props.elements.getElement('card'),
+          },
+        })
         .then((payload) => {
           if (payload.error) {
             this.setState({
@@ -162,9 +171,7 @@ class _HandleCardPayment extends React.Component<
           } else {
             this.setState({
               succeeded: true,
-              message: `Charge succeeded! PaymentIntent is in state: ${
-                payload.paymentIntent.status
-              }`,
+              message: `Charge succeeded! PaymentIntent is in state: ${payload.paymentIntent.status}`,
             });
             console.log('[PaymentIntent]', payload.paymentIntent);
           }
@@ -179,7 +186,7 @@ class _HandleCardPayment extends React.Component<
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          stripe.handleCardPayment
+          stripe.confirmCardPayment
           <CardElement
             onBlur={handleBlur}
             onChange={handleChange}
@@ -239,9 +246,13 @@ class _HandleCardSetup extends React.Component<
 
   handleSubmit = (ev) => {
     ev.preventDefault();
-    if (this.props.stripe) {
+    if (this.props.stripe && this.props.elements) {
       this.props.stripe
-        .handleCardSetup(this.state.clientSecret)
+        .confirmCardSetup(this.state.clientSecret, {
+          payment_method: {
+            card: this.props.elements.getElement('card'),
+          },
+        })
         .then((payload) => {
           if (payload.error) {
             this.setState({
@@ -252,9 +263,7 @@ class _HandleCardSetup extends React.Component<
           } else {
             this.setState({
               succeeded: true,
-              message: `Setup succeeded! SetupIntent is in state: ${
-                payload.setupIntent.status
-              }`,
+              message: `Setup succeeded! SetupIntent is in state: ${payload.setupIntent.status}`,
             });
             console.log('[SetupIntent]', payload.setupIntent);
           }
@@ -269,7 +278,7 @@ class _HandleCardSetup extends React.Component<
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          stripe.handleCardSetup
+          stripe.confirmCardSetup
           <CardElement
             onBlur={handleBlur}
             onChange={handleChange}

src/components/inject.js

@@ -22,11 +22,16 @@ type WrappedStripeShape = {
   createPaymentMethod: Function,
   handleCardPayment: Function,
   handleCardSetup: Function,
+  confirmCardPayment: Function,
+  confirmCardSetup: Function,
 };
 
 type State = {stripe: WrappedStripeShape | null};
 
-export type InjectedProps = {stripe: WrappedStripeShape | null};
+export type InjectedProps = {
+  stripe: WrappedStripeShape | null,
+  elements: ElementsShape | null,
+};
 
 // react-redux does a bunch of stuff with pure components / checking if it needs to re-render.
 // not sure if we need to do the same.
@@ -226,6 +231,10 @@ Please be sure the component that calls createSource or createToken is within an
       elementOrData?: mixed,
       maybeData?: mixed
     ) => {
+      if (paymentMethodType && typeof paymentMethodType === 'object') {
+        return stripe.createPaymentMethod(paymentMethodType);
+      }
+
       if (!paymentMethodType || typeof paymentMethodType !== 'string') {
         throw new Error(
           `Invalid PaymentMethod type passed to createPaymentMethod. Expected a string, got ${typeof paymentMethodType}.`

src/decls/Stripe.js

@@ -13,8 +13,19 @@ declare type ElementShape = {
 
 declare type ElementsShape = {
   create: (type: string, options: MixedObject) => ElementShape,
+  getElement: (type: string) => null | ElementShape,
 };
 
+type ConfirmSetupFn = (
+  clientSecret: string,
+  options?: mixed
+) => Promise<{setupIntent?: MixedObject, error?: MixedObject}>;
+
+type ConfirmPaymentFn = (
+  clientSecret: string,
+  options?: mixed
+) => Promise<{paymentIntent?: MixedObject, error?: MixedObject}>;
+
 declare type StripeShape = {
   elements: (options: MixedObject) => ElementsShape,
   createSource: (
@@ -26,9 +37,9 @@ declare type StripeShape = {
     options: mixed
   ) => Promise<{token?: MixedObject, error?: MixedObject}>,
   createPaymentMethod: (
-    type: string,
-    element: ElementShape | MixedObject,
-    data: mixed
+    type: mixed,
+    element?: ElementShape | MixedObject,
+    data?: mixed
   ) => Promise<{paymentMethod?: MixedObject, error?: MixedObject}>,
   handleCardPayment: (
     clientSecret: string,
@@ -40,4 +51,9 @@ declare type StripeShape = {
     element: mixed,
     options: mixed
   ) => Promise<{setupIntent?: MixedObject, error?: MixedObject}>,
+  confirmCardPayment: ConfirmPaymentFn,
+  confirmCardSetup: ConfirmSetupFn,
+  confirmIdealPayment: ConfirmPaymentFn,
+  confirmSepaDebitPayment: ConfirmPaymentFn,
+  confirmSepaDebitSetup: ConfirmSetupFn,
 };