JS 401 loop error while generating a payment token

Question

I'm trying to create a payment token for the payment gateway (Paymob Accept). When I check my browser console I get a loop POST error 401. I've attached two screenshots.

My code is:

const API = 'APK_KEY'
async function firstStep() {
    let data = {
        "api_key": API
    }
    let request = fetch('https://accept.paymob.com/api/auth/tokens', {
        method: 'post',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = (await request).json()
    let token = (await response).token

    secondStep(token)

}

async function secondStep(token) {
    let data = {
    "auth_token":  token,
    "delivery_needed": "false",
    "amount_cents": "100",
    "currency": "EGP",
    "items": [],
    }
    let request = await fetch('https://accept.paymob.com/api/ecommerce/orders', {
        method : 'POST',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = request.json()
    let id = (await response).id
  
    secondStep()
}

async function thirdStep(token, id) {
    let data = {
        "auth_token": token,
        "amount_cents": "100", 
        "expiration": 3600, 
        "order_id": id,
        "billing_data": {
          "apartment": "803", 
          "email": "claudette09@exa.com", 
          "floor": "42", 
          "first_name": "Clifford", 
          "street": "Ethan Land", 
          "building": "8028", 
          "phone_number": "+86(8)9135210487", 
          "shipping_method": "PKG", 
          "postal_code": "01898", 
          "city": "Jaskolskiburgh", 
          "country": "CR", 
          "last_name": "Nicolas", 
          "state": "Utah"
        }, 
        "currency": "EGP", 
        "integration_id": 13034
      }
    let request = fetch('https://accept.paymob.com/api/acceptance/payment_keys', {
        method: 'post',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = (await request).json()
    let finalToken = (await response).token

    cardPayment(finalToken)
}

async function cardPayment() {
    let iframeURL = `https://accept.paymob.com/api/acceptance/iframes/18922?payment_token=${finalToken}`
    console.log(iframeURL)
}
firstStep()

I tried each step in the console, stepOne and stepTwo work fine. After I added stepThree I get the error.

What am I missing? Thanks in advance for your support!

Answer 1

Like said in the comment section, the secondStep is calling itself recursively, also without any arguments. This will cause an infinite loop. We fix it by calling thirdStep .

Also in the cardPayment function, you are using finalToken , which is not defined in the function. We fix it that by making it the argument.

const API = 'APK_KEY'
async function firstStep() {
    let data = {
        "api_key": API
    }
    let request = fetch('https://accept.paymob.com/api/auth/tokens', {
        method: 'post',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = (await request).json()
    let token = (await response).token

    secondStep(token)
}

async function secondStep(token) {
    let data = {
    "auth_token":  token,
    "delivery_needed": "false",
    "amount_cents": "100",
    "currency": "EGP",
    "items": [],
    }
    let request = await fetch('https://accept.paymob.com/api/ecommerce/orders', {
        method : 'POST',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = request.json()
    let id = (await response).id
  
    thirdStep(token, id)
}

async function thirdStep(token, id) {
    let data = {
        "auth_token": token,
        "amount_cents": "100", 
        "expiration": 3600, 
        "order_id": id,
        "billing_data": {
          "apartment": "803", 
          "email": "claudette09@exa.com", 
          "floor": "42", 
          "first_name": "Clifford", 
          "street": "Ethan Land", 
          "building": "8028", 
          "phone_number": "+86(8)9135210487", 
          "shipping_method": "PKG", 
          "postal_code": "01898", 
          "city": "Jaskolskiburgh", 
          "country": "CR", 
          "last_name": "Nicolas", 
          "state": "Utah"
        }, 
        "currency": "EGP", 
        "integration_id": 13034
      }
    let request = fetch('https://accept.paymob.com/api/acceptance/payment_keys', {
        method: 'post',
        headers: {'content-type' : 'application/json'},
        body: JSON.stringify(data)
    })

    let response = (await request).json()
    let finalToken = (await response).token

    cardPayment(finalToken)
}

async function cardPayment(finalToken) {
    let iframeURL = `https://accept.paymob.com/api/acceptance/iframes/18922?payment_token=${finalToken}`
    console.log(iframeURL)
}
firstStep()