Implement multiple elements

[abdipramana]

Hi there, I have a question about how to implement multiple elements.

I have a form with three Stripe elements: cardNumber, cardExpiry, and cardCvc. When the user submits the form, I need to retrieve the values entered by the user in these Stripe elements to fill the payment_method card object before sending it to Stripe for payment confirmation.

I've tried using the stripeElement property of each element reference to retrieve the values, but I'm not sure how to properly format the card object to send it with the confirmCardPayment method.

Here's my example code:

<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>

Can someone help me with how to properly implement multiple elements and fill the card object? Thanks.

[mprzydatek]

hi - did you managed to sort this out?

[Careen-dev]

Surprisingly，I tried this way it worked.

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: cardNumberElement
      },
    },
  })
  .then((result) => {
    console.log("result", result);
  });

} catch (error) { console.error("Error creating subscription", error); throw error; };