javascript - 带有反应js的paystack

Question

我目前正在学习使用 react 构建电子商务 webapp，我使用的教程材料使用条带作为支付网关，但我想使用 Paystack。但我不知道如何编写代码，也许有一种通用方法可以将支付网关集成到反应中？

标签： javascriptreactjs

Answer 1

使用NPM 或 YARN安装react-paystack库。这就是弹出设置所需的全部内容，有关详细信息，请查看最初发布此代码的 Paystack 文档Paystack React。

目前我只能看到 Paystack 的弹出实现，因为 Paystack.js 现在已弃用。

 import React, { useState } from "react"
import { PaystackButton } from "react-paystack"
import "./App.css"

const App = () => {
  const publicKey = "pk_test_4fc00f3df93a5f8efeb57bdd70605937312a029e"
  const amount = 1000000
  const [email, setEmail] = useState("")
  const [name, setName] = useState("")
  const [phone, setPhone] = useState("")

  const componentProps = {
    email,
    amount,
    metadata: {
      name,
      phone,
    },
    publicKey,
    text: "Buy Now",
    onSuccess: () => {
      setEmail("")
      setName("")
      setPhone("")
    },
    onClose: () => alert("Wait! You need this oil, don't go!!!!"),
  }

  return (
    <div className="App">
      <div className="container">
        <div className="item">
          <div className="overlay-effect"></div>
          <img
            className="item-image"
            src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
            alt="product"
          />
          <div className="item-details">
            <p className="item-details__title">Coconut Oil</p>
            <p className="item-details__amount">NGN {amount / 100}</p>
          </div>
        </div>
        <div className="checkout">
          <div className="checkout-form">
            <div className="checkout-field">
              <label>Name</label>
              <input
                type="text"
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>
            <div className="checkout-field">
              <label>Email</label>
              <input
                type="text"
                id="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="checkout-field">
              <label>Phone</label>
              <input
                type="text"
                id="phone"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
              />
            </div>
            <PaystackButton className="paystack-button" {...componentProps} />
          </div>
        </div>
      </div>
    </div>
  )
}

export default App