Cách sử dụng tiện ích nút bấm – PayPal Button

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích nút bấm PayPal là gì ?

Tiện ích Nút PayPal (PayPal Button) trong Elementor là một công cụ tiện lợi cho phép bạn thêm các nút thanh toán PayPal trực tiếp vào trang web của mình. Điều này giúp khách hàng dễ dàng mua sản phẩm, dịch vụ hoặc quyên góp mà không cần rời khỏi trang web của bạn.

3. Các bước sử dụng tiện ích nút bấm PayPal

I. Nội dung (Content)

Đây là nơi bạn cấu hình thông tin tài khoản PayPal, loại giao dịch và chi tiết mặt hàng.

A. Pricing & Payments (Giá & Thanh toán)

• PayPal Account (Tài khoản PayPal): Nhập địa chỉ email tài khoản PayPal của bạn. Đây là tài khoản mà tiền sẽ được gửi đến.
  • Thông báo: “Transactions made through your Paypal button will be registered under this account” (Các giao dịch được thực hiện qua nút Paypal của bạn sẽ được đăng ký dưới tài khoản này).
• Transaction Type (Loại giao dịch): Chọn loại giao dịch bạn muốn. Các tùy chọn phổ biến thường bao gồm:
  • Checkout (Thanh toán): Để bán sản phẩm/dịch vụ.
  • Buy Now (Mua ngay): Tương tự Checkout, nhưng thường dùng cho một mặt hàng đơn lẻ.
  • Add to Cart (Thêm vào giỏ hàng): Thêm mặt hàng vào giỏ hàng PayPal.
  • Donation (Quyên góp): Để nhận quyên góp.
• Item Name (Tên mặt hàng): Nhập tên của sản phẩm hoặc dịch vụ mà người dùng sẽ mua/quyên góp.
• SKU: Nhập mã SKU (Stock Keeping Unit) cho mặt hàng của bạn (tùy chọn, dùng để quản lý kho).
• Giá (Price): Nhập giá của mặt hàng.
• Currency (Tiền tệ): Chọn loại tiền tệ cho giao dịch (ví dụ: USD, VND).
• Quantity (Số lượng): Đặt số lượng mặc định của mặt hàng.
• Shipping Price (Giá vận chuyển): Nhập chi phí vận chuyển nếu có.
• Tax (Thuế): Nhập mức thuế áp dụng (ví dụ: một tỷ lệ phần trăm hoặc số tiền cố định).

B. Nút bấm (Button)

• Kích thước (Size): Chọn kích thước của nút (ví dụ: Nhỏ, Vừa, Lớn).
• Văn bản (Text): Tùy chỉnh văn bản hiển thị trên nút (ví dụ: “BUY NOW”, “Donate”, “Thanh toán”).
• Căn chỉnh (Alignment): Căn chỉnh nút (trái, giữa, phải).

C. Tùy chọn bổ sung (Additional Options)

• Các tùy chọn này có thể bao gồm:
  • Open in new window (Mở trong cửa sổ mới): Mở trang thanh toán PayPal trong một tab/cửa sổ trình duyệt mới.
  • Custom Success URL (URL thành công tùy chỉnh): Chuyển hướng người dùng đến một trang cụ thể sau khi thanh toán thành công.
  • Custom Cancel URL (URL hủy tùy chỉnh): Chuyển hướng người dùng đến một trang cụ thể nếu họ hủy giao dịch.

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của nút PayPal.

A. Button (Nút)

• Màu nền (Background Color): Màu nền của nút.
• Màu văn bản (Text Color): Màu chữ trên nút.
• Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho văn bản trên nút.
• Border Type (Loại đường viền): Thêm đường viền cho nút.
• Border Radius (Bán kính bo tròn): Bo tròn góc của nút.
• Box Shadow (Bóng đổ): Thêm bóng đổ cho nút.
• Padding (Khoảng đệm): Khoảng đệm bên trong nút.

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Nút PayPal.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Nút PayPal với các phần tử khác xung quanh.
• Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
• Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Nút PayPal.
• Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
• Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.

2. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.

3. Hiệu ứng chuyển động (Motion Effects):

• Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Nút PayPal khi trang được tải.
• Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
• Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
• Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.

4. Nền (Background):

• Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Nút PayPal.

5. Đường viền (Border):

• Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.

6. Mặt nạ (Mask):

• Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.

7. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Nút PayPal trên các loại thiết bị khác nhau nếu cần.

8. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.

9. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.