Skip to main content

Build the UI for the payment customization function

Merchants create and manage payment customizations in the Shopify admin. To render the payment customization creation and editing experience for the merchant, Shopify uses URLs that you configure. You can customize this UI for your function's configuration needs, or to meet other requirements of your app.

Anchor to What you'll learnWhat you'll learn

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

  • Create an App Bridge UI that enables users to create a function owner.
  • Configure the UI paths for your function.
Screenshot that shows the merchant UI for configuring the payment function

Anchor to RequirementsRequirements

Anchor to Step 1: Create the frontend UI for your functionStep 1: Create the frontend UI for your function

The following example builds a React-based page that enables merchants to create and configure a new payment customization. The code renders a frontend page in your app and uses the GraphQL Admin API to create a payment customization.

  1. In app/routes, create a new file named app.payment-customization.$functionId.$id.jsx.

    The Shopify Remix app template uses file-based routing, so the file name determines the page's URL. The $ prefix indicates functionId and id are dynamic segments. The path for this page is /app/payment-customization/{functionId}/{id} .

  2. Add the following code in app.payment-customization.$functionId.$id.jsx:

    • The loader function handles fetching the data to populate the form and is used when this page has an id value that is not new.
    • The action function handles submitting the form data to Shopify to create the payment customization.
    • The PaymentCustomization function renders the page and form components using Polaris components and Remix hooks.

    app/routes/app.payment-customization.$functionId.$id.jsx

    import { useState, useEffect } from "react";
    import {
    Banner,
    Button,
    Card,
    FormLayout,
    Layout,
    Page,
    TextField,
    } from "@shopify/polaris";
    import {
    Form,
    useActionData,
    useNavigation,
    useSubmit,
    useLoaderData,
    } from "@remix-run/react";
    import { json } from "@remix-run/node";

    import { authenticate } from "../shopify.server";

    // This is a server-side function that provides data to the component when rendering.
    export const loader = async ({ params, request }) => {
    const { id } = params;

    // If the ID is `new`, then we are creating a new customization and there's no data to load.
    if (id === "new") {
    return {
    paymentMethodName: "",
    cartTotal: "0",
    };
    }

    const { admin } = await authenticate.admin(request);
    const response = await admin.graphql(
    `#graphql

Anchor to Step 2: Update your input query to use an app-owned namespaceStep 2: Update your input query to use an app-owned namespace

In the previous tutorial, you used a metafield namespace that was accessible to any app, so that the metafield namespace could be populated using GraphiQL. To make your function ready for production, you should update the metafield namespace to use a reserved prefix so that other apps can't use your metafield.

Replace the code in the extensions/payment-customization/src/run.graphql file with the following code. The query differs slightly in Rust and JavaScript due to code generation requirements.

run.graphql

src/run.graphql

query Input {
cart {
cost {
totalAmount {
amount
}
}
}
paymentMethods {
id
name
}
paymentCustomization {
metafield(namespace: "$app:payment-customization", key: "function-configuration") {
jsonValue
}
}
}
query RunInput {
cart {
cost {
totalAmount {
amount
}
}
}
paymentMethods {
id
name
}
paymentCustomization {
metafield(namespace: "$app:payment-customization", key: "function-configuration") {
jsonValue
}
}
}

Anchor to Step 3: Configure the create UI path for your functionStep 3: Configure the create UI path for your function

Settings in the shopify.extension.toml file define the URLs that Shopify uses for merchants to create and edit payment customizations using your function. Shopify automatically fills in any dynamic tokens in these URLs.

In extensions/payment-customization/shopify.extension.toml, populate the two settings directly under [ui.paths]. This change is automatically reflected.

extensions/payment-customization/shopify.extension.toml

create = "/app/payment-customization/:functionId/new"
details = "/app/payment-customization/:functionId/:id"

Anchor to Step 4: Update your app access scopesStep 4: Update your app access scopes

You must request the write_payment_customizations access scope to invoke payment customization mutations in the Admin API.

  1. In shopify.app.toml in the root of your app, add the write_payment_customizations scope.

    shopify.app.toml

    # This file stores configurations for your Shopify app.

    scopes = "write_products, write_payment_customizations"

  2. Deploy your updated configuration to Shopify:

    Terminal

    shopify app deploy

  3. Restart your app:

    Terminal

    shopify app dev

  4. Use the URL provided by the CLI to open and re-install your app. You should be prompted to accept the new access scope permissions in your store.

Anchor to Step 5: Create and test your payment customizationStep 5: Create and test your payment customization

  1. From the Shopify admin, go to Settings > Payments.
  2. Under the Payment customizations section, click Manage.
  3. If you have existing customizations from previous tutorials, then click the checkbox next to each of them, and then click Deactivate.
  4. Click Add a customization and then click payment-customization by {your app}.
  5. Fill in the payment customization form, then click Save.
    • For Payment method, use Cash on Delivery.
    • For Cart total, use 200.
  1. Open your development store and build a cart with a total (including shipping and tax) under 200. The Cash on Delivery payment method should display in checkout.
  2. Add additional items to your cart to raise the total over 200. Your payment function should now hide the Cash on Delivery payment option.

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

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

Terminal

shopify app function replay
  1. Select the function execution from the top of the list. Press q to quit when you are finished debugging.

Anchor to Next stepsNext steps

  • Review the UX guidelines to learn how to implement payment customizations in user interfaces.
Was this page helpful?