Skip to main content

Add a pay bill button (upcoming)

If you application already manages bills or invoices, Melio can offer a more integrated experience where you can add just a pay bill button and reduce the need for your users to add additional information.

To add a pay bill button, you'll need to add onboarding data as well as bill/invoice details before adding the pay bill button in your app.

  1. Get an api key from the partner portal
  2. Onboard the user and company using the api
  3. Prefill bill and vendor data
  4. Generate a session token
  5. Embed the bill pay link in your app

Get an api key from the partner portal​

  • Log in to our Partner Portal using the credentials provided to you.
  • Go to the Api and webhooks section, add a new api key and copy it
  • Go to the App setting section and retrieve your partnerName

Onboard the user using the api​

Call CreateAccount to onboard a user and company with all the required information.

If you cannot provide some onboarding information, Melio will collect it before the user finishes a payment.

Example call:

curl -L 'https://plug-and-pay.public-qa.melioservices.com/api/account' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer <apiKey>' \
-d '{
  "user": {
    "email": "john.doe@acmecorp.com",
    "firstName": "John",
    "lastName": "Doe",
    "phone": "555-123-4567",
    "dateOfBirth": "1980-01-15",
    "providedId": "V1StGXR8_Z5jdHi6B-myT"
  },
  "organization": {
    "providedId": "FpK4jqTQ2_X9rL7mN3vB8",
    "companyName": "ACME Corporation",
    "legalName": "ACME Corporation LLC",
    "address": {
      "line1": "1600 Pennsylvania Avenue NW",
      "line2": "Suite 100",
      "city": "Washington",
      "state": "DC",
      "postalcode": "20500"
    },
    "legalAddress": {
      "line1": "1600 Pennsylvania Avenue NW",
      "line2": "Suite 100",
      "city": "Washington",
      "state": "DC",
      "postalcode": "20500"
    },
    "businessType": "llc",
    "taxInfo": {
      "type": "EIN",
      "identifier": "123123123"
    },
    "industry": {
      "naicsCode": "541511",
      "name": "Custom Computer Programming Services"
    }
  },
  "role": "administrator"
}'

Prefill bill and vendor data​

Call CreateVendor and CreateBill to prefill as much data about the user's payment.

Example Create Vendor Call:

curl -L 'https://plug-and-pay.public-qa.melioservices.com/api/vendors' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer <token>' \
--data-raw '{
  "organizationProvidedId": "FpK4jqTQ2_X9rL7mN3vB8",
  "providedId": "N3xB6dF9_M2pL5kJ8hG4",
  "companyName": "Office Supplies Co.",
  "email": "billing@officesupplies.com",
  "phone": "555-987-6543",
  "address": {
    "line1": "123 Business Park Dr",
    "line2": "Building A",
    "city": "Springfield",
    "state": "IL",
    "postalCode": "62701",
    "countryCode": "US"
  }
}'

Example Create Bill Call:

curl -L 'https://plug-and-pay.public-qa.melioservices.com/api/bills' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer <token>' \
-d '{
  "vendorId": "VEN_12345",
  "organizationProvidedId": "FpK4jqTQ2_X9rL7mN3vB8",
  "providedId":"R2kN8_Xm3qF7bP9vL6jC4",
  "totalAmount": {
    "amount": 150000,
    "currency": "USD"
  },
  "invoiceDate": "2024-01-15",
  "dueDate": "2024-02-14",
  "invoiceNumber": "INV-2024-001",
  "noteToSelf": "Office supplies for Q1 2024"
}'

Generate a session token​

Generate a token to use to embed the application by calling Generate Token. The token is valid only for 10 minutes, so this should be done just before the render function is called in the sdk. (In the next step)

curl -L 'https://plug-and-pay.public-qa.melioservices.com/api/account/session-token' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Bearer <token>' \
-d '{
  "userProvidedId": "FpK4jqTQ2_X9rL7mN3vB8",
  "organizationProvidedId": "FpK4jqTQ2_X9rL7mN3vB8"
}'

Once you have the billId and the sessionToken you are now ready to embed Melio using the Embedding SDK:

MelioEmbed.render({
  token: "<sessionToken>",
  target: MelioEmbed.TargetBuilder.schedulePayment("<billId from createBill>")
  sandbox: true,
  iframeSelector: "#melio-iframe-container",
})