Angular Stripe Integration error: Please provide an element or PaymentMethod

Question

I am trying to integrate stripe with my mean stack app by following this guide but I am getting an error called on Angular side of the intergration.

Following is my Angular component code:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

declare var Stripe;

@Component({
  selector: 'app-subscription',
  templateUrl: './subscription.component.html',
  styleUrls: ['./subscription.component.css']
})
export class SubscriptionComponent implements OnInit{
  @ViewChild('card-elementv') cardElement: ElementRef;
  card: any;
  stripe: any;

  constructor() {}

   ngOnInit() {
     this.stripe = Stripe('pk_test_key');
     let elements = this.stripe.elements();
     this.mountCard(elements);
     this.setEventListener()
     this.createPaymentMethod();
  }

  createPaymentMethod() {
    this.stripe.createPaymentMethod('card', this.cardElement, { ----------------> This is where I am getting the error
      billing_details: {
        email: 'jenny.rosen@example.com',
      },
    }).then(function(result) {
      // Handle result.error or result.paymentMethod
      console.log(result);
    });
  }

 mountCard (elements) {
    const style = {
      //style goes here
    };
     this.card = elements.create("card", { style: style });
     this.card.mount("#card-element");
  }


  setEventListener (){
    //event listener code here
  }

}

Following is Angular component template code:

<div class="container stripe-container">
  <div class="row">
    <div class="col-sm-12">
        <!-- Use the CSS tab above to style your Element's container. -->
        <div id="card-element" class="MyCardElement">
            <!-- Elements will create input elements here -->
         </div>

          <!-- We'll put the error messages in this element -->
         <div id="card-errors" role="alert"></div>

        <button id="submit">Pay</button>
    </div>
  </div>
</div>

Following is the error that's being printed on to the console.

Uncaught (in promise): IntegrationError: Please provide either an Element or PaymentMethod creation parameters to createPaymentMethod.
IntegrationError: Please provide either an Element or PaymentMethod creation parameters to createPaymentMethod.
    at new t ((index):1)
    at Fa ((index):1)
    at Ba ((index):1)
    at e.<anonymous> ((index):1)
    at e.createPaymentMethod ((index):1)
    at SubscriptionComponent.push../src/app/subscription/subscription.component.ts.SubscriptionComponent.createPaymentMethod (subscription.component.ts:64)
    at SubscriptionComponent.push../src/app/subscription/subscription.component.ts.SubscriptionComponent.ngOnInit (subscription.component.ts:25)
    at checkAndUpdateDirectiveInline (core.js:22099)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue

I have been struggling with this since morning. Any help would be much appreciated. You will literally save my life.

Answer 1

You are attempting to pass three arguments to stripe's createPaymentMethod . A string, 'card' , your element, this.cardElement and lastly an object containing the billing_details parameter.

If you take a look at this section of Stripe's documentation , the createPaymentMethod only accepts one argument, a single object that should be defined with the required parameters and their values, whereas in your case you should try the following:

this.stripe.createPaymentMethod({
  type: 'card',
  card: this.cardElement,
  billing_details: {
    name: 'jenny.rosen@example.com',
  }
}).then((result) => {
  // Handle result.error or result.paymentMethod
      console.log(result);
});