如何在 angular 中使用付款意向客户端密码确认付款

How to confirm payment using payment intent cliet secret in angular

我是 stripe/angular 的新手,正在尝试将其集成到 angular 以确认来自客户端的付款。我有一个来自服务器端的客户端密钥,我正在调用

stripe.confirmCardPayment(
  client-secret,
  {
    payment_method: {card: cardElement}

  }
).then(function(result) {
  if (result.error) {
    console.log(result.error);
    // Display error.message in your UI.
  } else {
    console.log(result);
    
    // The payment has succeeded
    // Display a success message
  }
});

stripe里面有提到doc我不知道cardElementstripe也没说清楚

我的code.

这是正确的代码我已经使用您的链接编辑了代码并添加了以下代码以使其工作

   ngAfterViewInit() {
   this.payment();
   }

    payment() {
    this.stripe = Stripe('pk_test_TYPazNES7wQJ4WyN83oLTlEa');
    var elements = this.stripe.elements();
    var style = {
    base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',
    '::placeholder': {
      color: '#CFD7E0',
      },
     },
   };
   this.cardElement = elements.create('card', { style: style });
   this.cardElement.mount('#card-element');
   }
   sendPayment() {
   this.stripe
  .confirmCardPayment(
    'pi_3KU4ONITlRqRee7h0D8UANuT_secret_ysrjhG7BhlD5XRsDHZWA7n8Uc',
    {
      payment_method: { card: this.cardElement },
    }
  )
  .then(function (result) {
    if (result.error) {
      // Display error.message in your UI.
      console.log(result.error, ' ==== error');
    } else {
      console.log('success ==== ', result);
      // The payment has succeeded
      // Display a success message
    }
  });
  }

在您的 html 文件中将 class 添加到卡片元素中

    <label>
   Card details
    <!-- placeholder for Elements -->
    <div id="card-element" class="field"></div>
   </label>
   <button type="submit" (click)="sendPayment()">Submit Payment</button>