React.js 的 PayPal 按钮

Question

React.js 的 PayPal 按钮

4

我想在我的应用程序中显示PayPal按钮，但我无法使其工作。我是基于这个jsfiddle。 https://jsfiddle.net/rbacekkb/

我尝试将其放入我的应用程序中，但该按钮未显示在我想要的页面上。我不知道我做错了什么。

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;

index.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>

- Jason Tran

在React组件中不要使用ID！
你的锚点是自闭合的，所以似乎没有显示出来。

- Andrew Li

3个回答

4

PayPal为React提供按钮实现： https://developer.paypal.com/docs/business/checkout/configure-payments/single-page-app/ 只需要复制粘贴两个步骤。我需要做的唯一更改是：更改

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

To

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

- Chris K.

服务器错误 ReferenceError: window未定义在Next.js下无法工作，有什么解决方法吗？ - Jatinder

在_app.js中使用defer加载脚本，然后在组件级别下使用useEffect钩子函数：

useEffect(() => {
    if (window.paypal) {
      window.paypal.Buttons().render("#paypal-button-container");
    }
  }, []);

按钮出现了！#nextjs - Jatinder

3

PayPal实际上提供了一个React按钮：

https://github.com/paypal/paypal-checkout/blob/master/docs/frameworks.md https://github.com/paypal/paypal-checkout/blob/master/demo/react.htm

- bluepnume

谢谢您的建议！是的，实际上Paypal为reactjs暴露了一个接口，但是没有清晰的文档和示例。对我来说创建另一个真正的react-paypal-express-checkout库有点困难，请查看我上面的答案。 - thinhvo0108

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thinhvo0108 · Accepted Answer

似乎直到今天还没有人开发出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，如果您使用它或发现它很有趣，请给我以信用！