Introduction

Forward makes integrating payments to your software application quick, easy, and painless. Here you will find our client's most common integration path, APIs, and guides. If you want to take a different approach or are looking for us to expose an additional endpoint, contact us here, and you will receive a response from an engineer developersupport@getfwd.com. Our system provides elegant tools to abstract the complexity of payments.

Most Popular Implementation

Our clients normally take this path because they want to go live in days - not weeks or months. If you are jaded from a previous experience, we don’t blame you. We were too. It’s why we built the platform.

Step 1. Implement the Hosted Application Page

Context

In order to process payments (and generate additional revenue in the process), each of your customers will need a merchant account. We will provide it, but first, we need to collect information on them and/or their business to ensure they are who they say they are.

How

You will create a sign-up for payments button in your application. When the user selects this, share the details of why integrated payments through your company is so much better than their swivel chair approach today. Collect three pieces of information (Business Name, Account Name - if different from Business, and the Pricing Plan). Send that to Forward via API, and we will return a unique hosted application for that customer to complete.

PS - You can also get the application link from the Partner Portal and skip the step to start.

Pro tip: To customize your branding, you can add your own logo and colors.

We provide support for two types of logos: "Logo" for your customer portal and "Application Logo" for your merchant applications. Follow these guidelines to ensure the best results:

Logo Image Guidelines:

Type	Where it's used	Background color	Format	Dimensions (px)	Orientation	Logo Example	Example against background
Application Logo	Merchant application	Light Grey #f4f6f7	WebP	≤ 400 x 400	Horizontal
Logo	Customer portal	Dark Grey #4b5668	WebP	≤ 400 x 400	Vertical

Shell Script for Resizing and Reformatting Logo Images:

# install CLI tool cwebp
brew install cwebp

# Reformat to WebP
cwebp My-Logo.png -o My-Logo.webp

# Resize to 400 x 400 pixels
cwebp My-Logo.webp -resize 400 0 -o My-Logo-400.webp 

Make sure to replace My-Logo.png with the filename of your logo image. This script resizes and converts your logo image to WebP format, ensuring compatibility and optimal display on our platform.

For documentation on cwebp, see: https://developers.google.com/speed/webp/docs/cwebp.

Step 2. Embed Payment Elements

Context

Next, your customer is going to want to accept payments from their customers - naturally, that’s why they just signed up.

How

In your application, wherever the logical place is to accept a payment (checkout, pay invoice, transfer, etc.), you will use our Payment Elements SDK to embed a card collection that will keep you out of PCI scope while enabling you to technically collect credit card information.

<div id="payment-form"></div>

<script>
  const paymentElement = await window.Forward.createPaymentElement({
    apiKey: 'pk_123948342832',
    clientSecret: 'pi_123948342832_secret_123948342832',
  });
  paymentElement.mount('#payment-form', {
    onReady: async (tokenize) => {
      tokenize();
    },
    onSuccess: async ({ token }) => {
      console.log(token);
    },
    onError: (error) => {
      console.log(error);
    },
  });
</script>

More information can be found here Payment Elements SDK

Step 3. Test your Integration

Context

Like any feature, you will probably want to test it before turning it on. Leverage our sandbox to create test merchant applications, and submit test credit and debit card transactions.

How

Our sandbox is an exact replica of our live environment - except we are not actually going to charge the credit card you submit, and we won’t run all the checks on a merchant account application that we are required by the networks (Visa, Mastercard, etc.) after you go live.

More information can be found here Accepting Payment Using the API.

Step 4. Go Live

Let us know you are ready for production, and we’ll change your permissions - and boom, you are in business!