How to Add a Payment Button to an Email

You can add a payment button via YooKassa or QIWI to your email and increase sales from email campaigns.

Step 1. Create a Template

Go to the "Email Templates" tab and create a new one, or choose a ready-made template. We recommend choosing the "Commerce" template structure.

Step 2. Add a "Checkout" Element

From the left panel, drag over the "Checkout" element. Choose a payment method — "YooKassa" or "QIWI." Put it next to the goods (or services) that you want to sell directly from the campaign.

To connect the YooKassa payment system, go to the service settings in the "Other Settings" tab. In the field opposite "Connect with YooKassa," enter the Shop ID and click "Save."

To connect the QIWI payment system, go to the service settings in the "Other Settings" tab. In the field opposite "Connect with QIWI Wallet," enter the Shop ID and click "Save."

Step 3. Enter Your Purchase Information

In the "Current item" tab, fill in the "Amount" field, the product name, and the variable-buyer's ID. The identifier can be the number of the payer's agreement or an email address.

Step 4. Customize the Button’s Appearance

In the "Component settings," you can customize the appearance of the button. You can set the background color, padding, placement, height, and contour.

How to Send a Successful Payment Webhook

You can also send webhooks to your system notifying that the users have successfully paid for your products.

Go to "Account Settings" in the "API" tab. Under the “Successful payment webhooks” section, click Create Webhook.

Paste the URL you want to send the event to.

An example of the webhook structure you can receive:

{
  "timestamp": 1644590834,
  "version": "1.0",
  "event": "payment_order",
  "order": {
    "totalCost": 12,
    "status": 200,
    "customerName": "User",
    "service": 2,
    "paymentMethodType": 7,
    "variables": [
      {
        "valueType": 1,
        "name": "String",
        "value": "Hello World"
      },
      {
        "valueType": 2,
        "name": "Number",
        "value": "55684213"
      },
      {
        "valueType": 3,
        "name": "Date",
        "value": "2022-02-25"
      },
      {
        "valueType": 5,
        "name": "Phone",
        "value": "+38063456228"
      },
      {
        "valueType": 6,
        "name": "Email",
        "value": "user@sendpulse.com"
      },
      {
        "valueType": 7,
        "name": "Link",
        "value": "http://sendpulse.com"
      }
    ],
    "number": 1618,
    "currency": "BRL",
    "contactId": "7a505f4293dffcd7100f8f0004214892e4cf5618307908edf465042075d5c30",
    "updatedAt": "2022-02-11T14:47:14+00:00",
    "type": 2,
    "id": "a3704313-8c0b-0000-b195-c6b84242f0e2",
    "createdAt": "2022-02-11T14:47:13+00:00",
    "description": "Apple MercadoPago"
  }
}
    Rate this article about "How to Add a Payment Button to an Email"

    User Rating: 4 / 5

    Popular in Our Blog

    Try SendPulse today for free