Nút thanh toán Sọc tùy chỉnh sẽ không hoạt động trên thiết bị di động

Question

Tôi hiện đang tích hợp Sọc vào trang web và gặp phải sự cố với tích hợp thanh toán tùy chỉnh.

Tôi đã làm theo hướng dẫn tích hợp tùy chỉnh trên Stripe website và hoạt động tốt trên máy tính để bàn, nhưng tiếc là không có gì trên thiết bị di động.

Tôi đã có một handler trong jQuery mà cháy khi nút tùy chỉnh của tôi được nhấp, và nó chạy handler.open({…}), theo các tài liệu, nhưng lỗi JavaScript sau đây được đăng:

TypeError: 'undefined' is not an object (evaluating '(s=this.frame).focus') - checkout.js:2:21656 

Bất kỳ ý tưởng?

Chỉnh sửa: Sau nhiều lần phát xung quanh, tôi phát hiện ra rằng nó không khởi chạy được trong iOS 7 nếu có sự chậm trễ lớn hơn khoảng 1 giây cho cuộc gọi.

Ví dụ, các công việc sau:

setTimeout(function(){stripe_payment();}, 1000); 

Và sau đây không:

setTimeout(function(){stripe_payment();}, 2000); 

Trong ví dụ trên, stripe_payment() bộ lên và kêu gọi xử lý. Như đã đề cập ban đầu, cùng một ảnh hưởng có thể xảy ra khi gọi trình xử lý sau cuộc gọi AJAX (có thể mất quá nhiều thời gian). Nó cũng đáng chú ý rằng ngay cả một sự chậm trễ 5 giây trên các trình duyệt máy tính để bàn hoạt động tốt.

Answer 1

Điều này là do this.frame không xác định. Trong checkout.js sọc của, this.frame là thực sự thiết lập ngay trước khi lỗi:

this.frame = window.open(this.fullPath(), "stripe_checkout_tabview") 

Vấn đề xảy ra vì window.open thất bại. Điều này là do trình chặn bật lên của trình duyệt; window.open chỉ có thể được gọi thành công từ một số trình xử lý sự kiện (như nút bấm). Nếu bạn đang gọi nó từ một thời gian chờ (đủ dài), nó có thể thất bại.

Bạn cần gọi số handler.open({…}) trực tiếp từ sự kiện nhấp của nút. Trong trường hợp bạn đang gọi nó từ kết quả của một yêu cầu AJAX, bạn sẽ cần phải cấu trúc lại mã của bạn để điều này là không cần thiết.