subaccounts option causes the app to crash about vue-v3 HOT 10 CLOSED

Hello Olalekan,

Thanks for contacting Flutterwave!

My name is Chijioke, and I will be helping you today. To use subaccounts, you need to specify a subaccounts property in the payload and assign it to an array of objects. Here is an example payload:

{
  tx_ref: (this as any).generateReference(),
  amount: "1000",
  currency:"NGN",
  redirect_url: "https://my-site.com",// your redirect destination for successful/cancelled transaction
  subaccounts: [
    {
      id: "RS_971XXXXXXXXXXXXXXXXXXXXXXXXXX323",// the subaccount id for splitting payments
    }
  ],
  customer: {
    name: "John Doe",
    email: "[email protected]",
    phone_number: "080******44",
  },
  customizations: {
    title: "Modal Title",
    description: "Customization Description",
    logo: "https://flutterwave.com/images/logo-colored.svg",
  },
  callback: (this as any).makePaymentCallback,
  onclose: (this as any).closeModalCallback,
}

Please click here to learn more about subaccounts on Flutterwave.

I hope this resolves your issue. If you have any further concerns, please reach out to us. We'll be happy to help.

from vue-v3.

Please take a look at the code. Maybe you can spot anything out of place. I can test payments with the property as subaccount once I use subaccounts it crashes.

paymentData: {
    tx_ref: this.transaction_ref,
    amount: this.payment_info.amount,
    currency: 'NGN',
    payment_options: 'banktransfer,card,ussd,account',
    redirect_url: '',
    meta: {
        'service_name': this.payment_info.name + " fee payment",
        'service_description': this.payment_info.name + " payment description",
    },
    customer: {
        name: this.$attrs.auth.user.name,
        email: this.$attrs.auth.user.email,
        phone_number: '081845***044'
    },
    customizations: {
        title: 'Application Payment for ' + this.$attrs.auth.user.name,
        description: "",
        logo: ''
    },
    subaccounts: [
        {
            id: "RS_66D3BXXXXXXX3FDE035"
        },
        {
            id: "RS_DEC08XXXXXXX66D8B15"
        }
    ],
    callback: this.makePaymentCallback,
    onclose: this.closedPaymentModal
}

from vue-v3.

from vue-v3.

from vue-v3.

Thanks @ChijiokeOkorji This resolved the part of submitting the jobs using the subaccounts property. However, I still cannot see the split in my account.

from vue-v3.

Log into your Flutterwave Dashboard and click on Subaccounts. Next, select a Subaccount to view more details. Let me know what you see there (if the transaction you performed is among the transactions listed).

from vue-v3.

Unfortunately, I cannot see the transactions under the subaccounts.
Transactions list.

Subaccounts list

from vue-v3.

Hello Olalekan. I'm sorry that you are experiencing this problem. I noticed that you passed two id objects for the subaccount array in the payload when generating a checkout link. Neither of them match the Account ID of the subaccount you shared above. To test that it is working properly, try passing only one id (the Account ID for this particular subaccount) when generating the checkout link.

from vue-v3.

Neither of them match the Account ID of the subaccount you shared above.

Thats very strange. I copied from the portal while in test environment. Everything I am doing is in test mode. I have double checked and they are the same ids. If you are referring to the above code snippet, the ids have been redacted with XXXX in between the id displayed above.

Secondly, while this (JSON.parse(JSON.stringify(this.paymentData));) works to enable successful submission,

It creates a secondary issue where callback: this.makePaymentCallback, cannot be called after payment is done. This is the error thrown when using the code suggestion above.
flutterwave-vue-v3.esm.js:280 Uncaught (in promise) TypeError: paymentParams.callback is not a function at Object.callback (flutterwave-vue-v3.esm.js:280:27) at v3.js:1:30788

from vue-v3.

Hello @olalekan-agbaje @ChijiokeOkorji

I will be closing this now because we have resolved the issue on the Slack channel.
The issue is majorly not from the SDK but from the split config and account resolve API.

Best regards.

from vue-v3.