reactjs 用React替换javascript Paypal button.render()调用

y3bcpkx1  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(127)

我可以做一个基于javascript的贝宝购买按钮usign此代码(未显示的API密钥src变量)

paypal.Buttons().render('#paypal-button-container');
  paypal.Buttons({
    createOrder: function (data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    }
  }).render('#paypal-button-container');
  paypal.Buttons({
    createOrder: function (data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function (data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function (details) {
        // This function shows a transaction success message to your buyer.
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');

我想使用React渲染这些按钮。

render() {
    return (

      <button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button>
      <div className="paypal-buttons-container">
        <div id="paypal-button"></div>
      </div>
    );
  }

如何在React Render函数中正确渲染这些内容?

6tqwzwtp

6tqwzwtp1#

官方的@paypal/react-paypal-js(storybook)可以从react使用。
应该替换的是对actions.order.createactions.order.capture的所有引用。虽然它还没有进入react文档,但这些函数已经被弃用,不应该用于任何新的集成。相反,将它们替换为分别创建和捕获订单的两个后端路由的调用。
这种后端的例子可以在standard integration guidethis TypeScript sample app中找到。它们都没有使用React作为前端,但是后端路由使用v2/checkout/orders API来创建和捕获PayPal的订单,这就是它们的重要之处。

相关问题