Skip to main content

Getting Started with Payment Extension

This page provides all the steps needed to create your first payment extension. It covers the following tasks:

  1. Install Fynd Development Kit Command Line Interface (FDK CLI)
  2. Generate the Boilerplate
  3. Download the Boilerplate
  4. Preview your Extension

Prerequisites​

Before getting started, you will need the following:

Steps​

1. Install the FDK CLI​

The FDK CLI simplifies extension development by providing commands for creating, testing, and deploying extensions. For more details, refer to the GitHub documentation↗.

  1. Run the following command in your terminal to install FDK CLI:

    npm install -g @gofynd/fdk-cli

  2. Run fdk --version to ensure that the FDK CLI version is 8.0.4 or later to create a payment extension in the FDK CLI.

2. Generate a Boilerplate​

After you have successfully installed the FDK CLI, follow these steps to generate a payment boilerplate:

  1. Run the following command to log in to your Fynd Partners account:

    fdk login

    Your browser will open so you can select the account where you want to create the extension.

    note

    For FDK CLI 8.0.6 or earlier, developers must enable Apps on Device in the browser to log in successfully to their Fynd Partners account.

  2. In the browser, select the organization for which you want to create the extension.

    tip

    After you log in, you can run fdk user to verify that you are logged in.

  3. Go back to your terminal and run the following command to initiate a new extension:

    fdk extension init
    info

    The fdk extension init command creates a folder in your local system and downloads the boilerplate for you to get started. This command also registers the extension in your Fynd Partners account. You can change all the extension details in the Fynd Partners panel.

  4. Select Create new extension.

  5. Enter a name for your extension. Here, we have entered Power Partner.

  6. Select the extension type as Private.

  7. Select the extension launch type as Payment.

  8. Enter a unique payment slug. Here, we have entered power-partner-1.

  9. Select Node + React.js + SQLite as your preferred technology stack for the template. This will create a boilerplate directory in your local system, and a payment extension will be registered in Fynd Partners. The extension URL will appear in your terminal.

🏆 Congratulations!

You have successfully created your first payment extension. Click on the extension URL to open it in the Fynd Partners panel. Extension in Fynd Commerce

  1. In the Fynd Partners panel, locate the Test Extension widget and click on Select Company. A list of available development companies will appear to choose one from this list. This is to use the company for testing your payment extension.
info

The boilerplate contains your API credentials and takes care of authentication into Fynd Commerce for using the Platform API, Storefront API, and webhooks.

3. Download the Boilerplate​

caution

This section is not applicable if you have already performed Generate a Boilerplate.

We have developed a boilerplate that serves as a foundation for creating a payment extension. Download the payment boilerplate from Here or use the following git command:

git clone https://github.com/gofynd/payment-extension-boilerplate.git
info

Refer to the Boilerplate Overview to get a detailed understanding of the payment boilerplate.

4. Preview your Extension​

After you have successfully generated or downloaded the boilerplate, follow these steps to preview your extension:

  1. Run the following command:

    fdk extension preview
    note

    By default, FDK uses a Cloudflare tunnel to expose your local extension for preview. If you prefer to use a different tunneling service, refer to the Preview Extension with Custom Tunnel for steps.

  2. Open the extension preview URL in your browser from the terminal. The extension will open in the Fynd Commerce platform.

  1. Click Accept and Continue.
  2. Enter your credentials as required by the payment provider. By default, you can use the API Secret field to enter any value and proceed with the extension installation.

Preview Extension with Custom Tunnel​

To enhance flexibility during local development, FDK supports a custom tunnel URL in the fdk extension preview command.

By default, FDK uses Cloudflare to expose your local extension. However, you might prefer to use an alternative tunneling service for extension preview.

There are two ways to preview your extension using a custom tunnel:

  1. --custom-tunnel flag

    fdk extension preview --custom-tunnel

    When you run this command, the CLI will prompt you to enter a custom tunnel URL. This tunnel must be listening on the port number suggested by the CLI.

    For example:

    ? Please enter the Tunnel URL that is listening on port 46456 : https://you-tunnel-url

    If you do not provide a custom tunnel, the FDK will automatically use the default Cloudflare tunnel.

  2. --tunnel-url and --port flag

    fdk extension preview --tunnel-url https://your-tunnel-url --port <port-number>

    This method bypasses the interactive prompt by directly specifying the tunnel URL and port number when running the command.

Next Steps​

Explore the Extension Development Guide to understand how the Boilerplate code works.