Hồ Bảo Huy - Chuyên Gia SEO - Chuyên Gia Marketing » học php

Tạo bộ nút thanh toán bằng PayPal đẹp mắt, ấn tượng

admin — Tue, 30 Sep 2014 05:38:08 +0000

Có 5 loạt nút PayPal mà bạn có thể tạo được: Buy Now, Add to Cart, Donate, Buy Gift Certificate và Subscribe. Ứng với mỗi loại nút là một chức năng và công dụng khác nhau. Trong bài viết này mình chỉ hướng dẫn cho bạn cách tạo nút Buy Now trên PayPal, còn mấy loại nút khác thì bạn làm tương tự.

Để tiến hành làm việc này, bạn vào địa chỉ trang thông tin Buttons for single purchases, sau đó bạn tìm đường link với chữ là Create your button now, bạn click chuột vào đó để chuyển sang trang mới.

Bên trong trang mới này sẽ có 3 bước để bạn thực hiện, tuy nhiên vì đây là bạn chưa đăng nhập vào hệ thống của PayPal nên chỉ điền thông tin ở bước thứ nhất mà thôi. Bạn điền thông tin như hình ảnh mình gửi minh họa bên dưới, bao gồm những thông tin về: tên sản phẩm, giá sản phẩm, tiền vận chuyển, thuế và địa chỉ email người nhận tiền.

Sau khi hoàn thành xong, bạn kéo xuống dưới và nhấn vào nút Create Button, hệ thống sẽ chuyển bạn sang trang mới có chứa mã HTML để bạn lấy về chèn vào website hoặc bạn có thể lấy chỉ đường link mà thôi.

Vậy là bạn đã có được 1 nút bán hàng đơn giản, tuy nhiên nếu bạn cần xác minh giao dịch có thành công hay không thì bạn cũng có thể chỉnh sửa lại thông tin của code như sau:

<form<br />
 action=”https://www.sandbox.paypal.com/cgi-bin/webscr” method=”post”<br />
target=”_top”><br />
    <input type=”hidden” name=”cmd” value=”_xclick”><br />
    <input type=”hidden” name=”business”<br />
value=”skylarkcob-facilitator@hotmail.com”><br />
    <input type=”hidden” name=”lc” value=”US”><br />
    <input type=”hidden” name=”item_name” value=”TestVIP”><br />
    <input type=”hidden” name=”button_subtype” value=”services”><br />
    <input type=”hidden” name=”no_note” value=”0″><br />
    <input type=”hidden” name=”currency_code” value=”USD”><br />
    <input type=”hidden” name=”tax_rate” value=”0.000″><br />
    <input type=”hidden” name=”shipping” value=”0.00″><br />
    <input type=”hidden” name=”bn”<br />
value=”PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest”><br />
    <table><br />
        <tr><br />
            <td><br />
                <input type=”hidden” name=”on0″<br />
value=”Package”>Package<br />
            </td><br />
        </tr><br />
        <tr><br />
            <td><br />
                <select name=”os0″><br />
                    <option value=”Monthly Membership”>Monthly<br />
Membership $10.00 USD</option><br />
                    <option value=”Life Membership”>Life<br />
Membership $100.00 USD</option><br />
                </select><br />
            </td><br />
        </tr><br />
    </table><br />
    <input type=”hidden” name=”currency_code” value=”USD”><br />
    <input type=”hidden” name=”option_select0″ value=”Monthly<br />
Membership”><br />
    <input type=”hidden” name=”option_amount0″ value=”10.00″><br />
    <input type=”hidden” name=”option_select1″ value=”Life<br />
Membership”><br />
    <input type=”hidden” name=”option_amount1″ value=”100.00″><br />
    <input type=”hidden” name=”option_index” value=”0″><br />
    <input type=”hidden” name=”return”<br />
value=”http://localhost/paypal/success.php”><br />
    <input type=”hidden” name=”cancel_return”<br />
value=”http://localhost/paypal/cancel.php”><br />
    <input type=”hidden” name=”page_style” value=”TestLocal”><br />
    <input type=”image”<br />
src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif”<br />
border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay<br />
online!”><br />
    
src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” width=”1″<br />
height=”1″><br />
</form>

<table>

<tr>

<td>

<input type=“hidden”name=“on0″value=“Package”>Package

</td>

</tr>

<tr>

<td>

<option value=“Monthly Membership”>Monthly Membership$10.00USD</option>

<option value=“Life Membership”>Life Membership$100.00USD</option>

</select>

</td>

</tr>

</table>

</form>

Bên trên là form mẫu mình tạo ra với mục đích cho người dùng mua tài khoản VIP với 2 gói là Monthly giá $10 và Life giá $100. Bạn chỉnh sửa lại thông tin cho phù hợp với trang của bạn đang làm.

<input type=”hidden” name=”return” value=”http://localhost/paypal/success.php”>

1	<input type=“hidden”name=“return”value=“http://localhost/paypal/success.php”>

Bạn chú ý tới dòng này, đây là địa chỉ trang xử lý code khi giao dịch thành công. Ví dụ code bên trên, nếu người dùng mua VIP 1 tháng và họ đã giao dịch thành công thì mình sẽ cập nhật lại user group cho họ thành VIP Member.

<input type=”hidden” name=”cancel_return” value=”http://localhost/paypal/cancel.php”>

1	<input type=“hidden”name=“cancel_return”value=“http://localhost/paypal/cancel.php”>

Dòng này thì để cấu hình trang hiển thị khi người dùng hủy thanh toán, nếu bạn cảm thấy cái này không cần thiết thì có thể bỏ qua.

Bạn cũng có thể thay đổi cái hình ảnh của nút thanh toán bằng một hình ảnh khác trên trang lưu trữ hình ảnh của PayPal. Bạn hoàn toàn có thể thay thế hình này bằng một hình ảnh bạn tự tạo ra, dù sao thì tự lấy hình mình làm cũng ưng ý hơn là hình ảnh mặc định của PayPal. Chúc bạn thành công.

Hưỡng dẫn cách tạo tài khoản PayPal Sandbox test code trước khi áp dụng

admin — Tue, 30 Sep 2014 05:36:47 +0000

Mình đã viết bài hướng dẫn tạo nút thanh toán đơn giản bằng PayPal nhưng chưa giới thiệu cho bạn làm cách nào để test thử chức năng cái nút này hoạt động như thế nào. Bài viết này mình sẽ hướng dẫn cho bạn cách tạo tài khoản PayPal Sandbox để chạy thử code trước khi đưa nó vào hoạt động thật trên trang chính.

Có 2 cách bạn có thể tạo được tài khoản Sandbox, bạn có thể vào trang PayPal Developer để đăng nhập và tạo cho mình một tài khoản. Mà tốt nhất thì nên tạo 2 tài khoản, một cái để test nhận tiền và một cái để test chuyển tiền.

Đối với trang PayPal Developer bạn có thể đăng nhập bằng tài khoản PayPal chính của mình hoặc có thể đăng ký một tài khoản mới tại trang Sign up for a business account.

Sau khi bạn đã có tài khoản PayPal và đăng nhập vào hệ thống dành riêng cho các developer, bạn nhìn vào thanh menu chính và vào trang Applications.

Tiếp tục nhìn sang menu bên trái và bạn sẽ thấy menu Sandbox accounts, hãy vào đó và nhấn vào nút Create Account để tạo thêm tài khoản mới. Bạn có thể tạo 2 hoặc 5 tài khoản gì tùy thích, mà nói chung chỉ cần 2 tài khoản là có thể sử dụng được rồi.

Cách thứ 2 là bạn có thể vào trang chủ PayPal sandbox để tạo tài khoản, giao diện và chức năng của trang Sandbox cũng giống như trang chủ của PayPal, tuy nhiêu giao dịch và tiền bạc trên sandbox chỉ để test, không sử dụng để mua bán thật được, và bạn có thể chuyển khoản hoặc nhận tiền thoải mái. Chúc bạn thành công.

Thiết kế giao diện cho WordPress với Font Awesome cực bắt mắt

admin — Tue, 30 Sep 2014 05:36:18 +0000

Nếu bạn muốn thiết kế giao diện WordPress mà không cần đến hình ảnh thì bài viết này mình sẽ hướng dẫn cho bạn cách làm như vậy. Font Awesome là một công cụ tuyệt vời để bạn tạo giao diện website, có hơn 400 icon cho bạn lựa chọn, chỉ cần tích hợp css và font vào là sử dụng, không cần đến javascript hoặc những cái gì cao siêu.

Trong bài viết hôm trước mình đã hướng dẫn cho bạn cách tích hợp Bootstrap vào WordPress, tuy nhiên với Bootstrap thì bộ icon hỗ trợ kèm theo chưa đầy đủ lắm. Công việc tích hợp Font Awesome cũng tương tự như vậy, bạn chỉ cần tải bộ font và css về, sau đó giải nén và đính kèm vào giao diện của WordPress để sử dụng.

Sau khi tải tập tin về máy tính, bạn giải nén và đổi tên thư mục thành font-awesome, tiếp đến copy nguyên thư mục này bỏ vào giao diện của bạn, sử dụng hàm sau để tích hợp Font Awesome.

function add_font_awesome() {<br />
    wp_register_style(‘font-awesome-style’, get_template_directory_uri() . ‘/lib/font-awesome/css/font-awesome.min.css’);<br />
    wp_enqueue_style(‘font-awesome-style’);<br />
}<br />
add_action(‘wp_enqueue_scripts’, ‘add_font_awesome’);

functionadd_font_awesome(){

wp_register_style(‘font-awesome-style’,get_template_directory_uri().‘/lib/font-awesome/css/font-awesome.min.css’);

wp_enqueue_style(‘font-awesome-style’);

}

add_action(‘wp_enqueue_scripts’,‘add_font_awesome’);

Nhớ là thay đổi đường dẫn cho phù hợp với tập tin trong giao diện. Sau khi hoàn thành xong thì bạn đã có thể sử dụng font một cách thoải mái. Cách sử dụng cũng cực kỳ dễ, bạn chỉ cần tìm icon ưng ý và sử dụng lại theo cú pháp sau:

<i class=”fa fa-wordpress”></i>

1	<iclass=“fa fa-wordpress”></i>

Xem thêm danh sách tất cả các icon hiện có của Font Awesome trên trang Font Awesome Icons.

Ngoài cách sử dụng trên, bạn có thể chỉnh sửa thuộc tính của css, nếu như các chức năng bạn không thêm được HTML code giống như ví dụ bên trên thì bạn áp dụng phương pháp này:

a.button-send:before {<br />
    font-family: ‘FontAwesome';<br />
    content: “\f1d9″;<br />
}

a.button–send:before{

font–family:‘FontAwesome’;

content:“\f1d9″;

}

Rất đơn giản và dễ sử dụng phải không nào. Thiết kế website theo phong cách hiện đại là phải gọn nhẹ và chạy nhanh, nếu giao diện bạn không có dùng hình ảnh thì dĩ nhiên sẽ chạy nhanh hơn so với giao diện có nhiều hình ảnh, đặc biệt là những hình nền có kích thước lớn. Chúc bạn thành công.