How to Add a Payment System to Your Website

With the SendPulse landing page builder, you can add a payment button to your website to implement one-click payments for your products.

After clicking on the button, users will be redirected to a payment page, where they enter their card data and pay for the goods. The money will be transferred to the account of your payment system.

Place the "Payment" widget right after the product description in the desired part of the template.

Enter the name of your product in the right panel. It will be displayed on the payment page of your payment system and the receipt.

Select Your Payment Method

Select a payment method and enter your product’s price.

Set up Integrations with Other Services

Add Deals to Your CRM

You can also enter the name of your deal, select the pipeline where your automatically created deals will be saved, and select the status of your deal based on its payment status. By default, your deal will be added to the first stage of your first pipeline.

Add Contacts to Email Service

You can also add those who have made a payment to your mailing list to send them successful payment notifications and other messages. To do this, activate the "Add to mailing list" element and select the necessary mailing list.

Set up a Payment Form

Customize Your Form Fields

Add new form fields or customize your existing ones by clicking on the pencil icon.

Note that the "Email" field is a required field – you can not delete it.

Select the field type:

Entry field is used to enter a user’s text that is up to 255 characters. You can also select the predefined fields like "Name," "Phone," "Address," "Date," and "URL."

Checkbox is used when there is a list of options from which a user can select any number: none, one, or several. If the checkbox is checked, the value "yes" is passed to the service variable. If unchecked, the value "no" is passed to the service variable.

Radio buttons are used to select one from several options. You need to select the value that will be passed to the variable in the service.

Enter the name of the field and a hint for the field in the placeholder.

Check if the field is required. If it is required, the user data will not be sent until they fill in all the required fields.

Save Field Values to Variables

The data of those who have paid for your product will be transferred to the selected variables.

Select the variable in your email service you want to save the field value to.

Note that all field values are passed to a variable of the "String" type. The values of the "Email" and "Phone" fields are saved in the standard system variables of email and phone.

Select which contact and deal fields in the CRM you want to save the field value to.

Customize the Appearance of Your Form

To edit your order form, click "Field styles."

You can hide field names and customize the appearance of your fields (borders and their color, text, background color, rounding, and size). 

On the left, you can see what your payment form will look like for a user who clicks Pay. Check the data you configured in the editing panel of the block: the name of your product and its price, and fields for entering customer contact data.

Configure Your Payment Button

Click on the pencil icon and go to your payment button edit menu. 

Enter your text and description to be displayed on the button. Select your button style: primary, secondary, or customizable and specify the size of the button.

How to View Payment History

You can also view and export your payment history as a CSV file in the “Account Settings” > “Accept Payments” tab. You will see payment details: username, product name, price, date of last status change, and payment status.

All payment statuses are given by the selected payment system. For more information, we recommend contacting the support of the payment system.

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"
  }
}

Last Updated: 15.03.2023