You can use payment customizations to hide, reorder, and rename the payment options that are available to buyers during checkout. In this tutorial series, you'll use [Shopify Functions](/docs/apps/build/functions) to create a function that lets merchants hide a payment option offered to customers at checkout, based on the total value of their cart. ## What you'll learn In this tutorial series, you'll learn how to do the following tasks: - Set up your environment to use functions. - Create a payment customization function. - Add configuration to your payment customization using metafields. - Build a payment customization user interface with App Bridge. ## Requirements - You've created a [Partner account](https://www.shopify.com/partners). - You've created a [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app). - You've [created an app that uses Shopify CLI 3.49.5 or higher](/docs/apps/build/scaffold-app). If you previously installed Shopify CLI, then make sure that you're using the [latest version](/docs/api/shopify-cli#upgrade). If you plan to create a UI for your extension, then start with the [Remix app template](/docs/api#app-templates). - You've installed [Node.js](https://nodejs.org/en/download) 16 or higher. - You've [installed your app](/docs/apps/build/scaffold-app#step-3-install-your-app-on-your-development-store) on the development store. ### Rust-specific requirements The following requirements are specific to Rust-based development with Shopify Functions. - You've installed [Rust](https://www.rust-lang.org/tools/install). On Windows, Rust requires the [Microsoft C++ Build Tools](https://docs.microsoft.com/en-us/windows/dev-environment/rust/setup). Make sure to select the **Desktop development with C++** workload when installing the tools. - You've installed the [`wasm32-wasip1` target](https://doc.rust-lang.org/rustc/platform-support/wasm32-wasip1.html): <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTrustup target add wasm32-wasip1 END_RAW_MD_CONTENT</script> </div> </p> ## Limitations and considerations - Plan and geographical restrictions apply. [Learn more](https://help.shopify.com/en/manual/checkout-settings/checkout-customization#understanding-payment-method-customizations) - When the Payment Customization API usage is restricted, the function [input](/docs/api/functions/reference/payment-customization/graphql/input) will still contain all payment methods, however [output](/docs/api/functions/reference/payment-customization/graphql/functionrunresult) [operations](/docs/api/functions/reference/payment-customization/graphql/common-objects/operation) that target restricted payment methods will not take effect on the checkout. - 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. ## Sample code If you want to quickly get started, then you can get the sample code by completing the following steps. The [tutorial series](#tutorial-series) describes the sample code step by step. 1. Clone the payment customizations sample app: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTshopify app init --template https://github.com/Shopify/function-examples/sample-apps/payment-customizations END_RAW_MD_CONTENT</script> </div> </p> > Note: > You can [view the source code for the payment customizations sample app](https://github.com/Shopify/function-examples/tree/main/sample-apps/payment-customizations) in GitHub. 1. Enter a name for your app project. 1. Navigate to your app directory: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTcd <directory> END_RAW_MD_CONTENT</script> </div> </p> 1. Link your app configuration: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTshopify app config link END_RAW_MD_CONTENT</script> </div> </p> 1. Start a local server for your app: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTshopify app dev END_RAW_MD_CONTENT</script> </div> </p> 1. With the server running, open the **Preview URL** in the terminal output. When you open the URL, you're prompted to install the app on your development store. 1. Click **Install app** to install the app on the store. 1. [Create and test your payment customization](/docs/apps/build/checkout/payments/build-ui#step-5-create-and-test-your-payment-customization). ## Tutorial series Follow the tutorial series to go from "Hello World" to a functional payments customization experience. <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/apps/build/checkout/payments/create-payments-function" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/globe" data-alt-src="/assets/resource-cards/globe-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 1: Getting started with building payment customizations </h3> <p class="resource-card__description">Create a new payment customization function.</p> </a> </div> <div> <a class="resource-card" href="/docs/apps/build/checkout/payments/add-configuration" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/gear" data-alt-src="/assets/resource-cards/gear-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 2: Add configuration to your payment customization </h3> <p class="resource-card__description">Add configuration to your payment customization using metafields.</p> </a> </div> <div> <a class="resource-card" href="/docs/apps/build/checkout/payments/build-ui" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/blocks" data-alt-src="/assets/resource-cards/blocks-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 3: Build a payment customization user interface </h3> <p class="resource-card__description">Build a new page in your app where merchants can view payment customizations.</p> </a> </div> </div> ## Developer tools and resources Explore the following developer tools and resources to get familiar with building payment customizations. <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/api/functions/reference/payment-customization" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/graphql" data-alt-src="/assets/resource-cards/graphql-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Payment Customization API reference </h3> <p class="resource-card__description">Consult the GraphQL reference for the Payment Customization API.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/apps/build/functions/programming-languages" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/javascript" data-alt-src="/assets/resource-cards/javascript-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Language support </h3> <p class="resource-card__description">Learn about the language support and tooling that are available in Shopify Functions.</p> </a> </div></p> <p><div> <a class="resource-card" href="/docs/apps/build/checkout/payments/ux-for-payments" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/heart" data-alt-src="/assets/resource-cards/heart-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> UX guidelines for payment customizations </h3> <p class="resource-card__description">Learn how to implement payment customizations in user interfaces.</p> </a> </div> </div> ## Next steps - [Get started](/docs/apps/build/checkout/payments/create-payments-function) with building payment customizations.