Вы можете использовать реагировать-асин c -скрипт-загрузчик
Поскольку вы работаете с продуктом reactjs, вы можете написать компонент реагирования, чтобы сделать то же самое вместо использование HTML файла.
здесь https://cubettech.com/resources/blog/integrating-paypal-rest-api-with-react-js/ является хорошим примером этого.
компонент PayPal:
import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';
import PropTypes from 'prop-types';
class PaypalButton extends React.Component {
constructor(props) {
super(props);
window.React = React;
window.ReactDOM = ReactDOM;
this.state = {
showButton: false,
env: 'sandbox', // Or 'sandbox'
client: {
sandbox: 'xxxxxxxxx', // sandbox client ID
production: 'xxxxxxxxx' // production client ID
},
commit: true, // Show a 'Pay Now' button
};
}
componentDidMount() {
const {isScriptLoaded, isScriptLoadSucceed} = this.props;
if (isScriptLoaded && isScriptLoadSucceed) {
this.setState({showButton: true});
}
}
componentWillReceiveProps({isScriptLoaded, isScriptLoadSucceed}) {
if (!this.state.show) {
if (isScriptLoaded && !this.props.isScriptLoaded) {
if (isScriptLoadSucceed) {
this.setState({showButton: true});
} else {
console.log('Cannot load Paypal script!');
this.props.onError();
}
}
}
}
render() {
const payment = () => paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{amount: {total: this.props.total, currency: this.props.currency}},
],
});
const onAuthorize = (data, actions) => actions.payment.execute().then(() => {
const payment = Object.assign({}, this.props.payment);
payment.paid = true;
payment.cancelled = false;
payment.payerID = data.payerID;
payment.paymentID = data.paymentID;
payment.paymentToken = data.paymentToken;
payment.returnUrl = data.returnUrl;
this.props.onSuccess(payment);
});
let ppbtn = '';
if (this.state.showButton) {
ppbtn = (<paypal.Button.react
env={this.state.env}
client={this.state.client}
payment={payment}
commit
onAuthorize={onAuthorize}
onCancel={this.props.onCancel}
/>);
}
return <div>{ppbtn}</div>;
}
}
PaypalButton.propTypes = {
currency: PropTypes.string.isRequired,
total: PropTypes.number.isRequired,
client: PropTypes.object.isRequired,
};
PaypalButton.defaultProps = {
env: 'sandbox',
onSuccess: (payment) => {
console.log('The payment was succeeded!', payment);
},
onCancel: (data) => {
console.log('The payment was cancelled!', data);
},
onError: (err) => {
console.log('Error loading Paypal script!', err);
},
};
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);
Компонент приложения
import React from 'react';
import PaypalExpressBtn from './PayPalExpressCheckOut';
export default class MyApp extends React.Component {
render() {
const onSuccess = (payment) => {
console.log("Your payment was succeeded!", payment);
}
const onCancel = (data) => {
// User pressed "cancel" or close Paypal's popup!
console.log('You have cancelled the payment!', data);
}
const onError = (err) => {
// The main Paypal's script cannot be loaded or somethings block the loading of that script!
console.log("Error!", err);
// Since the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
// => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
}
let currency = 'USD'; // or you can set this value from your props or state
let total = 1; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
return (
<PaypalExpressBtn
currency={currency}
total={total}
onError={onError}
onSuccess={onSuccess}
onCancel={onCancel}
/>
);
}
}