Receive WhatsApp Payments via Stripe

Payments API Integration with Stripe allow customers to pay for their orders without leaving the WhatsApp customer app

On this page, you will learn how to send customers a bill, so that the client can complete their order by paying the business with Stripe without having to leave WhatsApp app.

The Stripe Payment Integration is available only for businesses registered in Singapore using the 360dialog WhatsApp Business API with phone numbers from Singapore. If you are eligible, please get in touch with our Support Team to enable the Payments feature.

Overview

Currently, customers browse business catalogs, add products to their cart, and send orders with the set of commerce messaging solutions, which includes Multi Product Message, and Product Detail Page. Now, with the Payments API, businesses can send clients a Stripe bill so the customer can complete their order by paying the business without having to leave WhatsApp. See how it works below:

How it works

First, the business composes and sends an order_details message. An order_details message is a new type of interactive message, which always contains the same 4 main components: header, body, footer, and action. Inside the action component, the business includes all the information needed for the customer to complete their payment.

Each order_details message contains a unique reference_id provided by the business, and that unique ID is used throughout the flow to track the order.

Once the message is sent, the business must wait for a payment or transaction status update. There are three payment statuses currently supported by WhatsApp: pending, captured, and failed. Each payment can include one or more transactions.

Notifications will be transmitted when the transaction status changes, but do not solely rely on these webhook notifications due to security reasons. WhatsApp provides a payment-lookup API to retrieve the payment statuses directly, and, is possible to query payment status using different phone numbers under the same Business Manager account.

Please note that neither 360dialog nor WhatsApp supports payment reconciliations.

You must reconcile the payment with Stripe using the reference_id of the order or transaction_id of transaction.

Purchase Flow in App

The purchase flow has the following steps in the WhatsApp customer app:

  1. Customers send an order with selected products to the business either through simple text messages or using other interactive messages such as Single Product Message, Multi Product Message, and Product Detail.

  2. Once the business receives the order, they send an order_details message to the user. When the user taps on Review and Pay, they will see details about the order and total amount to be paid.

  3. When the user taps the Secure Checkout button, a secure in-app webview will appear for the user to pay for the order.

  4. Once the payment has been confirmed, the business will be notified of the latest payment status using a webhook notification as shown in section 2 below.

  5. Businesses can then send an order_status message to the consumer informing them about the status of the order. Each message will result in a message bubble (as shown below) that refers to the original order details message and also updates the status displayed on the order details page.

Businesses should add a Stripe payment configuration to the WhatsApp Business Account to receive payments on WhatsApp.

Accounts created with Embbeded-Sign up model (Shared WABA) can add it using the 'Direct pay methods' page under 'Singapore' in the WhatsApp Business Manager as shown below. In addition, only Admin and Financial Editors users of such a business are eligible connect the Stripe accounts.

If the WABA was created using the OBO (On Behalf-Of) model, please reach out to our support team and we will assist you during this step.

A payment configuration allows businesses to link their Stripe account to WhatsApp. Each payment configuration is associated with a unique name. As part of the order_details message, you can specify the payment configuration to use for a specific checkout. WhatsApp will then generate a payment link using the associated Stripe account indicated in the request. This link opens up in an in-app webview so consumers can pay for their order.

After linking your Stripe account, you must integrate with the Payments APIs below. This will allow you to send an order_details message to customers with the payment configuration to receive payments.

Integration Steps

The steps outlined below assume that the business already knows what the user is interested in through earlier conversations. The payments API is a standalone API and hence can work with various messages such as List Messages, Reply Buttons, Single or Multi-Product Messages.

Sequence Diagram

The following sequence diagram demonstrates the typical integration flow for WA Payments API:

Step 1: Send Order Details Interactive Message

To send an order_details message, businesses must assemble an interactive object of type order_details with the following components:

Parameters Object

Order Object

By the end, the interactive object should look something like this:

{
  "recipient_type": "individual",
  "to": "[recipient-whatsapp-id]",
  "type": "interactive",
  "interactive": {
    "type": "order_details",
    "header": {
      "type": "image",
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    },
    "body": {
      "text": "your-text-body-content"
    },
    "footer": {
      "text": "your-text-footer-content"
    },
    "action": {
      "name": "review_and_pay",
      "parameters": {
        "reference_id": "reference-id-value",
        "type": "digital-goods",
        "payment_type": "p2m-lite:stripe",
        "payment_configuration": "unique-payment-config-id",
        "currency": "SGD",
        "total_amount": {
          "value": 21000,
          "offset": 100
        },
        "order": {
          "status": "pending",
          "catalog_id": "the-catalog_id",
          "expiration": {
            "timestamp": "utc_timestamp_in_seconds",
            "description": "cancellation-explanation"
          },
          "items": [{
            "retailer_id": "1234567",
            "name": "Product name, for example bread",
            "amount": {
              "value": 10000,
              "offset": 100
            },
            "quantity": 5,
            "sale_amount": {
              "value": 10000,
              "offset": 100
            }
          }],
          "subtotal": {
            "value": 10000,
            "offset": 100
          },
          "shipping": {
            "value": 10000,
            "offset": 100,
            "description": "optional_text"
          },
          "discount": {
            "value": 10000,
            "offset": 100,
            "description": "optional_text",
            "discount_program_name": "optional_text"
          }
        }
      }
    }
  }
}

Add Common Message Parameters

Once the interactive object is complete, append the other parameters that make a message: recipient_type, to, and type. Remember to set the type to interactive.

{ 
  "recipient_type": "individual",
  "to" : "whatsapp-id", // WhatsApp ID of the recipient
  "type": "interactive",
  "interactive":{
    // The interactive object  
   }
}

These are parameters common to all message types.

Make a POST Call to /messages

Make a POST call to the /messagesendpoint with the JSON object you have assembled in steps 1 and 2. If your message is sent successfully, you get the following response:

{
  "messages": [{
    "id": "{message-id}"
  }]
}

Product Experience

The customer receives an order_details message similar to the one below (left). When they click on "Review and Pay", it opens up the order details screen as shown below (middle). Customer can then pay for their order using "Secure Checkout" button that opens up an in-app webview powered by Stripe (right).

Step 2: Receive Webhook about Transaction Status

Businesses receive updates via WhatsApp webhooks when the status of the user-initiated transaction changes in a status of type "payment". It contains the following fields:

A webhook notification for an updated transaction status looks like this:

POST /
{
  "statuses": [{
    "id": "gBGGFlB5YjhvAgnhuF1qIUvCo7A",
    "from": "16315555555",
    "type": "payment",
    "status": "new-transaction-status",
    "payment": {
      "reference_id": "reference-id-value"
    },
    "timestamp": "1610561171"
  }]
}

Step 3: Confirm Payment

After receiving the payment status change notification, or at any time, the business can look up the status of the payment or transaction.

To do that, businesses must make a GET call to /v1/payments/{payment-config-id}/{ref-id}, using the reference ID provided in the order_details message.

Businesses should expect a response in the same HTTP session (not in a webhook notification). A response can return the following values:

Payment Status

An example successful response looks like this:

{
  "payments": [{
    "reference_id": "BM4321",
    "status": "success",
    "currency": "SGD",
    "total_amount": {
      "value": 21000,
      "offset": 100
    },
    "transactions": [{
        "id": "1243A432",
        "type": "p2m-lite",
        "status": "failed",
        "created_timestamp": 1663021545,
        "updated_timestamp": 1664024213
      },
      {
        "id": "1243A434",
        "type": "p2m-lite",
        "status": "success",
        "created_timestamp": 1664030516,
        "updated_timestamp": 1664040212
      }
    ]
  }]
}

In the case of any errors, this is the response:

{
  "errors": [{
    "code": ERROR_CODE_INT,
    "title": "[ERROR_TITLE]",
    "details": "[ERROR_DESCRIPTION]"
  }]
}

See Error Messages.

Step 4: Update Order Status

Businesses must send updates to their order using the order_status message instead of text messages since the latest status of an order displayed on the order details page is only based on order_status message

To notify the customer with updates of an order, you can send an interactive message of type order_status as shown below:

{
  "recipient_type": "individual",
  "to": "whatsapp-id",
  "type": "interactive",
  "interactive": {
    "type": "order_status",
    "body": {
      "text": "your-text-body-content"
    },
    "action": {
      "name": "review_order",
      "parameters": {
        "reference_id": "reference-id-value",
        "order": {
          "status": "processing",
          "description": "optional-text"
        }
      }
    }
  }
}

The following table describes the fields in the order_status interactive message:

The parameters object contains the following fields:

order_status message introduces two new errors that are summarized below.

Product Experience

Customers receive each order_status update as a separate message in their chat thread, that references their original order_details message as shown below.

The order details page always displays the latest valid status communicated to the customer using the order_status message as shown below.

Supported Order Status and Transitions

Currently, Meta supports the following order status values:

Order status transitions are restricted for consistency of consumer experience. Allowed status transitions are summarized below:

  • Initial status of an order is always pending, which is sent in order_details message.

  • canceled and completed are terminal status and cannot be updated to any other status.

  • pending can transition to any of the other statuses including processing, shipped, partially-shipped.

  • processing, shipped and partially-shipped are equivalent statuses and can transition between one another or to one of the terminal statuses.

Upon sending an order_status message with an invalid transition, you will receive an error webhook with the error code 2046 and message "New order status was not correctly transitioned."

Canceling an Order

An order can be canceled by sending an order_status message with the status canceled. The customer cannot pay for an order that is canceled. The customer receives an order_status message (left) and order details page is updated to show that the order is canceled and the "Secure Checkout" button removed (right). The optional text shown below "Order canceled" on the order details page can be specified using the description field in the order_status message.

An order can be canceled only if the user has not already paid for the order. If the user has paid and you send an order_status message with canceled status, you will receive an error webhook with error code 2047 and message "Could not change order status to 'canceled'".

Merchant should always post this order-status message to consumer after reciving transaction updates for an order.

Step 5: Reconcile Payments

Please note that neither 360dialog nor WhatsApp supports payment reconciliations. Businesses should use their Stripe account to reconcile the payments using the reference_id provided in the order_details messages and the transaction_id of the transactions returned as part of the webhooks or the payment status query.

Security Considerations for Payments API

  • Businesses should comply with local security and regulatory requirements in Singapore.

  • Businesses should not rely solely on the status of the transaction provided in the webhook and must use payment lookup API to retrieve the statuses directly from WhatsApp.

  • To ensure secure financial processing, payment configurations such as the business’ VPA shared by all WhatsApp phone numbers must belong to the same Business Manager account. If you wish to separate payments for different phone numbers, then additional Business Manager Accounts must be created.

  • Businesses must always sanitize/validate the data in the API responses or webhooks to protect against SSRF attacks.

Last updated