Membuat Sebuah Formulir Pembayaran PayPal

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Meskipun bisa memili beberapa isu. PayPal menyediakan cara yang sangat sederhana untuk membuat pembayaran langsung dari situsmu. Dan dengan sedikit gubahan kamu dapat dengan mudah mengubah tombol "Beli Sekarang" PayPal menjadi sebuah formulir di mana pengguna bisa menspesifikasikan sebanyak apa yang mereka ingin bayar dan untuk apa mereka membayar.

Cara Kerjanya

PayPal membuat melakukan hal ini menjadi sangat mudah dengan menyediakan tombol "Beli Sekarang" yang mungkin telah kamu lihat di beberapa tempat. Pada dasarnya saat kamu melihat tombol ini. Sebenarnya dia adalah sebuah tombol submit dalam bentuk HTML dengan semua field yang disembunyikan. Ini tidak masalah ketika kamu telah menyetel harga dan barang. Tapi bagaimana jika kamu ingin menspesifikasikan seberapa banyak yang akan mereka bayar, dan apa yang mereka bayar.

Contohnya, jika kamu menambahkan sebuah formulir pembayaran to situs bekerja lepas maka kamu ingin klienmu menulis di tagihan mereka angka jumlah yang ingin mereka bayarkan. Hal ini bisa diselesaikan dengan mudah dengan mengganti field <input> dari hidden menjadi text sehingga pengguna dapat mengisikannya. Mari kita mulai.

Langkah 1

Pertama, yang kita butuhkan adalah sebuah halaman untuk kembali setelah transaksi. Dalam contoh saya, saya membuat sebuah formulir donasi untu NETTUTS. Sehingga aku membuat halaman Konfirmasi Pembayaran ini.

Langkah 2

Selanjutnya, masuk ke akun PayPal dan klik tab Layanan Penjual. Dibawah kanan kamu akan melihat sebuah link yang mengatakan Buy Now Buttons. Ikuti terus dan kamu akan dapat membuat tombol tersebut.

Lengkapi formulirnya, dibawah ID barang tulis dan angka 1, dan gunakan nomor-nomor palsu yang sesuai untuk Item Name dan Price. Kita akan mengganti kodenya nanti. Pastikan kamu TIDAK mengenskripsi tombolnya. Sisanya bisa dibiarkan kosong.

Langkah 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>

Ini adalah kode yang PayPal berikan kepadaku. Seperti yang dapat kamu lihat bahwa faktanya sebuah elemen <form&rt; menggunakan sebuah tombol peng-submit gambar. Yang paling penting kita dapat mengubah semua darinya yang tersembunyi. Ubah input fields menjadi actual text dengan cara mengganti kata hidden menjadi text.

Ini artinya bahwa pada contoh tersebut, daripada menspesifikasikan nilai amount menjadi 9.00, kita mengizinkan pengguna untuk menulis sendiri jumlah yang mereka ingin untuk bayar. Sama dengan item_name yang bisa disikan oleh pengguna.

Berikut adalah daftar bagian yang menarik untuk diubah:

Item Number
Nilai yang kamu masukkan disini akan muncul ketika pengguna menuju ke PayPAl dan menekan panah untuk detil lebih lanjut di pembelian mereka ( kamu bisa melihatnya dengan memasukkan beberapa informasi di formulir berikut )
Business
Bagian ini untuk akun PayPal yang akan dibayarkan/ Pastikan bahwa itu adalah akunmu. Yang saya gunakan adalah yang untuk akun [@] freelanceswitch.com (yang saya hubungkan dengan kakak dari situs FreelanceSwitch)
Currency Code
Yang ini cukup jelas. Ketika membuat tombol beli sekarang kamu bisa memilih opsi yang berbeda-beda untuk bagian ini. Jika untuk suatu alasan kamu ingin, kamu juga dapat mengganti ini menjadi <select> dan membiarkan pengguna memilih mata uang yang ingin digunakan untuk membayar.
Item Name
Bagian item_name adalah bagian dimana pengguna menjelaskan untuk apa mereka membayar. Pada contoh formulir di bawah saya menggunakan sebuah select box untuk membiarkan pengguna memilih kepada apa dia berdonasi. Kamu bisa dengan mudah menggantinya menjadi kolom teks dan membiarkan pengguna mengetik sesuatu ke dalamnya.
Amount
Hal yang perlu diperhatikan adalah bahwa pengguna mengetik apapun selain angka maka PayPal akan memunculkan sebuah error, sehingga kamu mungkin ingin menggunakan Javascript untuk mengvalidasi bagian ini hanya diisi dengan angka (Walaupun itu akan menjadi sebuah tutorial sendiri) Jadi daripada begitu, dalam contoh saya hanya menulikan tanda $ sebelum kolom teks, berharap bahwa itu akan menjelaskan sedikit kepada pengguna.

Tahap 4

Kamu mungkin menyadari bahwa disini tidak ada ruang untuk mengembalikan sebuah URL. Untungnya di versi sebelumnya dari tombol beli sekarang, dulu sempat ada, dan sampai sekarang masih bekerja. Caranya cukup dengan menambahkan baris berikut ke formulismu ( menambahkan URL yang tepat pastinya! ).

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

Tahap 5

Semenjak tombok beli sekarang PayPal cukup jelek, maka saya berusaha mengembalikannya ke tombol submit yang biasa. Untuk melakukannyha cukup dengan mengganti <input type='image'> menjadi <input type='submit'> seperti berikut:

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

Tahap 6

Buat donasi untuk NETTUTS
Isi formulir berikut untuk mengirim beberapa dolar kepada tutorial favoritmu:

Jadi itulah. Dalam contoh yang bodoh tersebut yang menggunakan dua <select>. Kamu bisa menggunakan teks biasa atau kombinasi apapun. Bahkan kamu bisa membiarkannya kosong, contohnya kita tidak harus memiliki item_number dan item_name di contoh saya.

Jika kamu mengisikan formulir dan menekan tombol Bayar., maka kamu akan melihat dimana 3 input tersebut muncul di PAyPal ( jangan khawatir, kamu tidak benar-benar perlu membayar! )

Ini kode akhir yang saya gunakan:



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