javascript - tag - react html
¿Cómo usar el pago exprés en contexto de PayPal con ReactJS? (2)
Estoy siguiendo este tutorial de PayPal sobre cómo generar un botón de PayPal, pero nada funciona. El código que proporciona para hacer que el botón parezca misteriosamente trabajado una sola vez para mí, pero después de una actualización, desaparece y no hay ningún Cristo que lo haga aparecer nuevamente.
Este es el código que se ejecuta dentro de un componente React
class Storefronts extends Component {
render() {
return (
<div className="layout-wrapper">
{this.props.location.pathname === ''/shops'' ? <Shops {...this.props}/> : <Basic {...this.props}/>}
<script>
window.paypalCheckoutReady = function() {
paypal.checkout.setup(''MERCHANTID'', {
environment: ''sandbox'',
container: ''test1'',
})
}
</script>
</div>
);
}
}
Este es un componente de Storefront que tiene una Shop , y dentro de este tiene un componente de Card . Básicamente, es una tienda que muestra sus productos, y cada producto ( Card ) debe tener un botón:
class Card extends Editor {
render() {
const {list} = this.props;
let img = ''/images/logo-v2-small.jpg'';
return (
<Row>
{list.map(item =>{
return (
<Col xs={6} md={3}>
<Link to={{ pathname: ''/shops/'' + item.id }}>
<Thumbnail src={img} alt={item.name}>
<h3>{item.name}</h3>
<p>{this.parseHtmlToReact(item.description)}</p>
<p>{item.address}</p>
<p>
<Button bsStyle="primary">Book</Button>
<a id="test1" href="/checkout"/> // The button should appear here.
<p className="pull-right">
{item.rating}
</p>
</p>
</Thumbnail>
</Link>
</Col>
)
})}
</Row>
);
}
}
No hay nada que diga sobre su uso con React y ningún módulo reciente para él.
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
==========
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?
Puede crear su propio componente Button de PayPal.
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" />
);
}
}
ReactDOM.render(<PayPalButton id="button" />, document.getElementById(''View''));