Создание формы оплаты PayPal

Хотя это может иметь некоторые проблемы , PayPal предоставляет очень простой способ принимать платежи на веб-сайте. И с небольшой настройкой вы можете легко превратить кнопку PayPal «Купить сейчас» в форму, где пользователь указывает, сколько он хотел бы заплатить и за что он платит.

Как это устроено

PayPal делает это очень просто, предоставляя кнопки «Купить сейчас», которые вы, вероятно, видели повсюду. По сути, когда вы видите одну из этих кнопок, это действительно кнопка отправки в форме HTML со всеми полями формы, скрытыми . Это хорошо для случаев, когда у вас есть установленная цена и заданная позиция, но что, если вы хотите, чтобы пользователь указал, сколько они платят и за что платят.

Например, если вы добавляете форму оплаты на свой сайт фрилансера, вам нужно, чтобы клиент ввел номер своего счета и сумму, которую он желает заплатить. Это легко сделать, изменив поля <input> со скрытых на текстовые и убрав значения по умолчанию, чтобы пользователь мог их заполнить. Итак, начнем.

Шаг 1

Первое, что нам нужно, это страница, на которую можно вернуться после транзакции. В моем примере я создаю форму пожертвования для NETTUTS, поэтому я создал эту страницу подтверждения оплаты .

Шаг 2

Затем мы войдем в нашу учетную запись PayPal и перейдем на вкладку Merchant Services . Внизу внизу справа вы увидите ссылку с надписью Buy Now Buttons , выполните ее и перейдите к форме для создания одной из этих кнопок.

Заполните форму, в поле Идентификатор товара просто введите число 1 и используйте аналогичные фиктивные цифры для Названия товара и его цены. Мы изменим их в коде позже. Убедитесь, что вы НЕ шифруете кнопку. Остальные поля (вес и т. Д.) Можно оставить пустыми.

Шаг 3

Вот код, который дает мне PayPal. Как видите, кнопка на самом деле является <form&rt; элемент, который использует кнопку отправки изображения. Самое главное, мы можем изменить любой из этих скрытых. поля ввода для фактических текстовых полей, просто изменив слово, скрытое для текста .

Это будет означать, что, например, вместо указания значения суммы, равного 9,00, мы можем позволить пользователю ввести значение, которое он желает заплатить. Аналогично, item_name также может быть пользовательским вводом.

Вот список полей, которые вы хотите изменить:

• Номер предмета
  Значение, которое вы вводите в это поле, появляется, когда пользователь заходит в PayPal и нажимает стрелку вниз для получения дополнительной информации об их покупке (это можно увидеть, введя некоторую информацию в тестовой форме ниже).
• Бизнес
  Это поле предназначено для оплаты счета PayPal. Убедитесь, что он установлен для вашей учетной записи. Тот, который я использую, предназначен для аккаунтов [@] freelanceswitch.com (который связан с нашим родственным сайтом FreelanceSwitch).
• Код валюты
  Это довольно просто. При создании кнопки «Купить сейчас» вы можете выбрать различные параметры для этого параметра. Если по какой-либо причине вы захотите, вы можете также изменить это на элемент <select> и позволить своему пользователю выбирать, в какой валюте платить.
• Имя элемента
  Поле item_name — это то, где ваш пользователь описывает, за что он платит. В приведенном ниже примере формы я использовал поле выбора, чтобы позволить пользователю выбирать, на что он жертвует. Вы также можете легко изменить его на текстовое поле и позволить пользователю что-то набирать.
• Количество
  Единственное, что следует отметить здесь, это то, что если пользователь введет что-либо, кроме числа, здесь, PayPal вернет ошибку, поэтому вы можете использовать некоторый Javascript для проверки этого поля и убедиться, что это число — хотя это будет целый другой учебник. Поэтому вместо формы для примера я просто написал знак $ перед текстовым полем, надеясь, что это сделает его более понятным.

Шаг 4

Вы могли заметить, что нет места для обратного URL. К счастью, в предыдущей версии формы кнопки «Купить сейчас» раньше было, и значение все еще работает. Вам просто нужно добавить эту строку в форму (заменив, конечно, соответствующий обратный URL!).

Шаг 5

Поскольку эта кнопка PayPal довольно уродлива, я также собираюсь вернуться к обычной кнопке отправки. Для этого мы просто меняем элемент <input type='image'> на обычный элемент <input type='submit'> , например:

Шаг 6

Так что у вас есть это. В приведенном выше несколько глупом примере я использовал два поля <select> . Конечно, вы можете использовать обычные текстовые поля или любую комбинацию. Вы даже можете пропустить поля, например, в моем примере не обязательно указывать item_number и item_name.

Если вы заполните форму и нажмете «Оплатить», то увидите, где в PayPal отображаются три входа — не беспокойтесь, вам не нужно платить!

Вот последний код, который я использовал: