colman1000 | Stripe Developers | Page 1

old starBOT Dec 2, 2022, 9:19 AM

#

worthy vapor Dec 2, 2022, 9:19 AM

#

Can you share your code?

#

I'd recommend using https://vuestripe.com/ if not already (unofficial lib)

vuestripe.com

Stripe Checkout & Elements for Vue.js - Vue Stripe

Vue Stripe Stripe Checkout & Vue Stripe Elements

dusky vault Dec 2, 2022, 9:20 AM

#

The entire component?

worthy vapor Dec 2, 2022, 9:20 AM

#

Well, the Stripe relevant parts yes

#

Also are there any errors in your browser console when viewing the page you expect to see the Element on

dusky vault Dec 2, 2022, 9:26 AM

#

<template>

...
<div v-if="showCardOverlay" class="h-screen w-screen flex fixed z-50" style="background: #0f172add">
      <form id="payment-form"
            class="container mx-auto align-middle flex flex-col justify-center items-center px-4 my-auto w-2/5 h-2/4 bg-slate-100 rounded-lg">
        <div
            class="align-middle flex flex-col justify-center items-center bg-amber-100 text-amber-800 px-40 py-5 mb-10 rounded-lg">
          <div class="my-2">This Event is a paid event</div>
          <div class="">You have to pay to get access</div>
        </div>

        <div class="space-x-1">{{ event.title }}</div>
        <div class="space-x-1">{{ event.description }}</div>
        <div class="mb-10">{{ event.creator.name }}</div>
        <div id="card-element"></div>
        <div id="card-errors" role="alert" class="text-red-500 text-sm mb-10 italic"></div>
        <button v-if="isPayingForEvent" class="ring ring-blue-300 hover:ring-blue-500 rounded-md p-2 mx-auto">
          Paying ...
        </button>
        <button v-else class="ring ring-blue-300 hover:ring-blue-500 rounded-md p-2 mx-auto" @click="payForEventNow">
          Pay Now - {{ event.price }} USD
        </button>
      </form>
    </div>
...

</template>

#


<script setup lang="ts">

import {loadStripe, Stripe, StripeCardElement} from "@stripe/stripe-js";

const stripeKey = ref('pk_test_51...') // test key
const instanceOptions = ref({})
const elementsOptions = ref({
  appearance: {
    theme: 'night',
    labels: 'floating',
    variables: {
      colorPrimary: '#0570de',
    }
  }
})
let showCardOverlay: Ref<boolean> = ref(false);
let cardElement: Ref<StripeCardElement> = ref(null);
let stripe: Ref<Stripe> = ref(null);
...

async function startPaymentFlow() {
  stripe.value = await loadStripe(stripeKey.value);
  const el = stripe.value.elements();
  const style = {
    base: {
      color: "#32325d",
    }
  };

  cardElement.value = el.create("card", {style: style});
  // Set up Stripe.js and Elements to use in checkout form
  cardElement.value.mount('#card-element');
  cardElement.value.focus();
  cardElement.value.on('change', ({error}) => {
    let displayError = document.getElementById('card-errors');
    if (error) {
      displayError.textContent = error.message;
    } else {
      displayError.textContent = '';
    }
  });
}

</script>