如何在 React 中使用 Paystack

Paystack 是一种在线支付服务，它可以让您的应用程序轻松地接收付款。在这篇文章中，我们将看看如何在 React 中使用 Paystack。我们将使用 react-paystack 包来简化流程。

步骤

1. 安装 react-paystack 包。

npm install react-paystack

2. 导入 react-paystack 包和您要使用的 React 呈现函数。

import React from "react";
import PaystackButton from "react-paystack";

3. 使用 Paystack 显示您的组件。在 PaystackButton 组件中，您需要提供以下内容：

• text：显示在按钮上的文本。
• className：CSS 类名。
• callback：用于处理成功付款的函数。
• close：用于处理取消付款的函数。
• disabled：布尔值，指定按钮是否应处于禁用状态。
• embed：布尔值，确定按钮是否应嵌入在页面上。
• reference：付款的参考号。如果未提供，则Paystack将随机生成一个。

下面是一个示例Paystack组件：

class Paystack extends React.Component {
  state = {
    key: "pk_test_xxxxxxxxxxxxxxxxxxxxxxxx",
    email: "john.doe@example.com",
    amount: 10000,
    name: "John Doe"
  };
  callback = (response) => {
    console.log(response); // 这里可以进行回调处理函数
  };

  close = () => {
    console.log("Payment closed");
  };

  render() {
    return (
      <div>
        <PaystackButton
          text="支付"
          className="payButton"
          callback={this.callback}
          close={this.close}
          disabled={false}
          embed={false}
          reference={Math.random().toString(36).substring(2, 16)}
          email={this.state.email}
          amount={this.state.amount}
          publicKey={this.state.key}
          tag="button"
        />
      </div>
    );
  }
}

export default Paystack;

在实际使用中，您需要将 key、email、amount 和 name 替换为您自己的值。key 是您的公钥，您可以从 Paystack 仪表板中获得它。

4. 渲染您的组件。

现在，您只需要在您的应用程序中呈现这个组件就可以了。

class App extends React.Component {
  render() {
    return (
      <div>
        ...
        <Paystack />
      </div>
    );
  }
}

export default App;

结论

现在，您已经知道如何在 React 中使用 Paystack。它是一个非常简单的过程，一旦您获得了公钥，就可以开始接收付款。