javascript - developer - paypal-checkout

botón de PayPal para react.js

Question

así que estoy tratando de mostrar el botón de PayPal en mi aplicación, pero no puedo hacer que funcione. Lo estoy basando en este jsfiddle. https://jsfiddle.net/rbacekkb/

Traté de poner en mi aplicación, pero el botón no aparece en la página que quiero. No sé lo que hice mal.

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;

tratando de que aparezca en esta página actualmente para probar.

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>

Answer 1

Parece que nadie ha desarrollado un botón de paypal hasta hoy (para react-native, puede haber uno, pero mi biblioteca es la primera), ¡es por eso que acabo de crear uno para todos!

==========

Para referencia de todos, si desea utilizar el botón de pago exprés de Paypal (simplemente transfiriendo el monto total a pagar)

Utilice react-paypal-express-checkout ( soy el autor ):

Instalar :

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

El ejemplo más simple (pero mostrará el botón de pago exprés de 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} />
        );
    }
} 

==========

Para obtener un documento más detallado, vaya aquí:

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

Esta biblioteca fue desarrollada para reactjs, escrita en ES6, simple pero funcional, por favor revisa mis tutoriales para ver los ejemplos más simples y completos

Esta biblioteca proporciona el botón de pago exprés de Paypal (lo que significa que ahora podemos simplemente pasar el monto total a pagar)

¡Más tarde, vendrán características más avanzadas! La solicitud de Fork & pull es bienvenida, ¡y por favor también dame crédito si la usas o la encuentras interesante!

==========

Mis respuestas a problemas similares:

Hacer un botón de PayPal para pagar artículos en React.js?

¿Cómo usar el pago exprés en contexto de PayPal con ReactJS?

botón de PayPal para react.js

¿Cómo puedo crear un componente de reacción para el pago exprés en contexto de paypal?

Recuperación en contexto: Uncaught SecurityError: Bloqueado un marco con origen: checkout.js: 4734 arroja un error

Solución de pago de cliente en React (sin servidor)?

Answer 2

PayPal realmente expone un botón React:

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