Wix Payment rejects empty fields

Ask the community
, ,
1

Question:
I have 2 input fields one is required the other is an optional entry. The site visitor must enter a value ( HOA dues) in the first field and optionally enter a value in the second field. I wrote a Velo code that adds the 2 values and the payment is initiated when both field are filled. However, when the second field is left blank (no amount entered). I get the following error:
" WixPayBackend.createPayment: can’t create payment, details:
Could not decode [“”] at [.items[1].price] as [BigDecimal]."
I have tried different things and did a lot of Googling but was unable to find a solution. Appreciate any insight into this issue.

Product:*
Wix Editor, Velo

What are you trying to achieve:
Ability to add the entered value of two fields even though the second field may be left blank (no value entered) or with a value entered.
(example 1: field1= $200, Field2= $100, Amount: $300)
(example 2: field1= $200, Field2= blank (no entry) , Amount: $200)
Example 2 throws out an error,

What have you already tried:
I have tried different things and did a lot of Googling but was unable to find a solution.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

Hey there!

Show us your code. We will not be able to help you without that. (:

3

I think this could work for you…

function calculateAmount() {
      var field1Value = $w('#field1').value;
      var field2Value = $w('#field2').value;
      var amount1 = parseFloat(field1Value) || 0;
      var amount2 = parseFloat(field2Value) || 0;
      var totalAmount = amount1 + amount2; console.log('Total-Amount: ', totalAmount);
    }

Define the 2x fields on your own…

$w('#field1').value;
$w('#field2').value;
4

Thank you for the quick reply. I added russian-dima’s suggestion (parseFloat) but it still doe not work.
The two fields settings are “Text”, no verification and show initial text “none”.
here is my code:

// WIX Pay Dues (Client side) - Front end//
// Velo API Reference: Introduction - Velo API Reference - Wix.com //
import { createMyPayment } from ‘backend/dues-pay-backend’;
import wixPay from ‘wix-pay’;

$w.onReady(function () {
let payDuesAmount;
let lakeFundAmount;
let totalDue;
let totalAmount;

$w("#payDuesInput").onChange(() => {
    payDuesAmount = $w("#payDuesInput").value;
    console.log(payDuesAmount);
})

$w("#lakeFundInput").onChange(() => {
    lakeFundAmount = $w("#lakeFundInput").value;
    console.log(lakeFundAmount);
})

// Home owner does not enter a lake donation. Pays dues only//
if (lakeFundAmount === null || lakeFundAmount == 0) {

    totalAmount = parseFloat(payDuesAmount) || 0;
    console.log(totalAmount);
// Home owner only enters lake donation. No dues//
} else if (payDuesAmount === null || payDuesAmount == 0) {

    totalAmount = parseFloat(lakeFundAmount) || 0;
    console.log(totalAmount);
// Home owner enters both a lake donation and pays dues//
} else {
    totalDue = payDuesAmount + lakeFundAmount;
    totalAmount = parseFloat(totalDue) || 0;
    console.log(totalAmount);
}

$w("#payNowButton").onClick(async () => {
    const payment = await createMyPayment(totalAmount);
    const result = await wixPay.startPayment(payment.id);
    console.log(result);
})

});

//dues-pay-backend//

import wixPayBackend from ‘wix-pay-backend’;

export function createMyPayment(totalAmount) {
let items;
let amount;

items = [{ name: "Pay Dues", price: totalAmount, quantity: 1 }]

amount = totalAmount;

return wixPayBackend.createPayment({
    items,
    amount,

});

}

5

Little TEST-SETUP → to show you that it normaly works…

When both of fields have a value…

2024-01-03 17_37_29-JSFiddle - Code Playground
2024-01-03 17_37_29-JSFiddle - Code Playground601×902 7.6 KB

When just one of fields has a value…

2024-01-03 17_38_57-JSFiddle - Code Playground
2024-01-03 17_38_57-JSFiddle - Code Playground565×905 7.84 KB

And in this example both of inputs uses a STRING-INPUT.

6

Try changing your frontend code to this:

import { createMyPayment } from ‘backend/dues-pay-backend’;
import wixPay from ‘wix-pay’;

$w.onReady(function () {

var payDuesAmount = 0;
var lakeFundAmount = 0;
var totalAmount = 0;

$w("#payDuesInput").onChange(() => {
  if ($w("#payDuesInput").value) {
    if($w("#payDuesInput").value > 0)
    payDuesAmount = parseInt($w("#payDuesInput").value);
    }
  }
})

$w("#lakeFundInput").onChange(() => {
  if ($w("#lakeFundInput").value) {
    if($w("#lakeFundInput").value > 0)
    lakeFundAmount = parseInt($w("#lakeFundInput").value);
    }
  }
})

$w("#payNowButton").onClick(async () => {
    totalAmount = payDuesAmount + lakeFundAmount;
    totalAmount = totalAmount.toFixed(2);

    const payment = await createMyPayment(totalAmount);
    const result = await wixPay.startPayment(payment.id);
    console.log(result);
})
});
7

Thank you Pratham. I went ahead and coded similarly as you suggested. However, the problem is that the createMyPayment module at the backend rejects any item that has a value of zero. I can do the addition in the frontend but then this becomes a single item (totalAmount) and therefore when the payment is submitted the pay dues and lake fund amount are not shown as separate items in the checkout confirmation email:
SUMMARY (using totalAmount)
Item Name Quantity Total

Pay Dues Price: $2.00 1 $2.00

What I need is:
SUMMARY
Item Name Quantity Total
Pay Dues: Price: $1.00 1 $1.00
Lake Fund: Price: $1.00 1 $1.00

Is there a way to pass variables from the frontend to the backend. (payDuesAmount and lakeFundAmount)?

Thanks

8

In the backend try changing the code to:

import wixPayBackend from ‘wix-pay-backend’;

export function createMyPayment(totalAmount, itemList) {
  
  let items = itemList;
  let amount = totalAmount;
  
  return wixPayBackend.createPayment({
      items,
      amount,
  
  });
}

And in the frontend, change the Pay Button code to:

$w("#payNowButton").onClick(async () => {
    totalAmount = payDuesAmount + lakeFundAmount;
    totalAmount = totalAmount.toFixed(2);

    var itemSummary = [];

    if (lakeFundAmount > 0) {

        let payDues = {
        name: "Pay Dues",
        price: payDuesAmount
        }

        let lakeFund = {
        name: "Lake Fund",
        price: lakeFundAmount
        }
        
        itemSummary.push(payDues);
        itemSummary.push(lakeFund);

    } else {

        let payDues = {
        name: "Pay Dues",
        price: payDuesAmount
        }

        itemSummary.push(payDues);

    }

    const payment = await createMyPayment(totalAmount, itemSummary);
    const result = await wixPay.startPayment(payment.id);
    console.log(result);
})
9

Thank you so much Pratham. That did it. I added another condition as the home owner can also choose to only submit a lake donation.
I appreciate your assistance.

1 Like