增加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="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
|
||||
class="payment-option"
|
||||
:class="{'payment-option-active': paymentGateway === 'Alipay'}"
|
||||
@ -49,11 +49,83 @@
|
||||
</svg>
|
||||
</span>
|
||||
</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 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>
|
||||
|
||||
<BuyPrepaidCreditsAlipay
|
||||
@ -73,16 +145,27 @@
|
||||
@success="onSuccess"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
|
||||
<BuyPrepaidCreditsPayPal
|
||||
v-if="paymentGateway === 'PayPal'"
|
||||
:amount="creditsToBuy"
|
||||
:minimumAmount="minimumAmount"
|
||||
:isOnboarding="isOnboarding"
|
||||
@success="onSuccess"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import BuyPrepaidCreditsAlipay from '../BuyPrepaidCreditsAlipay.vue';
|
||||
import BuyPrepaidCreditsWeChatPay from '../BuyPrepaidCreditsWeChatPay.vue';
|
||||
import BuyPrepaidCreditsPayPal from '../BuyPrepaidCreditsPayPal.vue';
|
||||
|
||||
export default {
|
||||
name: 'BuyPrepaidCreditsForm',
|
||||
components: {
|
||||
BuyPrepaidCreditsAlipay,
|
||||
BuyPrepaidCreditsWeChatPay
|
||||
BuyPrepaidCreditsWeChatPay,
|
||||
BuyPrepaidCreditsPayPal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user