I am building an admin side of my site where the sales team can take orders over-the-phone, so I’m installing the wix Pay API on our Admin page. But I’m having trouble setting it up so that I can just key in the custom payment amount, is there some way to do this? Everything I see allows you to create payment amounts from collections or from static code on the Backend .jsw file. Is there some way that on the “client side” I could key in a custom amount to charge?
2 Likes
Following 
1 Like
Caden,
I just spent considerable time trying to figure out how to create a custom payment string to feed the CreatePayment method on the back end. I previously had some experience with Javascript, but not enough to immediately know that PaymentRequest is an object and that the individual payment items in it are in the form of a Javascript array. Just concatenating strings did not work. Then I fell back on my programming background in Visual FoxPro and reasoned that Javascript, like VFP, probably has methods to manipulate arrays. It does.
Start with declaring an empty object. That’s a left and right bracket that is an empty array at this point:
cPaymentString = { amount: 0,
items:
[]};
To populate a couple payment items, you use the push method for each item being bought:
cPaymentString.items.push({ name: “Payment Item 1”,price: 100});
cPaymentString.items.push({ name: “Payment Item 2”,price: 50});
After adding the items simply issue the following line to replace the 0 amount with whatever the total amount of the items is. For this example, the two items total 150.
cPaymentString.amount = 150;
In this example the final PaymentRequest object would look like this if viewed with console.log:
cPaymentString = { amount: 150,
items:
[{ name: “Payment Item 1”, price: 100},
{name: “Payment Item 2”, price: 50}]
};
Of course, to make this all work you will need to pass this backend CreatePayment method the amount or have the the method itself derive it from a collection saved prior to the client side call of CreatePayment.
Would this allow me to manually key in a different price to charge for each order? We sell a product with many variations that people can choose from, and some people choose just to put half down, so payment amounts are rarely the same. That’s why I want to just have an input box where I can key in “$2213.50” and have it charge them that amount, or “$75” and have it charge that amount. Would a variation of what you said above make that work?
It looks like your requirements are simpler than what I was facing because I needed to handle the possibility of multiple items being added whereas it sounds like you are just needing to add one item that can have varying amounts.
Using the function naming of the Wix documentation, I’ve tested this and it works.
First, make sure you have the statements at the top in your front end admin page followed by the button click code. The first parameter obviously can be altered to say something appropriate for the product you are selling, and the second parameter is capturing the value from an input box.
import {createMyPayment} from ‘backend/pay’;
import wixPay from ‘wix-pay’;
export function button2_click(event) {
createMyPayment(“Item Description”,$w(‘#input1’).value)
.then( (payment) => {
wixPay.startPayment(payment.id);
} );
}
For the backend code in the module I’m calling pay.jsw, there is no need to use the push function as I suggested above since you only have one item. This code will suffice:
export function createMyPayment(description,customamount){
let cPaymentString = { amount: customamount,
items:
[{name: description, price: customamount}] };
return wixPay.createPayment(cPaymentString);
}
3 Likes
This looks exactly like what I need as well. To be sure, you have a single input, and a Wix pay button correct? So far for me this code isnt working. IS there anything I need to do to the Wix pay button to set it up to receive the input amount? For example, not have a value set?
@caden-wilding @tony-brunsman @brett-haralson I have been trying this code for 2 days now and it doesn’t work. I am using Square as my payment portal. My client wants this by tomorrow morning EST. I even tried modifying the code to have a construct field. Here is my current code:
PAGE CODE
import wixPay from 'wix-pay';
import {createMyPayment} from 'backend/BE_PayAPI';
export function button1_click(event) {
createMyPayment($w('#input1').value,$w('#input2').value)
const invoicenumber = `${$w("#input1").value}`;
const customamount = `${$w("#input2").value}`
.then( (payment) => {
wixPay.startPayment(payment.id);
} );
}
BACKEND CODE
import wixPay from 'wix-pay-backend';
export function createMyPayment(invoicenumber,customamount){
let cPaymentString = { amount: customamount,
items:
[{name: invoicenumber, price: customamount}] };
return wixPay.createPayment(cPaymentString);
}
I am using an example site right now so details might not match branding.
My URL: https://andrew0657.wixsite.com/mysite-1
Any insight tonight would be beyond helpful!
@elizabethjhay I’ve tried the example site and do get the white payment screen to come up. That suggests that that there is nothing wrong with your adaptation of the code. Does it fail after you enter the payment details? I used PayPal as the payment portal in the example above.
@admin19940
Try this…
BACKEND CODE
//pay.jsw
import wixPay from 'wix-pay-backend';
export function createMyPayment(description,customamount){
let cPaymentString = { amount: customamount,
items:
[{name: description, price: customamount}] };
return wixPay.createPayment(cPaymentString);
}
PAGE CODE
import {createMyPayment} from 'backend/pay';
import wixPay from 'wix-pay';
export function button1_click(event) {
createMyPayment($w('#input1').value,$w('#input2').value)
.then( (payment) => {
wixPay.startPayment(payment.id);
} );
}
I think what wasn’t clear was that
export function createMyPayment(description,customamount) directly correlates to what is in the parentheses here:
createMyPayment($w(‘#input1’).value,$w(‘#input2’).value)
So Input 1 for me was the item name and input 2 is the value.
If you were to just name your item it would be:
createMyPayment(“ITEM NAME”,$w(‘#input2’).value)
Hope this helps anyone.
2 Likes
I work for a small non-profit and our Wix website was developed by me but I am by no means a web designer. We upgraded at the recommendation of Wix to a premium plan so we could take paymentss on line. Unfrotunately, Wix idea of payments online means a product with a fixed price. What I need is basically described here - I need an input dialog for a customer to enter what they want to pay and a button to push to pay it. I am not a programmer so I got lost in this discussion even though it isn’t a lot of code. Could some provide the code needed and the exact places to put it?
I work for a small nonprofit counseling service. We had a basic Wix website that I developed but I am by no means a web designer. We wanted to be able to take payments from clients so Wix recommended we upgrade to a premium business plan so we could take payments. Unfortunately their idea of payment is a fixed price for a product. All I need is an input dialog for a client to be able to enter the amount they want to pay and click the pay button to pay. I’m not a programmer and I am getting lost in this little bit of code. Could someone possibly tell me the code needed and the exact places to put it?
@duaneahoward This is an old thread. Please start a new post with a more specific question. Are you using PayPal? Sounds like you just need a simple open ended PayPal donation button, right?