Create the payments function

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

• Generate starter code for Shopify Functions.
• Use GraphQL to define the input of your function.
• Deploy functions to the Shopify platform.
• Review logs for your function.

• You've created a Partner account.
• You've created a development store.

• You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure that you're using the latest version.

  If you plan to create a UI for your extension, then start with the Remix app template.

• You've installed Node.js 16 or higher.

• You've installed your app on the development store.

The following requirements are specific to Rust-based development with Shopify Functions.

• You've installed Rust.

  On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.

• You've installed cargo-wasi:

• Plan and geographical restrictions apply. Learn more
  • When the Payment Customization API usage is restricted, the function input will still contain all payment methods, however output operations that target restricted payment methods will not take effect on the checkout.

• The Payment Customization API doesn't currently support draft orders.

• You can't rename payment methods that have logos as a name, such as Shop Pay, Apple Pay and Google Pay. This also includes all wallets and the Shopify native gift card field.

• In Shop Pay, payment customization functions do not apply operations on any payment methods except the native gift card field.

• You can remove wallets from the Express or payment method section of checkout, but you can't reorder them.

• You can install a maximum of five payment customization functions on each store.

To create your payment customization function, you can use Shopify CLI to generate a starter function, specify the inputs for your function using an input query, and implement your function logic using JavaScript or Rust.

1. Navigate to your app directory:

2. Run the following command to create a new payment customization extension:

3. Choose the language that you want to use. For this tutorial, you should select either Rust or JavaScript.

   Shopify defaults to Rust as the most performant and recommended language choice to stay within the platform limits. For more information, refer to language considerations.

4. Navigate to extensions/payment-customization:

5. Replace the contents of src/run.graphql file with the following code.

   run.graphql defines the input for the function. You need the cart total and the available checkout payment methods.

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

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

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

   This function logic will hide a payment method with a name containing Cash on Delivery when the cart total purchase amount is above 100.

To test your function, you need to make it available to your development store.

1. If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured build.watch in your function extension configuration.

2. Navigate back to your app root:

3. Use the Shopify CLI dev command to start app preview:

   You can keep the preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.

4. Follow the CLI prompts to preview your app, and install it on your development store.

To activate your function, you must create a payment customization on the store where you installed your app. You can do this using the paymentCustomizationCreate GraphQL mutation.

In subsequent tutorials, you'll use metafields on this payment customization to configure your function, and create a user interface so merchants can configure the function themselves.

1. Install the Shopify GraphiQL app on your store. If you've already installed GraphiQL, then you should do so again to select the necessary access scopes for payment customizations.

2. In the GraphiQL app, in the API Version field, select the 2023-07 version.

3. Find the ID of your function by executing the following query:

   The result contains a node with your function's ID:

4. Execute the following mutation and replace YOUR_FUNCTION_ID_HERE with the ID of your function:

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

1. From the Shopify admin, go to Settings > Payments.
2. Check the Payment customizations section. You should find the Hide payment method by cart total payment customization that you created with GraphiQL.
3. From the Manual payment methods section, click Add manual payment method and then click Cash on Delivery (COD).

4. Click Activate.

5. Open your development store and build a cart with a total (including shipping and tax) under 100. The Cash on Delivery payment method should display in checkout.

6. Add additional items to your cart to raise the total over 100. Your payment function should now hide the Cash on Delivery payment option.

7. Open your terminal where shopify app dev is running, and review your function executions.

   When testing functions on development stores, the output of dev includes executions of your functions, any debug logging you have added to them, and a link to a local file with the full function execution details.

8. In a new terminal window, use the Shopify CLI app function replay command to replay a function execution locally, and debug your function without the need to re-trigger the function execution on Shopify.

9. Select the function execution from the top of the list. Press q to quit when you are finished debugging.

• Add configuration to your payment customization using metafields.