vuefilemanager/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue

<template>
	<div v-if="canShowForSubscription" class="card shadow-card">
		<FormLabel>
			{{ $t('Update Payments') }}
		</FormLabel>

		<AppInputButton :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
			<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="sm:w-auto w-full" button-style="theme">
				{{ $t('Update Payments') }}
			</ButtonBase>
		</AppInputButton>
	</div>
</template>

<script>
	import AppInputSwitch from "../Admin/AppInputSwitch"
	import ButtonBase from "../FilesView/ButtonBase";
	import FormLabel from "../Others/Forms/FormLabel"
	import axios from "axios";
	import {events} from "../../bus";
	import AppInputButton from "../Admin/AppInputButton";

	export default {
		name: 'UserUpdatePaymentMethodsExternally',
		components: {
			AppInputButton,
			AppInputSwitch,
			ButtonBase,
			FormLabel
		},
		computed: {
			canShowForSubscription() {
				return this.hasSubscription
					&& ! this.subscription.attributes.is_cancelled
					&& ['paystack', 'paypal'].includes(this.subscription.attributes.driver)
			},
			subscription() {
				return this.$store.getters.user.data.relationships.subscription.data
			},
			hasSubscription() {
				return this.$store.getters.user.data.relationships.subscription
			},
		},
		data() {
			return {
				isGeneratedUpdateLink: false,
			}
		},
		methods: {
			updatePaymentMethod() {

				this.isGeneratedUpdateLink = true

				axios.post(`/api/subscriptions/edit/${this.subscription.id}`)
					.then(response => {
						window.location = response.data.url
					})
					.catch(() => {
						events.$emit('toaster', {
							type: 'danger',
							message: this.$t('popup_error.title'),
						})

						this.isGeneratedUpdateLink = false
					})
			},
		}
	}
</script>