About functions in payments

With Shopify Functions, you can build payment customizations that hide, reorder, rename, and set payment terms for payment options available to buyers at checkout. In this tutorial series, you'll use Shopify 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.

Anchor to What you'll learnWhat 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.
• Set payment terms for any checkout.

Anchor to RequirementsRequirements

• 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.

Anchor to Rust-specific requirementsRust-specific requirements

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 the wasm32-wasip1 target:

  Terminal

  Copy

  $

  $

  rustup target add wasm32-wasip1

Anchor to Limitations and considerationsLimitations and considerations

• 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.
• 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 Point of Sale, Payment Customization Functions don't currently run, and operations aren't applied.
• 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 activate a maximum of twenty-five payment customization functions on each store.
• When setting payment terms on checkout, consider the following things:
  • Payment terms only apply to the specific order being processed and don't change the buyer's default payment terms.
  • Existing payment terms aren't provided in the function input and can't be referenced when setting new payment terms.
  • Payment terms can only be set if the shop is on a Shopify Plus plan.
  • Payment terms can't be set on accelerated checkouts.
  • D2C checkouts with payment terms don't support pay now options—buyers only see deferred payment options. B2B checkouts have additional deferred payment options, including vaulted credit cards.
  • Event-based payment terms and automatic payment capture work differently for B2B and D2C:
    • D2C checkouts: When the store has the Automatically when fulfilling setting enabled, payments are captured automatically based on the event trigger (FULFILLMENT_CREATED captures per fulfillment, ORDER_FULFILLED captures when the entire order is fulfilled) set by the function.
    • B2B checkouts: Automatic payment capture isn't supported. Merchants must manually capture payments when the fulfillment event occurs.

Anchor to Sample codeSample code

If you want to quickly get started, then you can get the sample code by completing the following steps. The tutorial series describes the sample code step by step.

1. Clone the payment customizations sample app:

   Terminal

   Copy

   $

   $

   shopify app init --template https://github.com/Shopify/function-examples/sample-apps/payment-customizations
   Note

   You can view the source code for the payment customizations sample app in GitHub.

1. Enter a name for your app project.

2. Navigate to your app directory:

1. Link your app configuration:

1. Start a local server for your app:

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.

2. Click Install app to install the app on the store.

1. Create and test your payment customization.

Anchor to Tutorial seriesTutorial series

Follow the tutorial series to go from "Hello World" to a functional payments customization experience.

Tutorial 1: Getting started with building payment customizations

Create a new payment customization function.

Tutorial 2: Add configuration to your payment customization

Add configuration to your payment customization using metafields.

Tutorial 3: Build a payment customization user interface

Build a new page in your app where merchants can view payment customizations.

Tutorial 4: Set payment terms on a checkout

Set payment terms based on the buyer identity and cart total.

Anchor to Developer tools and resourcesDeveloper tools and resources

Explore the following developer tools and resources to get familiar with building payment customizations.

Payment Customization API reference

Consult the GraphQL reference for the Payment Customization API.

Language support

Learn about the language support and tooling available in Shopify Functions.

UX guidelines for payment customizations

Learn how to implement payment customizations in user interfaces.

Anchor to Next stepsNext steps

• Get started with building payment customizations.