1.最简单的方式是用商家账户登录后配置支付成功后的跳转URL,设置方法如下
设置PayPal返回URL并使其自动返回是指在使用PayPal进行支付时,设置支付成功后返回的页面URL,以便用户在支付完成后自动返回到指定的页面。这个功能可以在PayPal的商户后台进行设置。
以下是设置PayPal返回URL并使其自动返回的步骤:
- 登录PayPal商户后台。
- 在左侧菜单中选择“Account Settings”(账户设置)。
- 在“Website Payments”(网站支付)下,点击“Update”(更新)按钮。
- 在“PayPal Account Optional Settings”(PayPal账户可选设置)中,选择“Auto Return”(自动返回)。
- 在“Return URL”(返回URL)中输入支付成功后要返回的页面URL。
- 点击“Save”(保存)按钮完成设置。
设置完成后,当用户使用PayPal进行支付时,支付成功后将自动返回到设置的页面URL。这可以提高用户体验,并方便商家进行后续的订单处理。
关于支付成功后的URL内容根据PayPal要求是:您必须在返回URL所显示的页面上向买家解释付款已完成,交易已完成。
示例:感谢您的付款。您的交易已完成,您的购买收据已通过电子邮件发送给您。登录您的PayPal账户查看交易详情。
2.可以使用vue-paypal-checkout 前端通过支付成功的回调函数处理跳转的业务逻辑。
<template>
<div>
<div >
<paypal-checkout
:client="credentials"
:amount="amountop"
:currency="currency"
:intent="'capture'"
env="sandbox"
:button-style="buttonStyle"
@payment-authorized="paymentAuthorized"
@payment-completed="paymentCompleted"
@payment-cancelled="paymentCancelled"
/>
</div>
</div>
</template>
<script>
import paypalCheckout from 'vue-paypal-checkout'
//client_id是商家的
export default {
name: 'PayPalCheckout',
data() {
return {
credentials: {
sandbox: '测试环境client_id',
production: '填写线上环境client_id'
},
currency: 'USD',
buttonStyle: {
label: 'paypal',
size: 'large'
}
};
},
props:{
amountop:{
type: [String,Number],
default: '',
}
},
components:{paypalCheckout},
methods: {
paymentAuthorized (data) {
// 授权完成的回调,可以拿到订单id
console.log(data,'授权完成的回调');
},
paymentCompleted (data) {
// 用户支付完成的回调,可以拿到订单id
console.log(data,'支付完成的回调');
},
paymentCancelled (data) {
// 用户取消交易的回调
console.log(data,'用户取消的回调');
}
},
};
</script>
<style lang="scss" >
</style>
3.后端在接收到paypal支付成功的相应后带参数跳转到前端路由页面