Vue js : Stripe integration

AinaLuc — Sun, 01 Sep 2024 04:53:22 +0000

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(() =&gt; {
  return stateFeesData.value[selectedState.value] || { fee: 0 };
});

const stateFee = computed(() =&gt; selectedStateFees.value.fee);
const totalFee = computed(() =&gt; stateFee.value + serviceFee);

const elementRef = ref(null);

const submit = () =&gt; {
  if (elementRef.value) {
    elementRef.value.submit();
  } else {
    console.error('Element ref is not defined');
  }
};

const tokenCreated = async (token) =&gt; {
  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 = () =&gt; {
  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;
}

DEV Community: AinaLuc

Vue js : Stripe integration

Proceed to payment