使用react js的paystack

Question

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

Answer 1

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

目前我只能看到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