react.js 的 paypal 按钮

IT技术 javascript reactjs paypal
2021-03-31 21:05:33

所以我试图让paypal按钮显示在我的应用程序上,但我无法让它工作。我基于这个 jsfiddle。 https://jsfiddle.net/rbackkb/

我试图放入我的应用程序,但按钮没有显示在我想要的页面上。我不知道我做错了什么。

paypal.jsx

import React from 'react';



class PayPalButton extends React.Component {
    constructor() {
        super();
        // you can take this value from a config.js module for example.
        this.merchantId = '6XF3MPZBZV6HU';
    }

    componentDidMount() {
        let container = this.props.id;
        let merchantId = this.merchantId;
        window.paypalCheckoutReady = function() {
            paypal.checkout.setup(merchantId, {
                locale: 'en_US',
                environment: 'sandbox',
                container: container,
            });
        }
    }

    render() {
        return(
            <a id={this.props.id} href="/checkout" />
        );
    }
}

module.exports = PayPalButton;

试图让它显示在当前页面中以进行测试。

home.jsx

import React from "react";
import {Grid,Row,Col,Button,Jumbotron, Carousel, Panel} from "react-bootstrap";
import PayPalButton from "../components/paypal";
import {LinkContainer} from 'react-router-bootstrap';
import {Link} from 'react-router';

const title = (
    <h3>Fashion News</h3>
)

const title2 = (
    <h3>Fashion History</h3>
)

const title3 = (
    <h3>Fashion Items</h3>
)

const Home = React.createClass({
  displayName: "Home page",
  componentDidMount(){
    console.log(this.props)
  },
  render(){
    return (

        <PayPalButton id="button" />

    );
  }

});
module.exports = Home;

索引.html

<script>
    (function(){
      var ef = function(){};
      window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
    }());
  </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
  <script src="react-with-addons-15.1.0.js"></script>
  <script src="react-dom-15.1.0.js"></script>
  <script src="//www.paypalobjects.com/api/checkout.js" async></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
3个回答

似乎直到今天还没有人开发出 react 的 paypal 按钮(对于 react-native,可能有一个,但我的库是第一个),这就是为什么我刚刚为每个人创建了一个!

==========

供大家参考,如果您想使用Paypal的快速​​结账按钮(只需传递要支付的总金额)

请使用react-paypal-express-checkout我是作者):

安装

npm install --save react-paypal-express-checkout

最简单的示例(但它会显示 Paypal 快速结账按钮):

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';

export default class MyApp extends React.Component {
    render() {
        const client = {
            sandbox:    'YOUR-SANDBOX-APP-ID',
            production: 'YOUR-PRODUCTION-APP-ID',
        }   
        return (
            <PaypalExpressBtn client={client} currency={'USD'} total={1.00} />
        );
    }
} 

==========

更详细的文档,请到这里:

https://github.com/thinhvo0108/react-paypal-express-checkout

这个库是为 reactjs 开发的,用 ES6 编写,简单但可行,请查看我的教程以获取最简单和完整的示例

这个库提供了 Paypal 的快速结账按钮(这意味着我们现在可以传入要支付的总金额)

以后还会有更高级的功能!欢迎 fork 和 pull-request,如果您使用或发现它有趣,也请给我点赞!

这不起作用。我按照github.com/thinhvo0108/react-paypal-express-checkout 上的说明进行操作我看到了按钮,但是当我点击它时......没有任何反应。没有弹出窗口(弹出窗口拦截器没有问题),没有控制台错误,没有日志,没有请求/响应错误......没有。
2021-05-27 21:05:33
@SujitJoshi 你有你的 Paypal 的 App ID 吗?这很重要!
2021-05-28 21:05:33
我会检查我的库的最新版本并解决问题(如果有),感谢您报告问题
2021-06-04 21:05:33
如果有人在 React.js 中寻找 Stripe 替代方案,请查看此分步指南,以使用 Express 设置最小的 Stripe 服务器并将其与 React 客户端应用程序一起使用。
2021-06-07 21:05:33
我只设置沙箱ID。同样在进一步调试...我发现当按钮被点击时...它发送一个带有 env 作为“生产”的请求,即使它没有设置/使用。
2021-06-15 21:05:33

PayPal 为 React 提供了按钮实现:https : //developer.paypal.com/docs/business/checkout/configure-payments/single-page-app/

这是一个 2 步复制和粘贴工作。我唯一要做的改变:

改变

const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });

const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
让它在 _app.js 中使用 defer 加载脚本,然后在组件级别下使用 useEffect 的钩子: useEffect(() => { if (window.paypal) { window.paypal.Buttons().render("#paypal-button-container"); } }, []); 按钮出现了!#nextjs
2021-05-30 21:05:33
谢谢克里斯
2021-06-06 21:05:33
它在next下不起作用,js有什么解决方法吗? Server Error ReferenceError: window is not defined
2021-06-12 21:05:33
谢谢你的建议!是的,实际上Paypal为reactjs公开了一个,但是没有明确的文档和示例。创建另一个真正的 react-paypal-express-checkout 库对我来说有点困难,请检查我上面的回答
2021-06-13 21:05:33