How to use the paypal-checkout.Button function in paypal-checkout

mounted: function () {
      const vue = this
      const sandbox = vue.dev

      paypal.Button.render({
        env: vue.env,

        payment: function (resolve, reject) {
          vue.createPayment()
            .then((response) => {
              const data = response.data
              if (sandbox) console.log('The payment was created!')
              vue.$emit('paypal-paymentCreated', data)
              resolve(data.paymentID)
            }, (err) => {
              reject(err)
            })
        },

        // Pass a function to be called when the customer completes the payment
        onAuthorize: function (data) {

// Pass the payment details for your transaction
      // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters
      payment: vue.payment,

      // Display a "Pay Now" button rather than a "Continue" button
      commit: vue.commit,

      // Pass a function to be called when the customer completes the payment
      onAuthorize: vue.onAuthorize,

      // Pass a function to be called when the customer cancels the payment
      onCancel: vue.onCancel
    }, assignTo(vue, propTypes.BUTTON));

    paypal.Button.render(button, vue.$el);
  }
};

// Pass the payment details for your transaction
      // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters
      payment: vue.payment,

      // Display a "Pay Now" button rather than a "Continue" button
      commit: vue.commit,

      // Pass a function to be called when the customer completes the payment
      onAuthorize: vue.onAuthorize,

      // Pass a function to be called when the customer cancels the payment
      onCancel: vue.onCancel,
    }, assignTo(vue, propTypes.BUTTON));

    paypal.Button.render(button, vue.$el);
  },
};

import React from 'react';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';
import PropTypes from 'prop-types';

const Button = paypal.Button.driver('react', { React, ReactDOM });

export default class PayPalButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      env: this.props.env,
      client: {
        sandbox: this.props.sandboxID,
        production: this.props.productionID
      },
      amount: this.props.amount,
      currency: this.props.currency,
      commit: this.props.commit
    };
  }

import '@babel/polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';

const Button = paypal.Button.driver('react', { React, ReactDOM });

/**
 * types
 */
interface State {
  loaded: boolean;
  error: boolean;
}

export type OnCancelData = {
  billingID: string;
  cancelUrl: string;
  intent: string;
  paymentID: string;
  paymentToken: string;
}

app.ports.renderPaypalButton.subscribe(token =>
    paypal.Button.render(
      {
        braintree,
        client: {
          sandbox: token,
          production: token
        },
        env: "sandbox",
        commit: true,
        payment: (resolveData, actions) => {
          return actions.braintree.create({
            flow: "checkout",
            intent: "sale",
            amount: 3000,
            currency: "JPY",
            enableShippingAddress: false
          });

render() {
    const Button = paypal.Button.driver('react', { React, ReactDOM });
    return (
      <button> this.payment(data, actions) }
        onAuthorize={ (data, actions) =&gt; this.onAuthorize(data, actions) }
        {...this.props}
      /&gt;
    );
  }
}</button>