I keep getting an invalid email error on the modal every time I bind the customer name

Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Customer details not binding to input fields about vue-v3 HOT 4 CLOSED

flutterwave commented on July 19, 2024

Customer details not binding to input fields

from vue-v3.

Comments (4)

toybz commented on July 19, 2024

Hello @vinosamari

This issue will most likely be because the updated value is not passed to the SDK.

Please can you share your payment component?

NB: Please use dummy values for any sensitive data like mobile number, email, API Keys, etc.

from vue-v3.

vinosamari commented on July 19, 2024

@toybz Thank you for reaching out.
This is the Cart with the bound input fields.
I want to pass the email into the field to the SDK for payments as opposed to hard-coding it.

from vue-v3.

toybz commented on July 19, 2024

Hello @vinosamari

Thank you for sharing.

Please move the paymentData out of the Data prop, and set it as a computed property instead.
Please see the updated code below:

 data() {
  return {
    customerName: "",
    customerEmail: "",
    customerPhone: "",
    checkedOut: false,
    cartCount: this.$store.state.cartCount,
    orderTotal: this.$store.state.orderTotal,
    orders: this.$store.state.cart,
   
}
},

computed: {

paymentData(){
return {
      tx_ref: this.generateReference(),
      amount: this.orderTotal,
      currency: "GHS",
      payment_options: "card,ussd,mobilemoney",
      redirect_url: "https://lumenbarandgrill.com/success",
      customer: {
        name: this.customerName,
        email: this.customerEmail,
        phone_number: this.customerPhone,
      },
      customizations: {
        title: "Lumen Bar & Grill",
        description: "Online order payment",
        logo: "https://flutterwave.com/images/logo-colored.svg",
      },
      callback: this.makePaymentCallback,
      onclose: this.closedPaymentModal,
    }
}
  }