有没有办法使用 reactjs 将贝宝脚本标签放在按钮内？

Question

我正在为 PayPal 小部件实现智能按钮，我想知道如何去做。我现在的想法是制作一个按钮，看看我是否可以在其中放置一个脚本标签，以引导我付款。到目前为止，这是我的代码：

这是来自 index.js 文件

<button>Donate Here Plz</button>

这是在我加入项目之前已经编写好的 reactjs 文件。

import ReactDOM from "react-dom";
import scriptLoader from "react-async-script-loader";

class PaypalButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showButton: false,
      price: 1.0,
      priceError: true
    };

    window.React = React;
    window.ReactDOM = ReactDOM;
  }

  componentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props;

    if (isScriptLoaded && isScriptLoadSucceed) {
      this.setState({ showButton: true });
    }
  }

  handleInputChange = e => {
    const re = /^\d*\.?\d{0,2}$/;

    if (e.target.value === "" || re.test(e.target.value)) {
      this.setState({ price: e.target.value });
    }
    if (this.state.price >= 1) {
      this.state.priceError = false;
    } else {
      this.state.priceError = true;
    }
    console.log(this.state.priceError);
  };

  componentWillReceiveProps(nextProps) {
    const { isScriptLoaded, isScriptLoadSucceed } = nextProps;

    const isLoadedButWasntLoadedBefore =
      !this.state.showButton && !this.props.isScriptLoaded && isScriptLoaded;

    if (isLoadedButWasntLoadedBefore) {
      if (isScriptLoadSucceed) {
        this.setState({ showButton: true });
      }
    }
  }

  render() {
    const paypal = window.PAYPAL;
    const {
      currency,
      env,
      commit,
      client,
      onSuccess,
      onError,
      onCancel
    } = this.props;

    const { showButton, price } = this.state;

    const payment = () =>
      paypal.rest.payment.create(env, client, {
        transactions: [
          {
            amount: {
              total: price,
              currency
            }
          }
        ]
      });

    const onAuthorize = (data, actions) =>
      actions.payment.execute().then(() => {
        const payment = {
          paid: true,
          cancelled: false,
          payerID: data.payerID,
          paymentID: data.paymentID,
          paymentToken: data.paymentToken,
          returnUrl: data.returnUrl
        };

        onSuccess(payment);
      });

    const style = {
      layout: "vertical", // horizontal | vertical
      size: "medium", // medium | large | responsive
      shape: "rect", // pill | rect
      color: "gold" // gold | blue | silver | white | black
    };

    return (
      <React.Fragment>
        <form>
          <h3 style={{ justifySelf: "center" }}>Donate Amount</h3>
          <input
            name="donate"
            type="text"
            placeholder="Minimum $1.00"
            value={this.state.price}
            onChange={this.handleInputChange}
            className="donationInput"
          />
        </form>

        <br />
        {showButton && (
          <paypal.Button.react
            style={style}
            env={env}
            client={client}
            commit={commit}
            payment={payment}
            onAuthorize={onAuthorize}
            onCancel={onCancel}
            onError={onError}
          />
        )}
      </React.Fragment>
    );
  }
}

export default scriptLoader("https://www.paypalobjects.com/api/checkout.js")(
  PaypalButton
);```

No error messages show up, but the button does not lead to anything.

Answer 1

在我看来，您正在尝试使用降价版本的结帐 API。有一个新版本 V2 你可以在这里查看Paypal Checkout Buttons。

如果您需要新的 V2 按钮的 npm 包，可以在此处查看 NPM react-paypal-button-v2。

也就是说，您可以执行以下操作，这些操作取自此处 react-paypal-button-v2 github 的 npm 包 github，但没有打字稿和功能组件形式：

import React, { useState, useEffect} from 'react';
import ReactDOM from 'react-dom';

const PaypalButton = props => {
  const [sdkReady, setSdkReady] = useState(false);

  const addPaypalSdk = () => {
    const clientID =
      'Your-Paypal-Client-ID';
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://www.paypal.com/sdk/js?client-id=${clientID}`;
    script.async = true;
    script.onload = () => {
      setSdkReady(true);
    };
    script.onerror = () => {
      throw new Error('Paypal SDK could not be loaded.');
    };

    document.body.appendChild(script);
  };

  useEffect(() => {
    if (window !== undefined && window.paypal === undefined) {
      addPaypalSdk();
    } else if (
      window !== undefined &&
      window.paypal !== undefined &&
      props.onButtonReady
    ) {
      props.onButtonReady();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


  //amount goes in the value field we will use props of the button for this   
  const createOrder = (data, actions) => {
    return actions.order.create({
      purchase_units: [
        {
          amount: {
            currency_code: 'USD',
            value: props.amount,
          }
        }
      ]
    });
  };

  const onApprove = (data, actions) => {
    return actions.order
      .capture()
      .then(details => {
        if (props.onSuccess) {
          return props.onSuccess(data);
        }
      })
      .catch(err => {
        console.log(err)
      });
  };

  if (!sdkReady && window.paypal === undefined) {
    return (
      <div>Loading...</div>
    );
  }

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

  //you can set your style to whatever read the documentation for different styles I have put some examples in the style tag
  return (
    <Button
      {...props}
      createOrder={
        amount && !createOrder
          ? (data, actions) => createOrder(data, actions)
          : (data, actions) => createOrder(data, actions)
      }
      onApprove={
        onSuccess
          ? (data, actions) => onApprove(data, actions)
          : (data, actions) => onApprove(data, actions)
      }
      style={{
        layout: 'vertical',
        color: 'blue',
        shape: 'rect',
        label: 'paypal'
      }}
    />
  );
};

export default PaypalButton;

然后你可以像这样在你的组件中使用它：

const onSuccess = payment => {
  console.log(payment)
}

const onCancel = data => {
  console.log(data)
};

const onError = err => {
  console.log(err);
};

<PaypalButton
  amount="1.00"
  onError={onError}
  onSuccess={onSuccess}
  onCancel={onCancel}
/>

请注意，这没有经过测试，我只是从 npm 包 github 中将其拉出并删除了打字稿以便于阅读，但它应该让您了解该做什么以及如何将您的捐赠逻辑添加到按钮。我强烈建议阅读贝宝文档。经历是痛苦的，但也是必要的。如果您不想创建自己的按钮，您可以添加 npm 包，然后就可以轻松上手了。