Add configuration to your payment customization

In this tutorial, you'll learn how to do the following tasks:

• Define what configuration settings will be surfaced to merchants.
• Read and use the merchant-defined values in your function.

• You've completed the Getting started with building payment customizations tutorial.

To make your function reusable, you can replace hardcoded values in your function with metafield values. You can update your input query to request a metafield value on the created payment customization, which is the function owner for this function API. You can then use that value in your function logic.

1. Navigate to your function in extensions/payment-customization.

2. Replace the code in the src/run.graphql file with the following code.

   This update to the input query adds a metafield from the paymentCustomization object, which is the function owner.

   The query differs slightly in JavaScript and Rust due to code generation requirements.

3. If you're using JavaScript, then run the following command to regenerate types based on your input query:

4. Replace the src/run.js or src/run.rs file with the following code.

   This update includes parsing the JSON metafield value, and using values from that JSON in the function logic instead of hardcoded values.

   This change is automatically reflected as long as you're running dev.

To populate the configuration metafield, you'll first use the paymentCustomizations query to confirm the payment customization ID, and then use the metafieldsSet mutation to populate the same metafield that you specified in the input query.

1. Open the Shopify GraphiQL app on your development store.
2. In the GraphiQL app, in the API Version field, select the 2023-07 version.

3. Execute the following query, and make note of the id value of the payment customization that you created in the previous tutorial. For more information about global IDs, refer to Global IDs in Shopify APIs.

4. Execute the following mutation and replace YOUR_CUSTOMIZATION_ID_HERE with the full global ID of your payment customization.

   The value of the metafield specifies that the function should hide Cash on Delivery when the cart total is above 150.

   You should receive a GraphQL response that includes the ID of the created metafield. If the response includes any messages under userErrors, then review the errors, check that your mutation and ownerId are correct, and try the request again.

1. Open your development store and build a cart with a total (including shipping and tax) under 150. The Cash on Delivery payment method should display in checkout.
2. Add additional items to your cart to raise the total over 150. Your payment function should now hide the Cash on Delivery payment option.
3. To debug your function, or view its output, you can review its logs in your Partner Dashboard.
   1. Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > payment-customization.
   2. Click on any function run to view its input, output, and any logs written to STDERR.

• Build a payment customization user interface with App Bridge.
• Learn how to use variables in your input query.