时间戳

首页 > 解决方案 > 为什么 Stripe.js 没有使用 react-stripe-elements 在 React 中加载？

reactjs - 为什么 Stripe.js 没有使用 react-stripe-elements 在 React 中加载？

问题描述

我正在使用 react-stripe-elements 玩 Stripe Elements。在一个非常基本的测试应用程序中，我在 index.html 文件的 head 部分添加了 Stripe 脚本标签：

<script crossorigin src="https://js.stripe.com/v3/"></script>

我的 App.js 文件几乎遵循 Stripe 教程：

import React from 'react';
import './App.css';
import CheckoutForm from './CheckoutForm.js' 
import {Elements, StripeProvider} from 'react-stripe-elements';


function App() {
  return (
      <div>
        <StripeProvider apiKey="...my API key...">
          <div className="example">
            <h1>React Stripe Elements Example</h1>
            <Elements>
              <CheckoutForm />
            </Elements>
          </div>
        </StripeProvider>
      </div> 
  );
}

export default App;

但是，我收到一条错误消息：“错误：请在此页面上加载 Stripe.js ( https://js.stripe.com/v3/ ) 以使用 react-stripe-elements。”

为什么即使我在头部复制/粘贴了链接，也没有检测到 Stripe.js？StackOverflow 上有一个类似的问题，但答案似乎是“不稳定的互联网连接”——我认为我的情况并非如此。

标签： reactjsstripe-payments

解决方案

事实证明，所有这一切都发生了，因为我在使用 StripeProvider 元素时使用的是我的密钥而不是我的可发布密钥。一旦我用可发布的密钥替换了密钥，一切正常。

推荐阅读