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:

1. Install the FDK CLI​

The FDK CLI simplifies extension development by providing commands for creating, testing, and deploying extension. 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
  1. 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 successfully installed the FDK CLI, do the following steps to generate a payment boilerplate:

  1. Run the following command to log into your Fynd Partner account:
fdk login
  1. Select the organization for which you want to create the extension.
info

After login, you can run fdk user to verify if you've logged in.

  1. 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 the Fynd Partner's account. You can change all the extension details in the Fynd Partners panel.

  1. Select Create new extension.
  1. Enter a name for your extension. Here, we have entered Power Partner.
  2. Select the extension type as Private.
  3. Select the extension launch type as Payment.
  4. Enter a unique payment slug. Here, we have entered power-partner-1.
  5. 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/downloaded the boilerplate, do the following 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 you 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.

  1. --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 the how Boilerplate code works.