Gabriel M Fernandes Gabriel M Fernandes - 1 month ago 8
React JSX Question

How to use PayPal's Express In-Context Checkout with ReactJS?

I'm following this PayPal tutorial about how to generate a PayPal button, but nothing works. The code it provides to make the button appear mysteriously worked only once for me, but after a refresh, it disappear and there's no Christ to make it appear again.

This is the code being executed inside of a React component

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


This is a
Storefront
component that holds a
Shop
, and inside this one has a
Card
component. Basically, it's a shop that shows its products, and each product (
Card
) needs to have a button:

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


There's nothing saying about its usage with React and no recent module for it.

Answer

You could create your own PayPal Button component.

class PayPalButton extends React.Component {
  componentDidMount() {
    const container = this.props.id;
    const merchantId = this.props.merchantId;
    window.paypalCheckoutReady = function() {
      paypal.checkout.setup(merchantId, {
        locale: 'en_US',
        environment: 'sandbox',
        container
      });
    }
  }
  render() {
    return(
      <a id={this.props.id} href="/checkout"/>
    );
  }

}

ReactDOM.render(<PayPalButton merchantId="6XF3MPZBZV6HU"  id="button" />, document.getElementById('View'));

Working example on JSBin.