时间戳

首页 > 解决方案 > 角度无法将条纹导入组件

angular - 角度无法将条纹导入组件

问题描述

我想以角度创建条纹结帐。逻辑与 stripe 中的示例相同，但我无法在组件类中导入 Stripe：

import {Stripe} from '@stripe/stripe-js';

这是我的用例：

  stripe = Stripe("mytoken");

网络风暴 说：

'Stripe' 仅指一种类型，但在这里用作值。

所以我认为导入是错误的，但我实际上不知道如何使用 html 中的脚本。stripe 的示例直接在脚本标记中使用此类：

 <script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("pk_test_51HaOuLKpHoRFb17FLbnrAQYRee73V3Xc3PzYkOcFmmC9OUbqgY8jW2fDLtNeWOEJKwOfYg9NTKtW1JfDIW2foeel00IsfFQfQW");
var checkoutButton = document.getElementById("checkout-button");

checkoutButton.addEventListener("click", function () {
  fetch("/create-session", {
    method: "POST",
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (session) {
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then(function (result) {
      // If redirectToCheckout fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using error.message.
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function (error) {
      console.error("Error:", error);
    });
});

标签： angularstripe-payments

解决方案

如果您直接包含 Stripe.js ，您将Stripe('pk_test_123')用于初始化。

使用@stripe/stripe-js（用于加载底层stripe.js资源的包装器），您应该按照使用文档进行初始化loadStripe：

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_123');

推荐阅读