Pay API is not responsive - HELP ME

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:
  1. disabled the default email,
  2. to disable the default thank you page
  3. 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();
//}

On both the desktop and the mobile versions, you should simply b e able to move the Wix Checkout page up and down to move it as on the desktop version it should show the vertical scroll bar on the right hand side of the checkout window.

I don’t think it shows this on the mobile version of the checkout, however you should still be able to use your fingers to scroll either up or down the checkout screen to be able to enter any details.

You need to male sure that you put your finger to scroll within the checkout area itself (where all the user inputs are) and not on the empty white space around the outside.

If you simply use the white border space around the checkout, then you are simply moving the existing page which is underneath the checkout either up or down.

You need to actually place your finger in the checkout input area and then you should be able to scroll the checkout up or down to enter any details you need.

You can see what I am talking about by viewing this Wix tutorial pages and looking at the example on both which shows the vertical scroll bars on the desktop version and if you click on the white border space around the checkout page you will see that you are actually moving the page behind the checkout window,

https://www.wix.com/corvid/example/pay-api-example-using-collections
https://www.wix.com/corvid/example/pay-api-example

You can vote for your forum post request here.
https://support.wix.com/en/article/request-customizing-the-checkout-page-in-the-wix-stores
https://support.wix.com/en/article/customizing-your-wix-stores-checkout-page

sorry but it doesn’t work,