Issue with Payment Method Customization in Shopify Functions: Unable to Modify Order and Names

Functions
,
1

Hi, I’m working with Shopify Functions in the checkout, specifically for payment methods. I want to fully replace Additional Scripts, but I’m encountering a problem.

For example, I was able to change the names for credit card payments, but no matter what, I can’t change the order of payments or modify the name of PayPal (for instance, adding something in parentheses). I assume it’s because PayPal is listed as an Additional Payment Method and maybe that’s why it can’t be modified at all.

But why can’t I set my own order? I’ve tried different things, for example:

  for (let i = 0; i < paymentMethods.length; i++) {
    const method = paymentMethods[i];
    if (method.name === "Other Payments") {
      otherPaymentsIndex = i;
      otherPaymentsId = method.id;
    }
  }
  if (otherPaymentsIndex > 0 && otherPaymentsId) {
    operations.push({
      move: {
        paymentMethodId: otherPaymentsId,
        position: otherPaymentsIndex - 1,
      },
    });
  }

However, I keep getting an error in the logs in the Shopify Partner panel: InvalidOutputError.

It’s a bit strange because, in Additional Scripts, I was able to hide payments by country, change the order, etc.

I used this documentation:

Can anyone help me figure this out? Here’s the part for renaming that works, but it doesn’t catch PayPal:

export function run(input) {
  /** @type {FunctionRunResult['operations']} */
  const operations = [];

  for (const method of input.paymentMethods) {
    if (method.name === "Adyen Payments - Credit Cards") {
      operations.push({
        rename: {
          paymentMethodId: method.id,
          name: "💳 Credit Card (Recommended)",
        },
      });
    }
    if (method.name === "Other Payments") {
      operations.push({
        rename: {
          paymentMethodId: method.id,
          name: "Other Payments (Not Recommended)",
        },
      });
    }
    if (method.name === "PayPal Express Checkout" || method.name === "PayPal)") {
      operations.push({
        rename: {
          paymentMethodId: method.id,
          name: "PayPal (Not Recommended)",
        },
      });
    }
  }

  if (operations.length === 0) {
    return NO_CHANGES;
  }

  return {
    operations,
  };
}`

In general, I need three things:

  1. Modifying names
  2. Modifying order
  3. Hiding based on country.
2

I would appreciate any help with moving the at least position, as I feel something is off with that. I have already managed to hide positions based on the country.

    if (method.name === "Other Payments") {
      const lastPosition = input.paymentMethods.length - 1;
      operations.push({
        move: {
          paymentMethodId: method.id,
          position: lastPosition,
        },
      });
    }
3

I’m pretty sure that payment ordering & renaming doesn’t work against express checkout options

1 Like
4

Yes, I think you are right, but I try reordering simple Credit Card and Bank Deposit methods. I can rename them but reordering doesn’t work.

5

Ok, I figured it out. It should be index instead of position.

Here is the correct implementation:

      operations.push({
        move: {
          paymentMethodId: method.id,
          index: 0,
        },
      });
6

Glad you figured this out lynthius - and thanks for posting your solution!