Api call on click of Pay Now

Extensions
1

image
image584×708 14.9 KB

On clicking Pay Now, I need to call an API. If the API returns true, then order will be created and the user will proceed to the thank-you page. If it returns false, the process should be blocked and a validation error should be shown. How this can be done

2

Got a solution with
useBuyerJourneyIntercept(async ({ canBlockProgress }) => {}

need to check if it works or not

3

Shopify Functions allow us to restrict the order process using the Cart and Checkout Validation API: Cart and Checkout Validation Function API

While it’s possible to make external API calls using network access : Use network access

Instead of fetching data with an external network call, consider retrieving the data from a metafield. Ref: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#Alternatives%20to%20network%20access

Need to check if it works?

4

@AMaL network access for function requires Shopify for Enterprise. Is there any other solution?

I tried using useBuyerJourneyIntercept(async ({ canBlockProgress }) => {}), but didn’t work for my usecase . My usecase is when pay now is clicked it will call external inventory api which will check for the stock and reserve the item . if out of stock it will send back out of stock . if item got reserved only then it passes the validation and lets order to be created else it will stay in checkout page with validation error. i don’t want to reserve the inventory before pay now is clicked .

5

I believe we cannot fetch real-time inventory details directly within a Checkout UI Extension or a checkout function. However, we can read product metafield values in cart and checkout validation functions to enforce stock checks. The cart and checkout validation function verifies the product’s metafield to confirm whether the item is in stock.

Here’s the recommended solution:

  1. Keep the variant metafield synchronized with product stock
  2. In the validation function, read the metafield for each line item.
  3. If stock > 0, allow the checkout to proceed.
  4. If stock = 0, return a validation error to block order creation.
6

@AMaL I can’t store stock in metafield . i need to reserve the inventory through the api .
We can call api in checkout ui extension . Problem is i want api to be called at end moment after all the validation passed . i don’t want api to be called if validation fails

import {
  reactExtension,
  useApi,
  useBuyerJourneyIntercept,
  useBuyerJourneyCompleted,
  useBuyerJourneyActiveStep,

} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => <Gate />);

function Gate() {
  const { query, attributes } = useApi();



  const buyerJourneyCompleted = useBuyerJourneyCompleted();
  const buyerJourneyActiveStep = useBuyerJourneyActiveStep();


  useBuyerJourneyIntercept(async (obj) => {


    return { behavior: "block" ,
      reason: " block progress at this time.",
      errors: [
        {
          message:
            " block progress at this time.",
        },
      ],
    };

  });



  return null;

}
7

Im able to call external api in checkout ui extension .is it possible to call external api in cart Cart and Checkout Validation Function API

8

I believe in Shopify Functions, we can make API calls using network access.

Can I know what API calls are made when a customer places an order (after payment/order creation)

9

Tried calling api in shopify function but i don’t have Shopify Enterprise . I want to call api to reserve inventory before order is getting place . if out of stock then order will not get created .

10

Blocking checkout progress behavior doesn’t apply to express checkout options, such as Shop Pay, Google Pay, and Apple Pay.

@Amith_M The Checkout block is not supported in the above options. Since making external API calls requires Shopify Enterprise , i think using metafields with the cart and checkout functions is an option.