增加paypal支付
This commit is contained in:
parent
88b278499b
commit
1206dd6877
109
dashboard/src/components/BuyPrepaidCreditsPayPal.vue
Normal file
109
dashboard/src/components/BuyPrepaidCreditsPayPal.vue
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ErrorMessage
|
||||||
|
class="mt-3"
|
||||||
|
:message="$resources.createPayPalOrder.error || error"
|
||||||
|
/>
|
||||||
|
<div class="mt-4 flex w-full justify-end">
|
||||||
|
<Button
|
||||||
|
variant="solid"
|
||||||
|
class="paypal-btn"
|
||||||
|
:loading="$resources.createPayPalOrder.loading || loading"
|
||||||
|
@click="processPayPalPayment"
|
||||||
|
>
|
||||||
|
{{ $t('Pay with PayPal') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { toast } from 'vue-sonner';
|
||||||
|
import { DashboardError } from '../utils/error';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BuyPrepaidCreditsPayPal',
|
||||||
|
props: {
|
||||||
|
amount: {
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
minimumAmount: {
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isOnboarding: {
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
error: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
resources: {
|
||||||
|
createPayPalOrder() {
|
||||||
|
return {
|
||||||
|
url: 'jcloud.api.billing.create_paypal_order_for_recharge',
|
||||||
|
params: {
|
||||||
|
amount: this.amount
|
||||||
|
},
|
||||||
|
validate() {
|
||||||
|
if (this.amount <= 0) {
|
||||||
|
throw new DashboardError(this.$t('Payment amount must be greater than 0'));
|
||||||
|
}
|
||||||
|
if (this.amount < this.minimumAmount) {
|
||||||
|
throw new DashboardError(this.$t('Amount is below the minimum required amount'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSuccess(response) {
|
||||||
|
window.open(response.payment_url, '_blank');
|
||||||
|
|
||||||
|
toast.success(this.$t('Payment page opened in new window'));
|
||||||
|
|
||||||
|
// Optional: check payment status
|
||||||
|
// this.checkPaymentStatus(response.order_id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
processPayPalPayment() {
|
||||||
|
this.$resources.createPayPalOrder.submit();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Optional: method to check payment status
|
||||||
|
checkPaymentStatus(orderId) {
|
||||||
|
const checkInterval = setInterval(() => {
|
||||||
|
this.$call('jcloud.api.billing.check_payment_status', {
|
||||||
|
order_id: orderId,
|
||||||
|
payment_type: 'paypal'
|
||||||
|
}).then(result => {
|
||||||
|
if (result && result.status === 'Success') {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
toast.success(this.$t('Payment successful! Account has been recharged'));
|
||||||
|
this.$emit('success');
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Error checking payment status:', err);
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
// Stop checking after 5 minutes
|
||||||
|
setTimeout(() => {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
}, 300000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.paypal-btn {
|
||||||
|
background-color: #00457C;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paypal-btn:hover {
|
||||||
|
background-color: #003057;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<div class="text-xs text-gray-600">{{ $t('Payment Method') }}</div>
|
<div class="text-xs text-gray-600">{{ $t('Payment Method') }}</div>
|
||||||
<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-3">
|
||||||
<label
|
<label
|
||||||
class="payment-option"
|
class="payment-option"
|
||||||
:class="{'payment-option-active': paymentGateway === 'Alipay'}"
|
:class="{'payment-option-active': paymentGateway === 'Alipay'}"
|
||||||
@ -49,11 +49,83 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
<label
|
||||||
|
class="payment-option"
|
||||||
|
:class="{'payment-option-active': paymentGateway === 'PayPal'}"
|
||||||
|
>
|
||||||
|
<div class="payment-icon">
|
||||||
|
<!-- PayPal SVG Logo -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119 28" class="paypal-svg">
|
||||||
|
<path d="M10.49,27.45c0-0.08,0.02-0.16,0.03-0.24c0.22-0.9,1.1-1.59,2.02-1.59h3.13c0.81,0,1.56,0.45,1.93,1.17
|
||||||
|
c0.04,0.06,0.09,0.12,0.14,0.17c0.36,0.43,0.55,0.96,0.55,1.52c0,0.08-0.01,0.16-0.03,0.24C19.03,27.79,18.89,28,18.73,28
|
||||||
|
c-0.36,0-0.72-0.15-0.99-0.43c-0.07-0.08-0.14-0.16-0.22-0.24c-0.06-0.07-0.11-0.13-0.17-0.19c-0.2-0.18-0.47-0.28-0.75-0.28h-0.87
|
||||||
|
c-0.92,0-1.66-0.69-1.76-1.59C12.96,27.3,11.89,27.45,10.49,27.45z" fill="#003087"></path>
|
||||||
|
<path d="M9.94,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.98c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.98
|
||||||
|
C10.68,24.14,9.92,23.44,9.94,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M21.63,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.22c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.22
|
||||||
|
C22.37,24.14,21.61,23.44,21.63,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M28.63,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.69c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.69
|
||||||
|
C29.37,24.14,28.61,23.44,28.63,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M36.16,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.42c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.42
|
||||||
|
C36.9,24.14,36.14,23.44,36.16,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M42.71,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.11c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.11
|
||||||
|
C43.45,24.14,42.69,23.44,42.71,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M50.07,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.34c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.34
|
||||||
|
C50.81,24.14,50.05,23.44,50.07,22.55z" fill="#003087"></path>
|
||||||
|
<path d="M113.45,9.46h-3.11c-0.7,0-1.28,0.59-1.28,1.3c0,0.66,0.51,1.19,1.14,1.29l3.24,0.53c0.76,0.12,1.32,0.81,1.32,1.59
|
||||||
|
c0,0.83-0.68,1.5-1.53,1.5c-0.49,0-0.94-0.22-1.23-0.58c-0.04-0.05-0.08-0.11-0.12-0.16c-0.16-0.2-0.27-0.43-0.34-0.68h-2.69
|
||||||
|
c0,0.59,0.11,1.16,0.34,1.68c0.33,0.74,0.96,1.26,1.75,1.26c0.25,0,0.5-0.05,0.72-0.14c0.14-0.06,0.27-0.12,0.4-0.2
|
||||||
|
c0.06-0.04,0.12-0.08,0.17-0.12c0.42-0.29,0.64-0.78,0.64-1.32c0-0.21-0.04-0.42-0.12-0.62c-0.05-0.12-0.11-0.24-0.18-0.35
|
||||||
|
c-0.04-0.06-0.08-0.12-0.13-0.18l-0.19-0.22c-0.06-0.07-0.12-0.13-0.19-0.2c-0.03-0.03-0.05-0.05-0.08-0.08
|
||||||
|
c-0.18-0.17-0.41-0.28-0.67-0.28h2.04c0.43,0,0.78-0.35,0.78-0.78c0-0.43-0.35-0.78-0.78-0.78h-0.98c-0.69,0-1.25-0.56-1.25-1.25
|
||||||
|
c0-0.65,0.52-1.18,1.16-1.28l3.71-0.52C113.13,8.86,113.45,9.18,113.45,9.46z" fill="#009CDE"></path>
|
||||||
|
<path d="M92.72,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
|
||||||
|
c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
|
||||||
|
c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
|
||||||
|
c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
|
||||||
|
C92.68,10.71,92.72,10.53,92.72,10.34z M90.05,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
|
||||||
|
c0-0.7,0.57-1.27,1.27-1.27C89.48,9.07,90.05,9.64,90.05,10.34z" fill="#003087"></path>
|
||||||
|
<path d="M73.94,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
|
||||||
|
c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
|
||||||
|
c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
|
||||||
|
c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
|
||||||
|
C73.9,10.71,73.94,10.53,73.94,10.34z M71.27,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
|
||||||
|
c0-0.7,0.57-1.27,1.27-1.27C70.7,9.07,71.27,9.64,71.27,10.34z" fill="#003087"></path>
|
||||||
|
<path d="M63.29,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
|
||||||
|
c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
|
||||||
|
c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
|
||||||
|
c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
|
||||||
|
C63.25,10.71,63.29,10.53,63.29,10.34z M60.62,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
|
||||||
|
c0-0.7,0.57-1.27,1.27-1.27C60.05,9.07,60.62,9.64,60.62,10.34z" fill="#003087"></path>
|
||||||
|
<path d="M42.32,9.46H36.97c0,0.59,0.11,1.16,0.34,1.68c0.33,0.74,0.96,1.26,1.75,1.26c0.81,0,1.49-0.54,1.74-1.27l-0.01,0.02
|
||||||
|
c-0.01,0.08-0.02,0.16-0.03,0.24c-0.22,0.9-1.1,1.59-2.02,1.59h-3.13c-0.92,0-1.66-0.69-1.76-1.59c-0.02,0.08-0.03,0.16-0.03,0.24
|
||||||
|
c0,0.69,0.56,1.25,1.25,1.25c0.25,0,0.5-0.05,0.72-0.14c0.14-0.06,0.27-0.12,0.4-0.2c0.06-0.04,0.12-0.08,0.17-0.12
|
||||||
|
c0.42-0.29,0.64-0.78,0.64-1.32c0-0.21-0.04-0.42-0.12-0.62c-0.05-0.12-0.11-0.24-0.18-0.35c-0.04-0.06-0.08-0.12-0.13-0.18
|
||||||
|
l-0.19-0.22c-0.06-0.07-0.12-0.13-0.19-0.2c-0.03-0.03-0.05-0.05-0.08-0.08c-0.18-0.17-0.41-0.28-0.67-0.28h2.04
|
||||||
|
c0.43,0,0.78-0.35,0.78-0.78c0-0.43-0.35-0.78-0.78-0.78H37c-0.69,0-1.25-0.56-1.25-1.25c0-0.65,0.52-1.18,1.16-1.28l3.71-0.52
|
||||||
|
c0.51-0.07,0.93-0.46,0.99-0.97c0.01-0.16,0.02-0.32,0.02-0.48c0-0.75-0.62-1.36-1.39-1.36h-3.51c-0.7,0-1.28,0.59-1.28,1.3
|
||||||
|
c0,0.66,0.51,1.19,1.14,1.29l3.24,0.53c0.76,0.12,1.32,0.81,1.32,1.59c0,0.83-0.68,1.5-1.53,1.5c-0.49,0-0.94-0.22-1.23-0.58
|
||||||
|
c-0.04-0.05-0.08-0.11-0.12-0.16c-0.16-0.2-0.27-0.43-0.34-0.68h-2.69c0,0.37,0.06,0.73,0.17,1.06c0.19,0.61,0.61,1.06,1.18,1.06
|
||||||
|
c0.45,0,0.85-0.26,1.07-0.68C41.92,10.39,42.32,10.01,42.32,9.46z M27.71,10.34c0-0.18-0.04-0.36-0.12-0.52
|
||||||
|
c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4
|
||||||
|
c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53
|
||||||
|
c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4
|
||||||
|
c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02C27.67,10.71,27.71,10.53,27.71,10.34z M25.04,10.34c0,0.7-0.57,1.27-1.27,1.27
|
||||||
|
c-0.7,0-1.27-0.57-1.27-1.27c0-0.7,0.57-1.27,1.27-1.27C24.47,9.07,25.04,9.64,25.04,10.34z" fill="#003087"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input type="radio" v-model="paymentGateway" value="PayPal" class="hidden-radio">
|
||||||
|
<span class="checkmark-circle" v-if="paymentGateway === 'PayPal'">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
|
||||||
|
<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
|
<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
|
||||||
{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
|
{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : paymentGateway === 'WeChatPay' ? $t('WeChat Pay') : $t('PayPal') }) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BuyPrepaidCreditsAlipay
|
<BuyPrepaidCreditsAlipay
|
||||||
@ -73,16 +145,27 @@
|
|||||||
@success="onSuccess"
|
@success="onSuccess"
|
||||||
@cancel="onCancel"
|
@cancel="onCancel"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<BuyPrepaidCreditsPayPal
|
||||||
|
v-if="paymentGateway === 'PayPal'"
|
||||||
|
:amount="creditsToBuy"
|
||||||
|
:minimumAmount="minimumAmount"
|
||||||
|
:isOnboarding="isOnboarding"
|
||||||
|
@success="onSuccess"
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import BuyPrepaidCreditsAlipay from '../BuyPrepaidCreditsAlipay.vue';
|
import BuyPrepaidCreditsAlipay from '../BuyPrepaidCreditsAlipay.vue';
|
||||||
import BuyPrepaidCreditsWeChatPay from '../BuyPrepaidCreditsWeChatPay.vue';
|
import BuyPrepaidCreditsWeChatPay from '../BuyPrepaidCreditsWeChatPay.vue';
|
||||||
|
import BuyPrepaidCreditsPayPal from '../BuyPrepaidCreditsPayPal.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BuyPrepaidCreditsForm',
|
name: 'BuyPrepaidCreditsForm',
|
||||||
components: {
|
components: {
|
||||||
BuyPrepaidCreditsAlipay,
|
BuyPrepaidCreditsAlipay,
|
||||||
BuyPrepaidCreditsWeChatPay
|
BuyPrepaidCreditsWeChatPay,
|
||||||
|
BuyPrepaidCreditsPayPal
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user