This content originally appeared on DEV Community and was authored by AinaLuc
Hey guys,
I keep getting this error with my vue js app and wonder what i got wrong here
ERROR
Cannot read properties of undefined (reading 'c')
TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.vue_render_ (webpack-internal:///./node_modules/@vue-stripe/vue-stripe/dist/index.js:7:9103)
at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1018:16)
at ReactiveEffect.componentUpdateFn as fn
with this code
`
Proceed to payment
<div class="fee-summary mb-6">
<p class="text-lg text-gray-700">State Fee: ${{ stateFee }}</p>
<p class="text-lg text-gray-700">Service Fee: ${{ serviceFee }}</p>
<p class="text-lg font-bold text-gray-800">Total Fee: ${{ totalFee }}</p>
</div>
<!-- Stripe Elements -->
<stripe-element-card
ref="elementRef"
:pk="publishableKey"
@token="tokenCreated"
/>
<button @click="submit" class="deploy-button" :disabled="isProcessing">
Pay ${{ totalFee }}
</button>
<!-- Success Modal -->
<div v-if="showSuccessModal" class="modal-overlay">
<div class="modal-content">
<h2 class="text-2xl font-bold mb-4">Deployment Successful!</h2>
<p>Your model has been successfully deployed.</p>
<button @click="redirectToThankYou" class="modal-button">
Continue
</button>
</div>
</div>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
components: {
StripeElementCard,
},
setup() {
const publishableKey = 'pk_live_51MnMGrE1uOh1UBiwgHnSC8b8OKZhFEuSGIHjTa88gUmJ82JADCkaadlPd0tOrjc6JfrLkGSOkV714SgnV8QkvlKF00PrqzpBgj'; // Directly use the key here
const serviceFee = 250;
const selectedState = ref(localStorage.getItem('selectedState') || '');
const stateFeesData = ref({
'California': { fee: 300 },
'Texas': { fee: 200 },
'New York': { fee: 350 },
// Add other states and their fees here
});
const showSuccessModal = ref(false);
const isProcessing = ref(false);
const selectedStateFees = computed(() => {
return stateFeesData.value[selectedState.value] || { fee: 0 };
});
const stateFee = computed(() => selectedStateFees.value.fee);
const totalFee = computed(() => stateFee.value + serviceFee);
const elementRef = ref(null);
const submit = () => {
if (elementRef.value) {
elementRef.value.submit();
} else {
console.error('Element ref is not defined');
}
};
const tokenCreated = async (token) => {
console.log(token);
isProcessing.value = true;
try {
const response = await axios.post('/api/deploy-model', {
state: selectedState.value,
stateFee: stateFee.value,
serviceFee,
totalFee: totalFee.value,
paymentMethodId: token.id, // Send token ID to backend
});
if (response.data.success) {
showSuccessModal.value = true;
} else {
console.error('Deployment failed:', response.data.message);
}
} catch (error) {
console.error('Error during deployment:', error);
} finally {
isProcessing.value = false;
}
};
const redirectToThankYou = () => {
const router = useRouter();
router.push('/thank-you');
};
return {
publishableKey,
serviceFee,
selectedState,
stateFeesData,
showSuccessModal,
isProcessing,
selectedStateFees,
stateFee,
totalFee,
elementRef,
submit,
tokenCreated,
redirectToThankYou,
};
}
};
.deploy-page {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f3f4f6;
border-radius: 12px;
}
.header {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.fee-summary p {
margin: 5px 0;
}
.deploy-button {
width: 100%;
padding: 10px 15px;
font-size: 18px;
color: #fff;
background-color: #4a90e2;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.deploy-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.modal-button {
margin-top: 15px;
padding: 10px 15px;
background-color: #4a90e2;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
}
`
This content originally appeared on DEV Community and was authored by AinaLuc
AinaLuc | Sciencx (2024-09-01T04:53:22+00:00) Vue js : Stripe integration. Retrieved from https://www.scien.cx/2024/09/01/vue-js-stripe-integration/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.