react.js 的 paypal 按钮 [英] paypal button for react.js

问题描述

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

so I'm trying to get the paypal button to show up on my app but I can't get it work. I'm basing it off this jsfiddle. https://jsfiddle.net/rbacekkb/

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

I tried to put into my app but the button isn't showing up on the page that I want. I don't know what i did wrong.

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;

目前正在尝试让它显示在此页面中以进行测试.

trying to get it show up in this page currently for testing.

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>

推荐答案

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

Seems that nobody has yet developed a react's paypal button until today (for react-native, there may be one, but my library is the first), that's why I have just created one for everybody!

==========

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

For everyone's reference, if you want to use Paypal's express checkout button (simply passing the total amount to be paid)

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

Please use react-paypal-express-checkout (I'm the author):

安装:

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

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

Simplest Example (but it will show the Paypal express check out button):

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} />
        );
    }
} 

==========

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

For more detailed document, please go here:

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

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

This library was developed for reactjs, written in ES6, simple but yet workable, please check my tutorials for both simplest and full examples

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

This library provides the Paypal's express check out button (which means we can now just pass in the total amount to be paid)

稍后，将推出更高级的功能！叉&欢迎拉请求，如果你使用或觉得它有趣，也请给我点赞！

Later, more advanced features will come! Fork & pull-request are welcomed, and please also give me credit if you use or find it interesting!

这篇关于react.js 的 paypal 按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！