angular - canMakePayment() 在 LOCALHOST 中总是返回 null

Question

我正在尝试显示“支付”按钮，但paymentRequest.canMakePayment()始终返回 null。我在 chrome（版本 73.0.3683.75）上的 LOCALHOST 上执行此代码，并且卡也保存在 chrome 上。

import { Component, OnInit } from '@angular/core';  
declare let Stripe;

@Component({
  selector: 'hts-card-details',
  templateUrl: './card-details.component.html'
})
  export class demo implements OnInit {
  card: any;
  stripe_value: any;
  elements: any;
  paymentRequest: any;
  prButton: any;
  constructor() { }

  ngOnInit() {
     this.displayStripeCard('pk_test_mMvKPSkT746S4xp6FMhMOk3W'); // for testing 
  }

  displayStripeCard(stripeKey) {
    this.stripe_value = Stripe(stripeKey);
    this.elements = this.stripe_value.elements();
    // Custom styling can be passed to options when creating an Element.
    this.card = this.elements.create('card', {style});

    // Mount the Card Element on the page.
    this.card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    this.card.addEventListener('change', function(event) {
      const displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    // create payment method
    this.paymentRequest = this.stripe_value.paymentRequest({
      country: 'US',
      currency: 'usd',
      total: {
        label: 'Demo total',
        amount: 200,
      },
      requestPayerName: true,
      requestPayerEmail: true,
    });
     this.prButton = this.elements.create('paymentRequestButton', {
      paymentRequest: this.paymentRequest,
    });
    this.mountButton();

  }
  async mountButton() {
    await this.paymentRequest.canMakePayment().then(function (result) {
        debugger;
        console.log(result); // returns null
    });


  }
}

标签： angularstripe-payments

Answer 1

即使在本地环境中也必须使用 https。在“先决条件”下查看更多信息：https ://stripe.com/docs/stripe-js/elements/payment-request-button