usePaypalCheckoutButton.jsx

import React, { Component } from 'react';
import './index.css';
import vip from 'AppSrc/img/vip.png'
import PropTypes from 'prop-types';
import PaypalButton from './PaypalBtn.jsx';

const CLIENT = {
    sandbox: 'xxx',
    production: 'xxx',
};

const ENV = process.env.NODE_ENV === 'production'
    ? 'production'
    : 'sandbox';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {}
        this.makeid = this.makeid.bind(this)
    }

    makeid() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i = 0; i < 50; i++){
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return text;
      }

    render() {        
        const onSuccess = (payment) =>
             console.log('Successful payment!', payment);
                
        const onError = (error) =>
            console.log('Erroneous payment OR failed to load script!', error);

        const onCancel = (data) =>
            console.log('Cancelled payment!', data);

        let invoice1 = this.makeid();
        return (
            <div>
                <br />
                <div className="row">
                    <div className="col-md-4 col-12">
                        <div className="card">
                            <div className="card-header text-center">
                                TWD $50
                            </div>
                            <div className="text-center">
                                <img src={vip} className="card-img-top w-75" alt="" />
                                <br />
                                <br />
                                <h5 className="card-title">額外旅遊規劃次數(3次)</h5>
                            </div>
                            <div className="card-body text-center">購買額外的次數來使用旅遊規劃服務</div>
                            <div className="card-footer text-muted text-center">
                                <PaypalButton
                                    client={CLIENT}
                                    env={ENV}
                                    commit={true}
                                    currency={'TWD'}
                                    total={50}
                                    onSuccess={onSuccess}
                                    onError={onError}
                                    onCancel={onCancel}
                                    invoice={invoice1}
                                />
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        );
    }
}

Index.propTypes = {
    dispatch: PropTypes.func
}

export default (Index);