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.