Cách sử dụng tiện ích nút Stripe

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 Stripe là gì ?

Tiện ích Stripe Button (Nút Stripe) trong Elementor là một công cụ giúp bạn tích hợp thanh toán Stripe trực tiếp vào trang web của mình thông qua một nút bấm. Điều này cho phép khách hàng thực hiện các giao dịch mua hàng một cách nhanh chóng và an toàn.

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

I. Nội dung (Content)

Đây là nơi bạn cấu hình thông tin sản phẩm và chi tiết thanh toán.

A. Pricing & Payments (Định giá & Thanh toán)

• Product Name (Tên sản phẩm): Nhập tên của sản phẩm hoặc dịch vụ mà khách hàng sẽ mua thông qua nút này. Đây là tên sẽ xuất hiện trong hóa đơn thanh toán và quản lý giao dịch của Stripe.
• Currency (Tiền tệ): Chọn loại tiền tệ mà bạn muốn khách hàng thanh toán (ví dụ: USD, VND, EUR). Bạn sẽ thấy cảnh báo “Please make sure to meet Stripe’s guidelines regarding minimum charge amounts” (Vui lòng đảm bảo đáp ứng các hướng dẫn của Stripe về số tiền tính phí tối thiểu).
• Product Price (Giá sản phẩm): Nhập giá của sản phẩm hoặc dịch vụ.
• Quantity (Số lượng): Đặt số lượng sản phẩm mặc định mà khách hàng sẽ mua. Trong hình ảnh, giá trị là “1”.
• Shipping Price (Giá vận chuyển): Nhập chi phí vận chuyển nếu có.
• Tax Rate (Thuế suất): Chọn hoặc cấu hình thuế suất áp dụng cho giao dịch này. Thông báo “To manage these options, go to your Stripe account > Products > Tax Rates” (Để quản lý các tùy chọn này, hãy truy cập tài khoản Stripe của bạn > Sản phẩm > Thuế suất) chỉ ra nơi bạn có thể thiết lập thuế trong Stripe.

B. Button (Nút bấm)

• Phần này cho phép bạn tùy chỉnh văn bản trên nút và có thể là biểu tượng của nút thanh toán.
  • Text (Văn bản): Văn bản hiển thị trên nút (ví dụ: “BUY NOW”).
  • Icon (Biểu tượng): Thêm một biểu tượng vào nút.

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

• Phần này có thể chứa các tùy chọn bổ sung liên quan đến chức năng của nút Stripe, chẳng hạn như chuyển hướng sau khi thanh toán thành công, hoặc các cài đặt nâng cao khác.

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

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

A. Button (Nút bấm)

• Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, kiểu chữ cho văn bản trên nút.
• Text Color (Màu chữ): Màu của văn bản trên nút.
• Background Type (Loại nền): Chọn loại nền cho nút (màu sắc, gradient, hình ảnh).
• Color (Màu sắc): Màu nền của nút.
• Border Type (Loại đường viền): Thêm đường viền cho nút (Solid, Double, Dot, Dash, Groove).
• Border Radius (Bán kính bo tròn): Bo tròn các góc của nút.
• Box Shadow (Bóng đổ): Thêm hiệu ứng bóng đổ cho nút.
• Padding (Khoảng đệm): Khoảng đệm bên trong nút, giữa văn bản và đường viền.

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 Stripe Button.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Stripe Button 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 Stripe Button.
• 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 Stripe Button 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 Stripe Button.

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 Stripe Button 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.