Payments card api

Questions
1

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 →

image
image1800×1200 244 KB

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({
      locationId,
      sourceId: token,
    });

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

    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(
          tokenResult.errors
        )}`;
      }

      throw new Error(errorMessage);
    }
  }

  // status is either SUCCESS or FAILURE;
  function displayPaymentResults(status) {
    const statusContainer = document.getElementById(
      'payment-status-container'
    );
    if (status === 'SUCCESS') {
      statusContainer.classList.remove('is-failure');
      statusContainer.classList.add('is-success');
    } else {
      statusContainer.classList.remove('is-success');
      statusContainer.classList.add('is-failure');
    }

    statusContainer.style.visibility = '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(
        'payment-status-container'
      );
      statusContainer.className = 'missing-credentials';
      statusContainer.style.visibility = 'visible';
      return;
    }

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

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

      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);
        displayPaymentResults('SUCCESS');

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

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

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

2

: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();
$amount_money->setAmount(200);
$amount_money->setCurrency('USD');

$app_fee_money = new \Square\Models\Money();
$app_fee_money->setAmount(50);
$app_fee_money->setCurrency('USD');

$body = new \Square\Models\CreatePaymentRequest(
    '{{source_id}}',
    '00b80499-f0c2-4474-8ace-bd2d1213b385',
    $amount_money
);
$body->setAppFeeMoney($app_fee_money);
$body->setLocationId('{{location_id}}');

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

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

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?

Thanks
Alex