Question

我正在尝试通过遵循此guide来将Stripe与我的平均堆栈应用程序集成在一起，但是在集成的Angular端出现了一个错误。

以下是我的 Angular组件代码：

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
  }

}

以下是 Angular组件模板代码：

<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>

以下是正在控制台上打印的错误。

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

自早上以来，我一直在为此苦苦挣扎。任何帮助将非常感激。您将挽救我的生命。

Answer 1

您正在尝试将三个参数传递给Stripe的createPaymentMethod。字符串'card'，元素this.cardElement和最后一个包含billing_details参数的对象。

如果您查看Stripe's documentation的这一部分，则createPaymentMethod仅接受一个参数，即应该使用必需的参数及其值定义的单个对象，而在您的情况下，您应该尝试以下操作：

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

角度条纹集成错误：请提供一个元素或PaymentMethod

1 个答案: