Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140331

Angular Stripe Integration error: Please provide an element or PaymentMethod

$
0
0

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.


Viewing all articles
Browse latest Browse all 140331

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>