ectoflow / vue-stripe-js Goto Github PK

[Vue Router warn]: uncaught error during route navigation:
file:///Users/nn/Work/mf-products/.vite-ssg-temp/assets/index-df334bb5.js:15
import { StripeElements, StripeElement } from "vue-stripe-js";
                         ^^^^^^^^^^^^^
SyntaxError: Named export 'StripeElement' not found. The requested module 'vue-stripe-js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue-stripe-js';
const { StripeElements, StripeElement } = pkg;

const elementsOptions = ref({
  clientSecret: 'pi_1DrNBJ2eZvKYlo2CXQCh5Pwi_secret_wx8kjhsOZnAz6axvBPGFXUww7',
})

<template>
  <stripe-elements
    v-if="stripeLoaded"
    v-slot="{ elements }"
    ref="elms"
    :stripe-key="stripeKey"
    class="stripe-elements"
  >
    <stripe-element
      ref="cardNumber"
      type="cardNumber"
      :elements="elements"
      :options="cardNumberOptions"
    />
    <stripe-element
      ref="cardExpiry"
      type="cardExpiry"
      :elements="elements"
      :options="elementOptions"
    />
    <stripe-element
      ref="cardCvc"
      type="cardCvc"
      :elements="elements"
      :options="elementOptions"
    />
  </stripe-elements>
</template>

<script setup>
const cardNumber = ref();
const cardExpiry = ref();
const cardCvc = ref();
const elms = ref();

const confirmPayment = async () => {
  try {
    // get stripe element
    const cardNumberElement = cardNumber.value.stripeElement;
    const cardExpiryElement = cardExpiry.value.stripeElement;
    const cardCvcElement = cardCvc.value.stripeElement;

    // confirming the payment.
    await elms.value.instance
      .confirmCardPayment(state.clientSecret, {
        payment_method: {
        // https://stripe.com/docs/api/payment_methods/create?lang=node#create_payment_method-card
          card: {
            number: cardNumberElement (?),
            exp_month: cardExpiryElement (?),
            exp_year: cardExpiryElement (?),
            cvc: cardCvcElement (?),
          },
        },
      })
      .then((result) => {
        console.log("result", result);
      });
  } catch (error) {
    console.error("Error creating subscription", error);
    throw error;
  };
};
</script>

<template>
    <div>
        <div class="mt-3 text-center sm:mt-5">
            <DialogTitle
                as="h3"
                class="text-lg font-medium leading-6 text-gray-900"
            >
                Secure Payment Portal
            </DialogTitle>
            <div class="mt-2">
                <p class="text-sm text-gray-500">Complete payment form to submit <span
                    class="uppercase">{{ $filters.formatMoney(charge, currency) }}</span> deposit for the {{
                        sssusername
                    }}  account</p>
            </div>
        </div>
    </div>
    <form id="payment-form">
        <div class="mt-3 text-center sm:mt-5"
        >
            <hr/>
            <StripeElements
                v-if="stripeLoaded &&  (clientSecret != null)"
                v-slot="{ elements }"
                ref="elms"
                :stripe-key="props.publishedKey"
                :instance-options="instanceOptions"
                :elements-options="elementsOptions"
            >
                <StripeElement
                    type="payment"
                    ref="card"
                    :elements="elements"
                    :options="cardOptions"
                />
            </StripeElements>
            <div v-else class="mt-2">
                <LockClosedIcon class="text-green-300 w-full p-8"/>
            </div>
            <hr/>

            <div class="mt-5 sm:mt-6"
                 v-show="stripeLoaded &&  (clientSecret != null)"
            >
                <button type="submit" @click="pay"
                        class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                    Process &nbsp; <span class="uppercase">{{ $filters.formatMoney(charge, currency) }}</span>
                </button>
            </div>
        </div>
    </form>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from 'vue'
import {StripeElement, StripeElements} from "vue-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {DialogTitle} from "@headlessui/vue";
import {LockClosedIcon} from "@heroicons/vue/24/solid";

onMounted(() => {
    axios.post(urlClientSecret, {
        sssusername: props.sssusername,   // custom subaccount metadata for paymentIntent
        currency: props.currency,
        charge: props.charge,
    }).then(response => {
        clientSecret.value = response["data"]["clientSecret"];
    }).catch(error => {
        console.log(error)
    })
})


//================================================================================================
onBeforeMount(() => {
//    alert(props.publishedKey);  // dz this is the correct value.
    const stripePromise = loadStripe(props.publishedKey)
    stripePromise.then(() => {
        stripeLoaded.value = true
    })
})


const props = defineProps({
    publishedKey: String,
    charge: Number,
    currency: String,
    baseurl: String,
    sssusername: String,
});

// const urlInitiate = props.baseurl + "payment/initiate";
// const urlSuccess = props.baseurl + "payment/success";
// const urlFailure = props.baseurl + "payment/failure";
const urlClientSecret = props.baseurl + "payment/cs";
const clientSecret = ref(null);


//===================================================================

// https://github.com/ectoflow/vue-stripe-js/blob/main/examples/CardOnly.vue

const instanceOptions = ref({
    // https://stripe.com/docs/js/initializing#init_stripe_js-options
})

const elementsOptions = ref({
    clientSecret: clientSecret,        //  This is where the payment intent get's attached.
    // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
})
const cardOptions = ref({
    // https://stripe.com/docs/stripe.js#element-options
//    value: {
//        postalCode: '12345',
//    },
})
const stripeLoaded = ref(false)
const card = ref()
const elms = ref()

const pay = () => {
    // Get stripe element
    const cardElement = card.value.stripeElement

    // Access instance methods, e.g. createToken()
    elms.value.instance.createToken(cardElement).then((result) => {
        // Handle result.error or result.token
        alert(JSON.stringify(result));
        console.log(result);
    })
}
</script>

    <script async src="https://js.stripe.com/v3/pricing-table.js"></script>

    <stripe-pricing-table pricing-table-id="prctbl_..." publishable-key="pk_test_...">
    </stripe-pricing-table>

<template>
<div>
    <StripeElements v-slot="{ elements, instance }" ref="paymentElements"
                :stripe-key="appStateStore.clientSettings!.stripePublishableKey" :instance-options="instanceOptions"
                :elements-options="elementsOptions">
                <StripeElement ref="payment" type="payment" :elements="elements" />
     </StripeElements>
     <v-btn @click="pay">Pay</v-btn>
</div>
</template>

<script setup lang="ts">
import { loadStripe } from '@stripe/stripe-js'
import { StripeElement, StripeElements, initStripe } from 'vue-stripe-js'

const s = await loadStripe(
    useAppStateStore().clientSettings!.stripePublishableKey,
    {
        betas: ['process_order_beta_1'],
        apiVersion: "2020-08-27; orders_beta=v4",
    }
);

const paymentElements = ref<any>();

const pay = async () => {
    const v = paymentElements.value!;
    console.log(v.elements);
    try {
        const res = await s!.processOrder({
            elements: v.elements,
            confirmParams: {

                // Return URL where the customer should be redirected after the Order's payment is confirmed.
                return_url: 'http://localhost:3001/order/123/status',
            },
        })
        console.log('RESULT');
        console.log(res);
    } catch (e) {
        console.log('ERROR');
        console.log(e);
    }
}
</script>

ERROR
{}

       this.$refs.elms.elements.update({
          clientSecret: this.elementsOptions.clientSecret,
        });