为 react paypal express checkout 设置返回 URL

Question

我正在使用react-paypal-express-checkout 并尝试在仪表板中设置返回 URL，但这不起作用。我可以收到钱，但它不会让我回到正确的页面。

您能否告知我如何将其添加到 react-paypal-express-checkout 代码中？

import React, { Component } from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout'

export default class PaypalButton extends React.Component {

  render() {
  
const onSuccess = (payment) => { }
  
const onCancel = (data) => { }
  
const onError = (err) => { }
  
  let env = 'production';
  let currency = 'GBP';
  let total = 20
  
  const client = {
  	sandbox: 'YOUR-SANDBOX-APP-ID',
  production: 'YOUR-PROD-APP-ID',
}

return (<PaypalExpressBtn env={env} client={client} currency={currency} total={total} onError={onError} onSuccess={onSuccess} onCancel={onCancel} />)

  }

}

Answer 1

如果将来有人需要它，请使用此代码。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import PaypalExpressBtn from 'react-paypal-express-checkout';

class PaypalButton extends React.Component {
    render() {		
		const onSuccess = (payment) => {
			// Congratulation, it came here means everything's fine!
            		console.log("The payment was succeeded!", payment);
					// You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
					this.props.history.push('/routehere')
					
		}		
		
		const onCancel = (data) => {
			// User pressed "cancel" or close Paypal's popup!
			console.log('The payment was cancelled!', data);
			// You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
		}	
		
		const onError = (err) => {
			// The main Paypal's script cannot be loaded or somethings block the loading of that script!
			console.log("Error!", err);
			// Because 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 env = 'production'; // you can set here to 'production' for production
		let currency = 'GBP'; // or you can set this value from your props or state  
		let total = 20; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
		// Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/
		
		const client = {
			sandbox:    'YOUR-SANDBOX-APP-ID',
			production: 'AScH9LQjnZZzeEr-Y_YzH0LS6tcmlTuJu4rYnAD2XEipTP9yekPv4bgADHpRVRQCldAObaZsAHjhv1p5',
		}
		// In order to get production's app-ID, you will have to send your app to Paypal for approval first
		// For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"): 
		//   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
		// For production app-ID:
		//   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/		
		
		// NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!		  
        return (
            <PaypalExpressBtn env={env} client={client} currency={currency} total={total} onError={onError} onSuccess={onSuccess} onCancel={onCancel} />
        );
    }
}


export default withRouter (PaypalButton);