Can't post data to an API (Curl, Fetch, wix stores)

Hello everyone,

i’m trying to achieve some API post to a payment facility method (because wix currently doesn’t support split payment, i’m trying to use another method). There is this company : https://www.ips-payment.com/ , doing this split payment (3 times).

My goal, catch informations of the clients on their cart page, and redirect them on the api with this informations.

They gave me this to input :

curl --location --request POST 'https://wws.ips-payment.com/' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'MerchantKey=YourAPIKey' \
--data-urlencode 'amount=100' \
--data-urlencode 'RefOrder=0000011111333666' \
--data-urlencode 'Customer_Email=yourclient@yourclient.com' \
--data-urlencode 'Lease=3'

I used a convertor cURL to Fetch (kigiri.github.io) , provided by the great @Yisrael (Wix)

fetch("https://wws.ips-payment.com/?MerchantKey=YourAPIKey&amount=100&RefOrder=0000011111333666&Customer_Email=yourclient@yourclient.com&Lease=3", {   headers: {     "Content-Type": "application/x-www-form-urlencoded"   },   method: "POST" })

So i told me, let’s go fetch this out, but i writted my code here :
Backend (tried both .JSW and .JS)

import { created, serverError } from 'wix-http-functions';
import wixStores from 'wix-stores';
import wixData from 'wix-data';

let MerchantKey = "3618601a7d1fda92bAPI601a7d1fda92c"
let amount = "";
let email = "";
let RefOrder = "";
let Lease = 3
let url = 'https://wws.ips-payment.com/';

export async function postCartInfos(request) {
 
 await wixStores.getCurrentCart().then((Cartdata) => {

        amount = Cartdata.totals.total;
        RefOrder = Cartdata._id;
        Lease = 3;
    })

 let fullUrl = url + '/' + "MerchantKey=" + MerchantKey + '/' + "amount=" + amount + '/' + "Customer_Email=" + email + '/' + "RefOrder=" + RefOrder + '/' + "Lease=3" + '/'
 return fetch(fullUrl, {

            headers: {
 "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            body : {
                MerchantKey : MerchantKey,
                amount : amount,
                Customer_Email : email,
                RefOrder :  RefOrder,
                Lease : Lease,
            }
        })
        .then((httpResponse) => {
 if (httpResponse.ok) {
 return httpResponse.json();
            } else {
 return Promise.reject("Fetch did not succeed");
            }
        })
}

Front end :

import { fetch } from 'wix-fetch';
import wixStores from 'wix-stores';
import wixData from 'wix-data';
import wixUsers from 'wix-users'
import wixLocation from 'wix-location'
import { postCartInfos } from 'backend/CURL'

let MerchantKey = "3618601a7d1fda92bAPI601a7d1fda92c"
let amount = "";
let email = "";
let RefOrder = "";
let Lease = 3
let url = 'https://wws.ips-payment.com/';

$w.onReady(function () {
    getCartInfo();
    console.log(amount)
 if (amount >= 400) {
        $w("#input1").enable()
        $w("#button3").enable()
    }
});

export async function getCartInfo() {

 await wixStores.getCurrentCart().then((Cartdata) => {

        amount = Cartdata.totals.total;
        RefOrder = Cartdata._id;
        Lease = 3;

        console.log(Cartdata.totals.total)
        console.log(Cartdata._id)
        console.log(Cartdata)

    })
 if (amount >= 400) {

        $w("#input1").enable()
        $w("#button3").enable()
    }

}

export function button3_click(event) {

    postCartInfos()
        .then(httpResponse => {
            console.log("httpResponse: " + httpResponse);
        })
    console.log(amount)
    console.log(RefOrder)
}

export function button3_dblClick(event) {
 let fullUrl = url + "MerchantKey=" + MerchantKey + '/' + "amount=" + amount + '/' + "Customer_Email=" + email + '/' + "RefOrder=" + RefOrder + '/' + "Lease=3" + '/'
 
    fetch(fullUrl, {
            headers: {
 "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST"
    })
      wixLocation.to(url)
}

export function input1_change(event) {
    email = $w("#input1").value

    console.log(email)
}

I know i’m using a lot of stuff, the code seams to work, but nothing goes to the post !

Thanks in advance (i’ve red a lot of posts about fetch, saw videos, and i’m getting tired not to fine ! )

Some points:
1 - Create a JSW file and put your functions there. Fetching from Browser has some CORS rules.
The browser does a pre-flight sending an OPTIONS request to the server asking about rules. With the result the browser sends the fetch (POST).
2 - Use the Dev Tools Option (Chrome F12=> Network) for checking the Headers/Body on sending/receiving. Use the curl and the site and compare.
3 - Starting with a GET just for testing the server replies.
4 - Test the API fetch without any promise dependency.
5 - Always console.log info to watch each step.

Hello MVVeiga, thanks for that !

  1. I did that in .JSW, nothing happend
  2. When i check the network, nothing is sent ! so nothing to check ! How can i use the direct curl then ?
  3. I’m on it
  4. I’m on it
  5. i did put a lot of console logs, it seams to stop at this step :
/**in backend*/ 
   .then((httpResponse) => {
 if (httpResponse.ok) {
 return httpResponse.json();
            } else {
 return Promise.reject("Fetch did not succeed");
            }
/**in frontend*/ 
 postCartInfos()
        .then(httpResponse => {
            console.log("httpResponse: " + httpResponse);
        })

It triggers an SDK error

Pls check the fetch url:
The example is:
https://wws.ips-payment.com/?MerchantKey=YourAPIKey&amount=100&RefOrder=0000011111333666&Customer_Email=yourclient@yourclient.com&Lease=3

But the backend function is using “/” instead “&”
let fullUrl = url + “MerchantKey=” + MerchantKey + ‘/’ + “amount=” + amount + ‘/’ + “Customer_Email=” + email + ‘/’ + “RefOrder=” + RefOrder + ‘/’ + “Lease=3” + ‘/’

I guess should be:
let fullUrl = url + “?MerchantKey=” + MerchantKey + “&amount=” + amount + “&Customer_Email=” + email + “&RefOrder=” + RefOrder + “&Lease=3”

Please check the API doc for RestAPI endpoints.

Well, my bad on that, that’s a point ahah I made the change, still not working so i’m looking for the others points, on my onclick button i have this error :

Uncaught (in promise) Error: Unable to handle the request.

My on click was that :


 postCartInfos()
        .then(httpResponse => {
            console.log("httpResponse: " + httpResponse);
        })

So im wondering there is something wrong in the backend right ?

I put a catch function in the front end to be sure

It show me the err console.log


You need to consume the promise:
. then (( httpResponse ) => {
if ( httpResponse.ok ) {
return httpResponse . json ();
} else {
return Promise . reject ( “Fetch did not succeed” );
}
})

Try this:

. then (( httpResponse ) => {
if ( httpResponse.ok ) {
return httpResponse . json (); // .json() is a promise
}
return “Response not ok”
})
.then(json => { // Here we consume the .json() promise.
console.log(json)
return json
})
.catch(err => { return “Fetch did not succeed” })

If the fetch got error, or httpResponse.json() got error, the catch will be fired.

Actually, it doen’t show me “fetch did not succeed” on the log, it just display me “Error: Unable to handle the request. Contact the site administrator or view site monitoring logs for more information.”

Paste this url in the browser tab and see the msg. It is for testing server reply.
https://wws.ips-payment.com/?MerchantKey=YourAPIKey&amount=100&RefOrder=0000011111333666&Customer_Email=yourclient@yourclient.com&Lease=3

Next test this url with your values.

In other hand, replace the .cacth to return the fetch error:
.catch(err => { return err})

Well i got no error log on click now, but if i had a wix location to (this url) they display me the same error on the page

Still nothing in the network log

Ok i did a redirect with the fetch threw an URL, and it worked !

Did you test the URL on the browser with your [values? (APIkey)](values?
Loading...)
[Loading...](values?
Loading...)

Paste that link in you browser.

The reply is a HTML document and not a json. Now you need to check the API from ips-payment.

I guess the [wws.ips-payment.com](values?
Loading...) is not a RestAPI POST endpoint.

Yeah i noticed that in final, i just created a link to redirect the the client finally ! Thanks a lot for your time anyway !