Hello, i am using pay API to collect payment from my customers, when my customers trying to check out on the mobile site , the check out box is stuck and the user can not scroll up and down, the situation is that my clients can not finish their purchase on the mobile site .
is there any option to control it? i read some articles that describe how to manually control the lay out, the only problem is that i can not find the place to change the checkout box code .
thank you.
the picture here is one shot - each time its open in different way, sometimes i can not enter details, sometimes i can not press on submit, because its cut of from the ox and i can not scroll it up and down .
this is my client side code:
- i used a lot of manipulation to:
- disabled the default email,
- to disable the default thank you page
- to monitor the payment status and send an email only after real payment
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
}); // For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixPay from 'wix-pay';
import wixData from 'wix-data';
import { createPaymentForProduct } from 'backend/BE_PayAPI'
import wixWindow from 'wix-window';
$w.onReady(function () {
//TODO: write your page related code here...
});
//export function payclick(event) {
// const firstName = "omri";
// const lastName = "dover";
// const phone = "12345";
// const email = "omridover@gmail.com";
// const countryCode = "ISR";
// createPaymentForProduct( { firstName, lastName, phone, email, countryCode } )
// .then( (payment) => {
// wixPay.startPayment(payment.id, {"termsAndConditionsLink": "https://www.wix.com/", "skipUserInfoPage": true});
//} );
//}
// createPaymentForProduct({firstName, lastName, phone, email, countryCode}).then(payment => {
// wixPay.startPayment(payment.id, {"skipUserInfoPage": true});
// })
//}
export function addUser(event) {
//Add your code for this event here:
}
export function submitUserForm(event) {
var fields = ['firstname', 'lastname', 'babydate', 'dropdown1', 'phone', 'email', ];
var userToAdd = {};
for (var i = 0; i < fields.length; i += 1) {
if ($w("#" + fields[i]).valid) {
userToAdd[fields[i]] = $w("#" + fields[i]).value
} else {
console.log($w("#" + fields[i]).placeholder + " not valid");
$w("#" + fields[i]).focus();
return;
}
}
//userToAdd.subscribetosite = $w("#subscribetosite").checked
//if (!userToAdd.subscribetosite) {
// console.log("subscribe to site not selected")
// $w("#subscribetosite").focus();
// return;
//}
wixData.insert("subscribers062", userToAdd)
.then((user) => {
console.log("user added");
console.log(user);
createPaymentForProduct({ firstName: user.firstname, lastName: user.lastname, phone: user.phone, email: "null", countryCode: "ISR" })
.then((payment) => {
wixPay.startPayment(payment.id, { "termsAndConditionsLink": "https://www.gotogethermoms.com/blank", "skipUserInfoPage": true, "showThankYouPage": false })
.then((result) => {
if (result.status === "Successful") {
wixWindow.lightbox.close();
wixWindow.openLightbox("paid");
} else if (result.status === "Pending") {
wixWindow.lightbox.close();
wixWindow.openLightbox("Pending Box");
} else if (result.status === "Failed") {
wixWindow.lightbox.close();
wixWindow.openLightbox("Payment Failed");
// handle payment failure
} else if (result.status === "Cancelled") {
wixWindow.lightbox.close();
wixWindow.openLightbox("Payment Cancelled");
// handle user closing payment panel
}
});
});
})
.catch((err) => {
console.log(err);
});
}
//export function input1_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#firstname").focus();
//}
//export function input2_keyPress(event, $w) {
//if (event.key === "Tab")
//$w("#lastname").focus();
//}
//export function input3_keyPress(event, $w) {
//if (event.key === "Tab")
//$w("#babydate").focus();
//}
//export function input4_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#phone").focus();
//}
//export function input5_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#email").focus();
//}
//export function input6_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#dropdown1").focus();
//}
//export function input7_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#dropdown2").focus();
//}
//export function input8_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#subscribetosite").focus();
//}
//export function input1_keyPress(event, $w) {
//if (event.key === "Tab")
// $w("#firstname").focus();
//}