javascript - developer - paypal-checkout
botón de PayPal para react.js (2)
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>
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?
¿Cómo puedo crear un componente de reacción para el pago exprés en contexto de paypal?
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