Help with Implementing Customer Payment Method Update (Public App, Remix, Subscriptions

GraphQL Admin API Troubleshooting
,
1

Hi everyone,

I’m fairly new to Shopify app development and currently working on a public app using Remix, based on the Shopify Subscription app template.

I’m trying to implement a feature that allows customers to update the payment method for any of their active subscriptions by selecting from the payment methods already associated with their account.

However, I keep running into issues when trying to fetch the customer’s available payment methods. I’ve followed the documentation and guidance from the support team, tried several GraphQL queries, but nothing seems to work. Common errors include:

  • Field 'paymentMethods' doesn't exist on type 'Customer'
  • Field 'customer' doesn't accept argument 'id'

My questions:

  1. Which API should I use for this use case?

    • Admin API?
    • Storefront API?
    • Customer API?

  2. Is there any reproducible example or demo code showing how to implement this functionality?

For context, I have the required scopes added in my shopify.app.toml file:

scopes = "customer_read_orders,customer_write_customers,customer_write_own_subscription_contracts,read_all_orders,read_locales,read_locations,read_themes,read_customer_payment_methods,write_customers,write_metaobject_definitions,write_metaobjects,write_orders,write_products,write_translations,write_own_subscription_contracts,write_customer_payment_methods,read_own_subscription_contracts,read_purchase_options,write_purchase_options,customer_read_own_subscription_contracts"

Despite this, I’ve been stuck for days. I would truly appreciate any guidance, examples, or insights from the community.

Thanks in advance!

2

Hi @Misbah

You’re on the right track using the Admin API - this is the correct API to use for fetching details on a customers payment methods.

The query you’d use is customerPaymentMethod which requires the read_customer_payment_methods scope. This scope isn’t applied by just adding it to the .toml file, you’d need to request access from your partner dashboard, the process for this is described here: Shopify API access scopes

Once Shopify approves access to this scope, the query should return the data as expected.

3

From what I’ve found and understood so far, this query (via the Admin API) cannot be fetched directly from the strorefront.

So, how can I fetch all payment methods for a logged-in customer on the frontend?

Or is this process actually meant to be handled within the app/backend? (I personally don’t think so, but please correct me if I’m wrong.)

In summary, I’d really appreciate your guidance on what the correct flow for this entire feature should be.

P.S. I’ve already enabled all the required access scopes in the Partner Dashboard.

4

Would this be the different to all active payment methods available on a store’s checkout?