Creating a dropdown list with price for payment

Ask the community
,
1


Hi, I’m trying to create a dropdown list with different options in order for client’s to purchase desired options. I’m not sure if it is possible to code it at Pay API and how to code it . The feature will looks as shown above. Client purchase desire video length ( EX: Option 1 - $ xx , option 2 - $ xx, and so on ). Then they click on the button to purchase . If there’s any solution, please let me know. Thank you in advance.

2

Hey Max,

You could follow the tutorial for creating a search/filter function for your database collection and change it up to suit your needs and display a video with a certain length and price depending on the dropdown selection.

Corvid Tutorial: Adding Collection Data Search Functionality

You could then use the wix-pay API on a button click for the videos.

Hope this helps!

Dara | Corvid Team

3

Were u able to do this ?

4

If you are manually dealing with processing the payment you have a couple of steps you have to work through.

  1. Is the customer buying one video, or can they purchase multiple ones.
    • if they are buying multiple ones you are going to have to save each selection in an array, (think like a shopping cart). This could be a simple text box (formatted nicely of course), or a table/list object. You want to somehow display this, so the customer sees what they are about to buy.
  2. Can the user change their mind and edit the items if there are multiple selections for videos made.
  • you’ll have to allow the user to delete items from the list
  1. Wix-Pay api, can take an array (called items), where you put in each of the videos they selected. You may also have to manually add a VAT/GST line to compute any sales taxes. (Wix does not handle taxes at all).
  2. If you collect their name, email, phone etc you can pass that info into your Wix-Pay api as well.

It is very important to note: ALWAYS COMPLETE THIS IN THE BACKEND. You don’t want hackers to modify the billing details.

Here is a snippet of code that I did, to have someone pay for a course and process the payment in the backend. To get the course amount, I fetched the amount using a Wix-query. I did not want to use the amount passed in from the front end. I didn’t want anybody manipulating the price on the front end, and then I would end up charging the wrong amount for the item. You will find you have to process the costing and computing totals in the backend.

Here is a snippet of code (the user is buying a single online course). In my example, I’m having to deal with multiple sales tax entities. You may not have to worry about that. This code is not complete (just showing sample setup).

// **** this code would be in some backend .jsw module ****

        // only include HST tax 
        paytotal  =  paytotal  +  hstAmount ; 
        paymentInfo  = { 
            amount :  paytotal ,  
            items : [{ name :  course Name ,  price :  courseAmount  }, 
                    { name :  "your tax name"  +  "  (<company name> Tax #: "  +  TaxNum  + ")" ,  price :  hstAmount  }], 
            userInfo : { firstName :  fname ,  lastName :  lname ,  phone :  phon ,  email :  mail ,  countryCode :  'CAN' }

return wixPay . createPayment ( paymentInfo );

paytotal = total cost of all video courses selected, plus any taxes

You would need to put all your selected videos into the items array.
- each [ ], contains one line item for the invoice (what your billing for)
- each [ ] would contain your video description, and the cost
I had to add one additional item (sales tax), since WixPay has no mechanism to deal with sales taxes. I have to deal with showing the tax name, the company charging the tax, and the tax id number. I have 13 tax regions to deal with.

The userInfo is optional. I had already collected it from the user, so I had it in the variables already, so passed it into the Wix-Pay API. This helps to auto-populate the popup screen asking the user to enter in their details, before entering in their credit card #. If you don’t use it, the user will be prompted to enter in the details.

You would still need to initiate the payment process from the front end, but process the details in the backend. Putting all your videos into a collection with prices, would allow you to create code in the backend to query the collection. You would just need to supply the backend code with the selection(s) the user made (the names, or ids of the videos selected). The backend would use these to query the cost of each item from the collection and build the details needed for the Wix-Pay API.

After all that, you will want to capture the result of the payment (status), and let the user know if the payment was successful or not. How are you going to keep track of the orders/payments if you are doing this manually. You will probably need to save the results and some details into a collection(table).

@darak included a link to the Wix-Pay API. There are lots of examples there, showing the various steps.