Tạo Form thanh toán qua PayPal

() translation by (you can also view the original English article)

Mặc dù có một số vấn đề, nhưng PayPal cung cấp một cách đơn giản để tạo thanh toán trên trang web. Và với một chút tinh chỉnh, bạn có thể dễ dàng biến nút "Buy Now" của PayPal thành hình thức mà người dùng có thể chỉ định số tiền họ định thanh toán.

Cách thức làm việc

PayPal thực hiện điều này rất dễ dàng bằng cách cung cấp nút "Buy Now" mà bạn có thể nhìn thấy. Về cơ bản, khi bạn nhìn thấy một trong những nút này, nó thực sự là nút submit trên dạng HTML với tất cả các trường được thiết lập để ẩn đi. Điều này là khá tốt khi bạn thiết lập một mức giá và món đồ, trừ phi bạn muốn người dùng xác định số tiền mà họ muốn thanh toán.

Ví dụ, nếu bạn đang thêm một hình thức thanh toán vào trang web làm việc tự do. Sau đó, bạn muốn khách hàng nhập số hóa đơn của họ và số tiền họ muốn trả tiền. Điều này dễ dàng được thực hiện bằng cách thay đổi trường <input> từ hidden thành text và theo mặc định người dùng có thể điền chúng vào . Hãy bắt đầu nào.

Bước 1

Trước tiên, chúng ta cần một trang để trở về sau khi giao dịch. Trong ví dụ của tôi, tôi là tạo ra một hình thức quyên góp cho NETTUTS, vì vậy tôi tạo ra trang xác nhận thanh toán - Payment Confirmation.

Bước 2

Tiếp theo, chúng ta đăng nhập vào tài khoản PayPal và nhấp vào tab Merchant Services. Xuống phía dưới bên phải, bạn sẽ thấy một nút liên kết Buy Now Buttons, thông qua đó và bạn nhận được một hình thức để tạo một trong các nút này.

Điền vào mẫu, dưới mục ID chỉ cần gõ số 1, và sử dụng tương tự số giả cho mục Item Name và Price. Chúng ta sẽ thay đổi những code này sau. Đảm bảo bạn KHÔNG tạo nút mã hóa. Những trường còn lại (trọng lượng ...) có thể để trống.

Bước 3

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="accounts@freelanceswitch.com">
    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="1">
    <input type="hidden" name="amount" value="9.00">
    <input type="hidden" name="no_shipping" value="0">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="lc" value="AU">
    <input type="hidden" name="bn" value="PP-BuyNowBF">
    <input type="image" src="https://www.paypal.com/en_AU/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>

Đây là code mà PayPal cho tôi. Như bạn có thể thấy nút thực tế là <form&rt; thành phần sử dụng nút submit như một ảnh. Quan trọng nhất, chúng ta có thể thay đổi bất kỳ những thành phần ẩn này. Những trường input để nhập văn bản đơn giản thực hiện bằng cách thay đổi từ hidden thành text.

Điều này có nghĩa rằng, chẳng hạn thay vì xác định giá trị số tiền lên tới 9,00, chúng ta có thể cho phép người dùng nhập vào giá trị họ muốn thanh toán. Tương tự như vậy mục item_name cũng có thể được người dùng nhập vào.

Dưới đây là những trường bạn có thể quan tâm thay đổi:

Item Number
Giá trị bạn đặt trong trường này hiển thị khi người dùng truy cập vào PayPal và nhấp mũi tên xuống để thêm chi tiết về việc mua hàng của họ (bạn có thể xem nó bằng cách nhập một số thông tin để kiểm tra mẫu dưới đây).
Business
Trường này là dành cho các tài khoản PayPal trả tiền. Hãy chắc chắn thiết lập nó vào tài khoản của bạn. Tôi sử dụng tài khoản [@] freelanceswitch.com (đã được liên kết với trang web FreelanceSwitch).
Currency Code
Điều này là khá dễ dàng. Khi tạo nút Buy Now, bạn có thể chọn các tùy chọn khác nhau cho cài đặt này. Nếu vì một số lý do bạn muốn, bạn cũng có thể thay đổi tùy chọn này thành <select> và cho phép người dùng lựa chọn đơn vị tiền tệ để thanh toán.
Item Name
Trường item_name là một trong những trường mà người dùng của bạn mô tả họ trả tiền cho cái gì. Trong mẫu ví dụ dưới đây, tôi đã sử dụng một tùy chọn để cho phép người dùng lựa chọn những gì họ đang quyên góp. Bạn có thể dễ dàng thay đổi nó thành trường văn bản và cho phép người dùng nhập vào.
Amount
Điều duy nhất cần lưu ý ở đây là, nếu người dùng nhập hơn một số trong PayPal thì sẽ báo lỗi, vì vậy bạn có thể muốn sử dụng một số Javascript để xác nhận trên trường này và đảm bảo rằng một con số - dù đó là một bài hướng dẫn. Vì vậy, thay vì ví dụ của tôi, tôi đã chỉ viết một dấu $ trước trường văn bản, hy vọng rằng sẽ giải thích rõ ràng hơn.

Bước 4

Bạn có thể thấy rằng không có khoảng trống cho một URL quay lại. Thật may mắn trong phiên bản trước nút Buy Now có thể sử dụng và hoạt động tốt. Đơn giản, bạn chỉ cần thêm dòng này cho biểu mẫu (đương nhiên là để thay thế cho URL quay lại).

1
2	<input type="hidden" name="return" value="https://net.tutsplus.com/payment-complete/">

Bước 5

Vì nút PayPal khá xấu, nên tôi đã chuyển thành nút gửi thường xuyên là submit. Để thực hiện điều này, đơn giản chúng ta chỉ cần thay đổi các thành phần <input type='image'> thành <input type='submit'>, trông như thế này:

1
2	<input type="submit" value="Pay with PayPal!">

Bước 6

Tạo quyên góp cho NETTUTS
Điền vào biểu mẫu và gửi cho chúng tôi một vài đô la tùy theo ý của bạn theo hướng dẫn bên dưới:

Như vậy là đã hoàn thành. Trong ví dụ đơn giản trên, tôi đã sử dụng hai trường <select>. Tất nhiên bạn có thể sử dụng các trường văn bản hay bất kỳ sự kết hợp thực tế nào. Thậm chí, bạn có thể bỏ qua các trường, chẳng hạn không thực sự cần thiết như trường item_number và item_name trong ví dụ của tôi.

Nếu bạn điền vào biểu mẫu và bấm thanh toán - Pay, bạn sẽ thấy ba sự lựa chọn xuất hiện trong PayPal - Đừng lo lắng thật sự bạn không cần phải trả tiền!

Dưới đây là code cuối cùng tôi đã sử dụng:



<p><big><b>Make a Donation to NETTUTS</b></big><br />
Fill out the form and send us a few dollars for your favourite tutorial:</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="accounts@freelanceswitch.com">
    <strong>Donation / Contribution? </strong><br />
    <select name="item_name">
      <option value="Donation">Donation</option>
      <option value="Contribution">Contribution</option>
    </select>

    <strong>Which tutorial are you donating for?</strong><br />   
    <select name="item_number">
      <option value="PayPal Form Tutorial">The PayPal Form Tutorial</option>
      <option value="Amazon S3 Tutorial">The Amazon S3 Tutorial</option>
      <option value="Some Other Tutorial">Some Other Tutorial</option>
    </select>

    <strong>How much do you want to donate?</strong><br />
    $ <input type="text" name="amount">

    <input type="hidden" name="no_shipping" value="0">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="lc" value="AU">
    <input type="hidden" name="bn" value="PP-BuyNowBF">
  <input type="hidden" name="return" value="https://net.tutsplus.com/payment-complete/">

	<br /><br />
    <input type="submit" value="Pay with PayPal!">

</form>