Payments card api

Hello, This is Raja, I have a task to integrate square API for payments on clients webpage. I am getting following issue when I have pasted the link provided in square dashboard into program(PHP). And I have tried payments API - card api to for this also I am getting the error.

For payments card API →

Please suggest the solution. I am using PHP.
the code

const appId = 'sandbox-sq0idb-fz4yAD7YHzNN-IW45FjXuA'; const locationId = 'L543SN6JVH1X9';
  async function initializeCard(payments) {
    const card = await payments.card();
    await card.attach('#card-container');

    return card;

  async function createPayment(token) {
    const body = JSON.stringify({
      sourceId: token,

    const paymentResponse = await fetch('/payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',

    if (paymentResponse.ok) {
      return paymentResponse.json();

    const errorBody = await paymentResponse.text();
    throw new Error(errorBody);

  async function tokenize(paymentMethod) {
    const tokenResult = await paymentMethod.tokenize();
    if (tokenResult.status === 'OK') {
      return tokenResult.token;
    } else {
      let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
      if (tokenResult.errors) {
        errorMessage += ` and errors: ${JSON.stringify(

      throw new Error(errorMessage);

  // status is either SUCCESS or FAILURE;
  function displayPaymentResults(status) {
    const statusContainer = document.getElementById(
    if (status === 'SUCCESS') {
    } else {
    } = 'visible';

  document.addEventListener('DOMContentLoaded', async function () {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');

    let payments;
    try {
      payments = window.Square.payments(appId, locationId);
    } catch {
      const statusContainer = document.getElementById(
      statusContainer.className = 'missing-credentials'; = 'visible';

    let card;
    try {
      card = await initializeCard(payments);
    } catch (e) {
      console.error('Initializing Card failed', e);

    // Checkpoint 2.
    async function handlePaymentMethodSubmission(event, paymentMethod) {

      try {
        // disable the submit button as we await tokenization and make a payment request.
        cardButton.disabled = true;
        const token = await tokenize(paymentMethod);
        const paymentResults = await createPayment(token);

        console.debug('Payment Success', paymentResults);
      } catch (e) {
        cardButton.disabled = false;

    const cardButton = document.getElementById('card-button');
    cardButton.addEventListener('click', async function (event) {
      await handlePaymentMethodSubmission(event, card);
Pay $1.00

I am new for forum and asking question. Please let me know if you need more info.

:wave: Hi Raja, I took a look at the logs and it looks like you aren’t passing in an amount with the payment request. I see that you do have app_fee_money included however I don’t see an amount in the payment request. An example payment request with app_fee_money is:

$amount_money = new \Square\Models\Money();

$app_fee_money = new \Square\Models\Money();

$body = new \Square\Models\CreatePaymentRequest(

$api_response = $client->getPaymentsApi()->createPayment($body);

if ($api_response->isSuccess()) {
    $result = $api_response->getResult();
} else {
    $errors = $api_response->getErrors();

Hi Raja, I know it has been a year since your post, but did you find the solution to your problem?
If you did, are you able to share it with me?