-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
1109 lines (795 loc) · 100 KB
/
Copy pathindex.html
File metadata and controls
1109 lines (795 loc) · 100 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<!-- Head tag -->
<head><meta name="generator" content="Hexo 3.9.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/favicon.ico" rel="icon">
<title>船长的技术博客</title>
<link rel="stylesheet" href="/css/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/highlight.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?542b4962c3c4035fce9071b7c665f0d2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97838175-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<div id="site" class="site">
<div id="sidebar" class="sidebar">
<header id="header" class="site-header">
<div class="site-branding">
<h1 class="site-title">
<a href="/images/avatar-small.png" class="avatar-circle"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/avatar-small.png" /></a>
<a href="/" rel="home">Troy's 博客</a></h1>
<p class="site-description">专注于Web开发，现在居住于成都. Happy Coding, Happy Life!</p>
<button class="secondary-toggle font-asesome-icon">Menu and widgets</button>
</div>
</header>
<div id="secondary" class="secondary">
<nav class="main-navigation">
<ul id="menu-demo-menu" class="nav-menu">
<li class="menu-item"><a href="/">首页</a></li>
<li class="menu-item"><a href="/archives">归档</a></li>
<li class="menu-item"><a href="/about">关于</a></li>
</ul>
</nav>
<aside class="widget">
<h3 class="widget-title">归档</h3>
<ul>
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2025/02/">二月 2025</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2024/12/">十二月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2024/01/">一月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/11/">十一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/07/">七月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">一月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">十二月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">五月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">二月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">十月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">五月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a><span class="archive-list-count">2</span></li></ul>
</ul>
</aside>
<aside class="widget">
<input id="local-search-input" type="search" class="search-field" placeholder="Search …" value="" name="s">
<div id="local-search-result" class="search-result">
</div>
</aside>
<aside class="widget">
<h3 class="widget-title">最新文章</h3>
<ul>
<li>
<a href="/2025/02/24/stripe-plugins-by-payaddons/">wordpress stripe 集成插件 powered by payaddons</a>
</li>
<li>
<a href="/2024/12/25/javascript-implement-sticky-with-help-ai/">JS实现一个复杂sticky效果</a>
</li>
<li>
<a href="/2024/01/27/indie-hacker-wordpress/">Indie hacker 新感</a>
</li>
<li>
<a href="/2022/11/27/stripe-express-summary/">wordpress 插件一年半赚$1500，还要坚持下去吗?</a>
</li>
<li>
<a href="/2022/07/31/how-to-get-aws-certified-solutions-architect-associate/">如何通过 AWS certified solution architect associate (SAA)</a>
</li>
</ul>
</aside>
<aside class="widget">
<h3 class="widget-title">标签云</h3>
<a href="/tags/Linux/" style="font-size: 11.67px;">Linux</a> <a href="/tags/No-SQL/" style="font-size: 10px;">No-SQL</a> <a href="/tags/ai/" style="font-size: 10px;">ai</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/alipay/" style="font-size: 10px;">alipay</a> <a href="/tags/aws/" style="font-size: 16.67px;">aws</a> <a href="/tags/certification/" style="font-size: 10px;">certification</a> <a href="/tags/cors/" style="font-size: 10px;">cors</a> <a href="/tags/css/" style="font-size: 11.67px;">css</a> <a href="/tags/devops/" style="font-size: 11.67px;">devops</a> <a href="/tags/elementor/" style="font-size: 10px;">elementor</a> <a href="/tags/express/" style="font-size: 10px;">express</a> <a href="/tags/finance/" style="font-size: 10px;">finance</a> <a href="/tags/github/" style="font-size: 13.33px;">github</a> <a href="/tags/hexo/" style="font-size: 13.33px;">hexo</a> <a href="/tags/http/" style="font-size: 10px;">http</a> <a href="/tags/https/" style="font-size: 15px;">https</a> <a href="/tags/javascript/" style="font-size: 11.67px;">javascript</a> <a href="/tags/js/" style="font-size: 13.33px;">js</a> <a href="/tags/jwt/" style="font-size: 10px;">jwt</a> <a href="/tags/misc/" style="font-size: 10px;">misc</a> <a href="/tags/mongo/" style="font-size: 10px;">mongo</a> <a href="/tags/netlify/" style="font-size: 10px;">netlify</a> <a href="/tags/node/" style="font-size: 10px;">node</a> <a href="/tags/payment/" style="font-size: 13.33px;">payment</a> <a href="/tags/react/" style="font-size: 10px;">react</a> <a href="/tags/s3/" style="font-size: 10px;">s3</a> <a href="/tags/serverless/" style="font-size: 10px;">serverless</a> <a href="/tags/ssl/" style="font-size: 10px;">ssl</a> <a href="/tags/stripe/" style="font-size: 20px;">stripe</a> <a href="/tags/travis-ci/" style="font-size: 10px;">travis-ci</a> <a href="/tags/web/" style="font-size: 11.67px;">web</a> <a href="/tags/web前端/" style="font-size: 18.33px;">web前端</a> <a href="/tags/wordpress/" style="font-size: 15px;">wordpress</a>
</aside>
</div>
</div>
<div id="content" class="site-content">
<main id="main" class="site-main" role="main">
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/2025-02-24-payaddons-overview.png" rel="gallery_cm7iqwoul000vj8pydf7g2e1u">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/2025-02-24-payaddons-overview.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2025/02/24/stripe-plugins-by-payaddons/" rel="bookmark">wordpress stripe 集成插件 powered by payaddons</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<hr>
<p>继Stripe Express 之后，去年又新增了三款Stripe 插件，所以理所当然的需要整合一下，然后就创建了 <a href="https://payaddons.com" target="_blank" rel="noopener">https://payaddons.com</a> 这个网站，希望能在branding 上提高产品知名度。</p>
<p><a href="https://payaddons.com" target="_blank" rel="noopener">https://payaddons.com</a> 是一个为 WordPress 用户提供 Stripe 支付集成解决方案的平台，旨在帮助网站所有者轻松接受多种支付方式，包括一次性和定期支付。该平台支持多种流行的 WordPress 工具，如 Elementor、Contact Form 7 和 WooCommerce，其产品设计简单易用，适合技术水平不同的用户。本报告将详细介绍 payaddons.com 的背景、产品功能、定价和支持，以及如何开始使用。</p>
<h2 id="平台背景与概述"><a href="#平台背景与概述" class="headerlink" title="平台背景与概述"></a>平台背景与概述</h2><p><a href="https://payaddons.com" target="_blank" rel="noopener">https://payaddons.com</a> 是一个专注于 Stripe 支付插件的公司，目标是为 WordPress 用户提供无缝的支付集成体验。通过其插件，用户可以在不需复杂编码的情况下，在网站上添加支付功能，覆盖从页面构建到电商商店的多种场景。平台强调易用性、安全性和灵活性，适合小型企业、自由职业者和非营利组织。</p>
<h2 id="产品详细介绍"><a href="#产品详细介绍" class="headerlink" title="产品详细介绍"></a>产品详细介绍</h2><h3 id="Elementor-Stripe-Payment"><a href="#Elementor-Stripe-Payment" class="headerlink" title="Elementor Stripe Payment"></a><a href="https://payaddons.com/elementor-stripe-payment" target="_blank" rel="noopener">Elementor Stripe Payment</a></h3><p>Elementor Stripe Payment 是为 Elementor 页面构建器设计的支付插件，允许用户通过拖放方式创建支付表单。以下是其主要功能：</p>
<ul>
<li>信用卡字段：用户可以在表单中直接输入信用卡信息。</li>
<li>支付元素字段：支持多种支付方式的综合字段。</li>
<li>Stripe 托管跳转：支付过程通过 Stripe 的安全页面完成，确保交易安全。</li>
<li>结账按钮：支持优惠券、Stripe 税费、一次性和定期支付，可自定义品牌风格，并支持 EPS、Giropay、Sofort、iDeal、Alipay、Apple/Google Pay 和 WeChat 等多种支付方式。</li>
<li>高级价格表小部件：提供 Elementor 风格的价格表，并集成结账功能。</li>
<li>定价方面，提供免费版本（包括基础结账表、一次性支付按钮等）</li>
</ul>
<h3 id="Contact-Form-7-Stripe-Addon"><a href="#Contact-Form-7-Stripe-Addon" class="headerlink" title="Contact Form 7 Stripe Addon"></a><a href="https://payaddons.com/contact-form-7-stripe-payment/" target="_blank" rel="noopener">Contact Form 7 Stripe Addon</a></h3><p>Contact Form 7 Stripe Addon 允许用户在 Contact Form 7 联系表单中添加支付字段，适合需要通过表单接受支付的场景。功能包括：</p>
<ul>
<li>支持一次性和定期支付。</li>
<li>通过 Stripe 托管页面完成支付跳转，确保安全。</li>
<li>适合销售产品、服务或接受捐款的网站。</li>
</ul>
<h3 id="WooCommerce-Stripe-Payment"><a href="#WooCommerce-Stripe-Payment" class="headerlink" title="WooCommerce Stripe Payment"></a><a href="https://payaddons.com/woo-stripe-payment/" target="_blank" rel="noopener">WooCommerce Stripe Payment</a></h3><p>WooCommerce Stripe Payment 针对电商用户，增强 WooCommerce 商店的支付功能。关键特点：</p>
<ul>
<li>添加超过 30 种支付方式，包括 Google Pay 和 Apple Pay。</li>
<li>易于集成现有 WooCommerce 设置，适合在线商店。</li>
</ul>
<h3 id="Stripe-Express"><a href="#Stripe-Express" class="headerlink" title="Stripe Express"></a><a href="https://payaddons.com/stripe-express/" target="_blank" rel="noopener">Stripe Express</a></h3><p>Stripe Express 是一个独立小部件，适合无需完整在线商店的支付场景。功能包括：</p>
<ul>
<li>支持一次性和定期支付。</li>
<li>可嵌入网站任意页面，灵活性高。</li>
<li>适合小型项目或临时支付需求</li>
</ul>
<h2 id="功能与优势"><a href="#功能与优势" class="headerlink" title="功能与优势"></a>功能与优势</h2><p>payaddons.com 的产品具有以下共同优势：</p>
<p>易用性：安装和配置简单，适合技术水平不同的用户。<br>安全性：利用 Stripe 的安全支付处理，确保交易安全。<br>兼容性：与多个 WordPress 插件和页面构建器兼容，覆盖广泛使用场景。<br>支持与保证：提供优先邮件和 Skype 支持（机构版），并有 100% 退款保证，如果插件不可用且问题无法解决，可全额退款。<br>用户评价显示，插件轻量级、易用，免费版本功能丰富，适合初创企业。例如，一位用户评论称，“这款插件非常适合在 Elementor 表单中添加支付选项，安装简单，功能强大”。</p>
<h2 id="定价与支持"><a href="#定价与支持" class="headerlink" title="定价与支持"></a>定价与支持</h2><p>Elementor Stripe Payment：免费版包括基础功能和专业版。<br>其他产品：Contact Form 7 和 WooCommerce 插件也有免费版本，具体定价需参考 <a href="https://payaddons.com" target="_blank" rel="noopener">payaddons.com</a>。<br>退款政策：所有产品提供 100% 退款保证，续费价格不会因订阅未取消而增加。<br>支持方面，机构版用户可享受优先邮件和 Skype 支持，免费版用户可通过网站获取文档和社区支持。</p>
<h2 id="如何开始使用"><a href="#如何开始使用" class="headerlink" title="如何开始使用"></a>如何开始使用</h2><p>要开始使用 payaddons.com 的插件，步骤如下：</p>
<p>访问 <a href="https://payaddons.com" target="_blank" rel="noopener">payaddons.com</a>，选择适合你的产品。</p>
<ol>
<li>下载插件（免费版可直接下载，付费版需购买）。</li>
<li>按照安装说明在 WordPress 仪表盘中安装和激活。</li>
<li>配置 Stripe 账户，设置支付方式，几分钟内即可开始接受支付。</li>
</ol>
<h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h2><p><a href="https://payaddons.com" target="_blank" rel="noopener">https://payaddons.com</a> 是一个值得信赖的平台，为 WordPress 用户提供高效的 Stripe 支付集成解决方案。其产品覆盖多种场景，功能丰富，免费版本已满足基本需求，付费版本则提供更多支持和高级功能。无论是小型网站还是电商商店，payaddons.com 都能帮助你轻松实现支付功能。</p>
<p>如需额外功能或定制，请联系本人。</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2025-02-24T11:08:49.000Z">2025-02-24</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/stripe/" rel="category tag">stripe</a>
<a href="/tags/wordpress/" rel="category tag">wordpress</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2025/02/24/stripe-plugins-by-payaddons/" data-flag-title="wordpress stripe 集成插件 powered by payaddons">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry ">
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2024/12/25/javascript-implement-sticky-with-help-ai/" rel="bookmark">JS实现一个复杂sticky效果</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<p>最近工作上遇到一个需要：一个产品列表的下， 当浏览器滚动到每个产品上时，需要将产品title sticky 到顶部，紧接着产品描述也sticky 到title 下部分，产品里的一个按钮则需要sticky 到底部，当产品滚动完成后，紧接着下一个产品的sticky。</p>
<p>看似很简单的需求，本以为通过css position: sticky 可以很快完成，没想到遇到了一茬接一茬的问题：</p>
<ol>
<li>首先每一个sticky 的元素style 会变化，例如字体或者边框，这就需要知道什么时候是处于sticky 状态，然后css 的sticky 是没有这样的状态选择器 </li>
<li>还是利用css sticky，只是使用 IntersectionObserver 来检测是否处于sticky 状态，如果是，那就加一个class 应用 style 的变化</li>
<li>按着思路，做出来的有个新问题：当滚动到第一个产品底部，刚好第二个产品顶部时，sticky收缩回原始位置的时候，又导致父元素高度变化，此时又触发sticky 条件，导致触发sticky，然而，sticky生效时，父元素高度又变小，又触发sticky收缩。。。所以sticky 闪烁的问题出现了</li>
</ol>
<p>#2 中的 detectSticky 可以用IntersectionObserver 实现代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">detectSticky</span>(<span class="params">element, onPin, onUnpin</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> observer = <span class="keyword">new</span> IntersectionObserver(</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params">entries</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> entry = entries[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">if</span> (entry.intersectionRatio < <span class="number">1</span>) {</span><br><span class="line"> onPin();</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> onUnpin();</span><br><span class="line"> }</span><br><span class="line"> }.bind(<span class="keyword">this</span>),</span><br><span class="line"> { <span class="attr">threshold</span>: [<span class="number">1</span>] } </span><br><span class="line"> );</span><br><span class="line"></span><br><span class="line"> observer.observe(element);</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> observer.disconnect();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果要实现一个通用的任意元素的sticky 效果，可使用下面的方法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createSticky</span>(<span class="params">element, position = <span class="string">'top'</span>, offsetY = <span class="number">0</span></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> isPinned = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">var</span> spacer = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> observer = <span class="keyword">new</span> IntersectionObserver(</span><br><span class="line"> (entries) => {</span><br><span class="line"> entries.forEach(<span class="function"><span class="params">entry</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (entry.isIntersecting) {</span><br><span class="line"> <span class="built_in">window</span>.addEventListener(<span class="string">'scroll'</span>, checkSticky);</span><br><span class="line"> checkSticky();</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">window</span>.removeEventListener(<span class="string">'scroll'</span>, checkSticky);</span><br><span class="line"> <span class="keyword">if</span> (isPinned) unpin();</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> { <span class="attr">threshold</span>: [<span class="number">0</span>], <span class="attr">rootMargin</span>: <span class="string">'0px'</span> }</span><br><span class="line"> );</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">createSpacer</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> height = element.offsetHeight;</span><br><span class="line"> spacer = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>);</span><br><span class="line"> spacer.className = <span class="string">'sticky-spacer'</span>;</span><br><span class="line"> spacer.style.height = height + <span class="string">'px'</span>;</span><br><span class="line"> spacer.style.opacity = <span class="number">0</span>;</span><br><span class="line"> element.parentNode.insertBefore(spacer, element);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">pin</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!spacer) createSpacer();</span><br><span class="line"> element.classList.add(<span class="string">'is-sticky'</span>);</span><br><span class="line"> isPinned = <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">unpin</span>(<span class="params"></span>) </span>{</span><br><span class="line"> element.classList.remove(<span class="string">'is-sticky'</span>);</span><br><span class="line"> <span class="keyword">if</span> (spacer) {</span><br><span class="line"> spacer.remove();</span><br><span class="line"> spacer = <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"> isPinned = <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">checkSticky</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!element.parentElement) {</span><br><span class="line"> unpin();</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> rect = element.parentElement.getBoundingClientRect();</span><br><span class="line"> <span class="keyword">var</span> shouldPin = position === <span class="string">'top'</span></span><br><span class="line"> ? rect.top < -offsetY && rect.bottom > offsetY</span><br><span class="line"> : rect.bottom > <span class="built_in">window</span>.innerHeight + offsetY && rect.top < <span class="built_in">window</span>.innerHeight;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (shouldPin && !isPinned) pin();</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (!shouldPin && isPinned) unpin();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> observer.observe(element.parentElement);</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> observer.disconnect();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>最终方案还有一个可改进的地方，由于 title 是触顶触发sticky，如果title 内容本身很高，spacer 的空白会比较明显，可以改为title 底部触顶触发, 只需要把 rect.bottom > offsetY 改为 rect.bottom > 0</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png" alt="image"></p>
<p>最后，平平无奇的一篇技术小点为何要写呢？最主要的是上面的最终成品是我在 claude.ai 帮助下完成，包括生成demo，重构代码，不得不感叹于 AI 真的改变程序生活</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2024-12-25T11:08:49.000Z">2024-12-25</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/ai/" rel="category tag">ai</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2024/12/25/javascript-implement-sticky-with-help-ai/" data-flag-title="JS实现一个复杂sticky效果">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/2024-01-27-pay-addons.png" rel="gallery_cm7iqwoui000nj8pyre1w932n">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/2024-01-27-pay-addons.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2024/01/27/indie-hacker-wordpress/" rel="bookmark">Indie hacker 新感</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
前五个用户都是你的产品经理
<p class="article-more-link">
<a href="/2024/01/27/indie-hacker-wordpress/#more">Read More</a>
</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2024-01-27T11:08:49.000Z">2024-01-27</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
<a href="/categories/web/wordpress/" rel="category tag">wordpress</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/stripe/" rel="category tag">stripe</a>
<a href="/tags/elementor/" rel="category tag">elementor</a>
<a href="/tags/wordpress/" rel="category tag">wordpress</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2024/01/27/indie-hacker-wordpress/" data-flag-title="Indie hacker 新感">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry ">
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2022/11/27/stripe-express-summary/" rel="bookmark">wordpress 插件一年半赚$1500，还要坚持下去吗?</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
今天统计了一下一年多前做的一个小插件，一共赚了$1500，二十个订阅用户，两百多有效免费用户。回顾之前的付出和现在时不时的维护，不禁在问自己，还要坚持做下去吗？
<p class="article-more-link">
<a href="/2022/11/27/stripe-express-summary/#more">Read More</a>
</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2022-11-27T11:08:49.000Z">2022-11-27</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/stripe/" rel="category tag">stripe</a>
<a href="/tags/wordpress/" rel="category tag">wordpress</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2022/11/27/stripe-express-summary/" data-flag-title="wordpress 插件一年半赚$1500，还要坚持下去吗?">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/2022-aws-saa-yangzhou.png" rel="gallery_cm7iqwoug000kj8pynrysc976">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/2022-aws-saa-yangzhou.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2022/07/31/how-to-get-aws-certified-solutions-architect-associate/" rel="bookmark">如何通过 AWS certified solution architect associate (SAA)</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
花了三四个月的业余时间，终于通过 AWS SAA 认证。回过头，最大的收获不是获得这个证的荣誉，而是在面临工作压力，家庭琐事等等都情况下，坚持做一件有挑战的事，并做成后的成就感。
<p class="article-more-link">
<a href="/2022/07/31/how-to-get-aws-certified-solutions-architect-associate/#more">Read More</a>
</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2022-07-31T11:08:49.000Z">2022-07-31</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/aws/" rel="category tag">aws</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/aws/" rel="category tag">aws</a>
<a href="/tags/certification/" rel="category tag">certification</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2022/07/31/how-to-get-aws-certified-solutions-architect-associate/" data-flag-title="如何通过 AWS certified solution architect associate (SAA)">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry ">
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2022/01/21/how-to-create-your-own-product-with-one-person/" rel="bookmark">一个人如何开发产品</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
自己业余开发的stripe express 产品发布一年，收获100+来自全球各地的用户，包括10+的付费用户, 个人研发产品的路还在继续，记录下这一年的点滴。
<p class="article-more-link">
<a href="/2022/01/21/how-to-create-your-own-product-with-one-person/#more">Read More</a>
</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2022-01-21T11:08:49.000Z">2022-01-21</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/stripe/" rel="category tag">stripe</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/payment/" rel="category tag">payment</a>
<a href="/tags/stripe/" rel="category tag">stripe</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2022/01/21/how-to-create-your-own-product-with-one-person/" data-flag-title="一个人如何开发产品">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/2021-1-20-year-2021-2022.png" rel="gallery_cm7iqwouk000sj8py2qz3m9tu">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/2021-1-20-year-2021-2022.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2022/01/20/my-2021/" rel="bookmark">2021年度回顾</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
简单的回顾，2021，还是处于疫情阶段，经历的人和事也挺多，所以记录一下。
<p class="article-more-link">
<a href="/2022/01/20/my-2021/#more">Read More</a>
</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2022-01-20T11:08:49.000Z">2022-01-20</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/misc/" rel="category tag">misc</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/misc/" rel="category tag">misc</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2022/01/20/my-2021/" data-flag-title="2021年度回顾">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/stripe-worldfirst.png" rel="gallery_cm7iqwoua000bj8py8k07avyd">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/stripe-worldfirst.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2021/06/02/activate-stripe-in-china-for-free/" rel="bookmark">中国用户如何免费激活Stripe?</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<h1 id="中国用户如何免费激活Stripe"><a href="#中国用户如何免费激活Stripe" class="headerlink" title="中国用户如何免费激活Stripe?"></a>中国用户如何免费激活Stripe?</h1><p>本文会介绍无需开设海外银行账号或者香港账号，并免费的通过注册激活Stripe账号并提现，亲测有效！</p>
<p>主要通过使用万里汇海外账号绑定激活，其中万里汇是蚂蚁金服旗下的产品，值得可靠。（不是给万里汇打广告哦）</p>
<h3 id="什么是Stripe"><a href="#什么是Stripe" class="headerlink" title="什么是Stripe"></a>什么是Stripe</h3><p>想象你是一个跨境电商，想要把产品卖到全球，却面临一个问题，商品标价$100，日本客户想直接支付日元，欧洲客户想支付欧元。。。你不可能要求客户说我只支持美元，请兑换后再支付吧？</p>
<p>所以如果你还不知道Stripe，那推荐你去了解下。作为和PayPal一样存在的支付巨头（现在市值 $950亿），在国外早已火得一塌糊涂，使用他作为支付平台的商家和网站数不甚数，消费者渗透率覆盖了全球135个国家。。。</p>
<p><a href></a></p>
<h3 id="中国商户，NO"><a href="#中国商户，NO" class="headerlink" title="中国商户，NO"></a>中国商户，NO</h3><p>遗憾的是，如果你是身在中国，那么是不能激活Stripe 账号的（不激活只是注册账号倒是可以，但是没法收款和体现，只能测试），可以查看现在商户支持的<a href="https://stripe.com/global" target="_blank" rel="noopener">40多个国家/地区列表</a>, 其中香港是可以的。所以你能看到，这个注册公司地址里是没办法选择中国🇨🇳的，That’s the problem!</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-reg-china-issue.png" alt></p>
<h3 id="如果解决？万里汇-或者-TransferWise"><a href="#如果解决？万里汇-或者-TransferWise" class="headerlink" title="如果解决？万里汇 或者 TransferWise"></a>如果解决？万里汇 或者 TransferWise</h3><p>问题的瓶颈在于stripe 激活的时候，需要提供你的商业信息以及银行信息，并且保证银行上的名字和账号里的个人姓名一致。但又由于商业信息的国家地区只有上面提到的，所以也就导致中国用户没办法激活。</p>
<p>解决办法的思路就是，使用万里汇注册个香港账号或者其他国家的银行账号（虽说是虚拟的，但和实际没区别），然后再根据账号的信息拿去Stripe激活，看似简单，但还有很多坑需要趟，且听我慢慢道来。</p>
<hr>
<h3 id="注册万里汇"><a href="#注册万里汇" class="headerlink" title="注册万里汇"></a>注册万里汇</h3><p>点击注册地址 <a href="https://portal.worldfirst.com.cn/register" target="_blank" rel="noopener">https://portal.worldfirst.com.cn/register</a>， </p>
<ol>
<li>然后按步骤选择支付网关, 这里可以按个人情况多选几个(最好把stripe 勾选上)，虽然我也不知道有多大影响</li>
</ol>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-worldfirst-reg-gateway.png" alt></p>
<ol start="2">
<li><p>选择类型，可以是个人， 也可以是公司，这里我选的个人</p>
</li>
<li><p>填写基本信息，按部就班的填好就行，注册就算成功</p>
</li>
</ol>
<h3 id="认证账号"><a href="#认证账号" class="headerlink" title="认证账号"></a>认证账号</h3><p>注册好了，是非认证状态的，这时是不能创建海外账号，还需要提供相应的信息上传去验证（据说可以支付宝快捷验证，但是我没发现有，只能拍照上传）</p>
<p>认证一般会持续一两天验证，等着收邮件就好了，如果有问题，可以联系自己的万里汇客户经理（真是一对一服务啊，这点好）</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-wordfirst-reg-home-page.png" alt></p>
<h3 id="创建海外货币账户"><a href="#创建海外货币账户" class="headerlink" title="创建海外货币账户"></a>创建海外货币账户</h3><p>终于到了关键步骤了，这里可以创建多个账户，每个账户就像自己银行卡一样，有卡号，为了stripe 注册方便，我创建了一个香港账户和一个美国账户</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-wordfirst-account-detail.png" alt></p>
<p>到了这一步，恭喜你，你已经开通了海外账户！关键是这个银行信息对后面的Stripe激活是非常重要。</p>
<hr>
<h2 id="创建和激活-Stripe-账号"><a href="#创建和激活-Stripe-账号" class="headerlink" title="创建和激活 Stripe 账号"></a>创建和激活 Stripe 账号</h2><p>首先创建Stripe 账号，<a href="https://dashboard.stripe.com/register" target="_blank" rel="noopener">https://dashboard.stripe.com/register</a>， 国家/地区可以选择香港，创建好之后，登录进入主页面， 这个时候如果你暂时不想激活，是完全可以的，可以切换<strong>测试</strong>模式进行你的支付开发测试，<strong>测试</strong>模式基本和<strong>在线</strong>模式一模一样，除了测试的支付账号是假的以外 （PS， 我就是没激活使用了一年多，纯粹作为开发使用）</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-dashboard.png" alt></p>
<h3 id="激活Stripe-账户"><a href="#激活Stripe-账户" class="headerlink" title="激活Stripe 账户"></a>激活Stripe 账户</h3><p>点击 <strong>激活你的账户</strong> ， 这里看起来有很多步骤，不用怕填错，后面都是可以跳回去改的。</p>
<p>公司结构：</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-activate-comany-info.png" alt></p>
<p>选择香港，或者其他上面货币账号国家，地址可以填银行账号地址，类型可以选个人（如果公司的话，据说stripe 会对你账号保护性或者服务更好），点击下一步</p>
<p>公司代表：必须是你自己在上述银行账号的姓名，否则可能会无法体现到你银行</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/stripe-activate-represent-name-info.png" alt></p>
<p>地址信息可以继续用银行地址，电话号码最好是用中国的，可以选CN, 填写自己号码，因为后面可能会用来用来登录短信验证之类的，身份证ID 这个我没记错的话，是随便找的一个ID（只要位数和格式对了就行） ☹️</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-activate-represent-info.png" alt></p>
<p>银行详情：选择在万里汇创建的银行信息就行</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-activate-bank-info.png" alt></p>
<p>然后一直填下去，保存</p>
<h3 id="激活成功了吗？"><a href="#激活成功了吗？" class="headerlink" title="激活成功了吗？"></a>激活成功了吗？</h3><p>上述没问题的话，确实激活成功了，你也可以切换到线上模式去收款了，但是却无法提现（转账）到你银行卡里，还有两个重要的未完成步骤警告：</p>
<p>身份信息不匹配（个人信息验证失败，当然了，ID 都是假的） 和 US Tax Form （美国税收表）</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-activate-ux-tax-sign.png" alt></p>
<p>两个问题一个一个解决：</p>
<ul>
<li>ID 不匹配，进入提示的配置，只需要上传自己的身份证正反面就好了，一天左右就验证成功（不知道如何验证的，可能是后台人工验证，保证姓名一致就行，所以一定上传自己真实的身份证就，地址用自己中国地址）</li>
<li>W-8 form，一定要选非美国居民（勾选No），然后点击提交，会被导航至表单填写页面，基本信息stripe 已经帮你预填了，只需要签上个人姓名就好了</li>
</ul>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-w-8-form.png" alt></p>
<p><a href="https://support.stripe.com/questions/documents-for-identity-and-home-address-verification#upload" target="_blank" rel="noopener">documents-for-identity-and-home-address-verification</a></p>
<p><a href="https://support.stripe.com/questions/w-8-forms-collected-by-stripe" target="_blank" rel="noopener">w-8-forms-collected-by-stripe</a></p>
<p>等着这两个错误完成后，这个账号就算真正激活完成，并可以完成提现（每天，并且非常快）。</p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="/images/uploads/2021-06-02-stripe-payout.png" alt></p>
<hr>
<h3 id="万里汇提现到人民币-成功"><a href="#万里汇提现到人民币-成功" class="headerlink" title="万里汇提现到人民币(成功)"></a>万里汇提现到人民币(成功)</h3><p>现在万里汇香港账号已经有收到的港币了，但如果需要的话，需要转为人民币（可转到支付宝），但根据万里汇客户经理说明，这是需要提供相应凭据，也就是stripe 或者 paypal 上的支付记录，表明来历明确。提现过一次，因为金额不大，并且提供了paypay 的收款记录，所以成功提现。</p>
<p>特别提醒的是，这篇文章目的只是为激活stripe指南， 不为跨境转账成功负责，请酌情选择。</p>
<p>特此声明，本文禁止转载至除 troyyang.com, <a href="http://itstripe.com" target="_blank" rel="noopener">itstripe.com</a> 以外的网站</p>
<p>相关推荐文章：<br><a href="https://troyyang.com/2020/12/30/wordpress-stripe-express-released/">wordpress stripe插件，支持微信和支付宝</a><br><a href="https://troyyang.com/2018/01/21/stripe_guide_alipay/">stripe集成 微信和支付宝</a> </p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2021-06-02T11:08:49.000Z">2021-06-02</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/stripe/" rel="category tag">stripe</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/payment/" rel="category tag">payment</a>
<a href="/tags/stripe/" rel="category tag">stripe</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2021/06/02/activate-stripe-in-china-for-free/" data-flag-title="中国用户如何免费激活Stripe?">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry has-post-thumbnail">
<a class="post-thumbnail" href="https://images.troyyang.com/wordprss-stripe-express-banner.png" rel="gallery_cm7iqwoum000xj8pygmnhev2x">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/wordprss-stripe-express-banner.png" itemprop="image">
</a>
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2020/12/30/wordpress-stripe-express-released/" rel="bookmark">Wordpress 插件 Stripe Express 发布啦！</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<hr>
<h2 id="Stripe-Express-是什么？"><a href="#Stripe-Express-是什么？" class="headerlink" title="Stripe Express 是什么？"></a>Stripe Express 是什么？</h2><p>简单来说，Stripe Express 是一款针对wordpress 平台，帮助你使用 stripe 快速，方便完成跨境支付的一款免费插件（扩展功能收费）。其中，包括多种已经创建好的支付组件，包括一次性支付(one-time)，电子钱包（支付宝，微信，Apple Pay, Google Pay，下面重点会提到微信和支付宝），表单支付等等组件，需要提及的是，上面的组件都支持常见的各种信用卡，Master card, Visa, 等等等等，以及其他国家地区的主流支付方式比如 Bancontact, FPX, EPS, SEPA, Giropay, Sofort, iDeal。</p>
<p>所以，只有你有一个 Stripe 的账号，那么超过三十多个国家地区的客户都可以向你支付（对于微信和支付宝，你无需申请支付宝或者微信的商家账号，即可免费收款）。</p>
<p>问题: 什么人更需要这个组件？<br>回答: 现阶段，因为还没集成woocommence， 所以如果你没有一个完整的电子商务网站比如使用 woocommence搭建，只是一个简单的Wordpress 网站，但是你又有自己的产品或者服务需要销售，而你只是想你用户简单的点击购买，付款。</p>
<p><a href="https://wordpress.org/plugins/wp-stripe-express/" target="_blank" rel="noopener">wordpress 插件传送门</a></p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/stripe-express-org-preview.png" alt> </p>
<h2 id="itstripe-com"><a href="#itstripe-com" class="headerlink" title="itstripe.com"></a>itstripe.com</h2><p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAiIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSIwO3N2Z1NwaW5uZXJzM0RvdHNTY2FsZTEuZW5kLTAuMjVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNnMiIGR1cj0iMC43NXMiIHZhbHVlcz0iMzsuMjszIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjAiIGN5PSIxMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIj48YW5pbWF0ZSBpZD0ic3ZnU3Bpbm5lcnMzRG90c1NjYWxlMSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzM0RvdHNTY2FsZTAuZW5kLTAuNDVzIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjM7LjI7MyIvPjwvY2lyY2xlPjwvc3ZnPg==" data-original="https://images.troyyang.com/itstripe-preview.png" alt> </p>
<p>在我们国内，大部分人肯定知道Paypal，却不知道Stripe，更别说用过，当然也和Stripe 暂不支持中国商家的原因分不开。殊不知，国外Stripe普及程度远大于我们的想象，很多网站都会加上对Stripe 的支持，因为这意味着你的网站可以面向全世界超过30个主要国家的客户收费，包括中国！所以想要做跨境支付的话，Stripe 你必须要熟悉！ </p>
<p>众所周知，Wordpress全世界超过40%的网站都是他创建的，而且现在也依旧火爆。再加上之前很多朋友都在咨询我关于 stripe 在wordpress上的问题，所以主要侧重点会是在 stripe express 这款插件上。其次，网站会包括产品介绍，以及插件的文档，还有和stripe 相关集成服务，如果你有集成这方面的需求的话，或者Web 的支付开发，可以联系我们。 </p>
<h2 id="Stripe，微信-和-支付宝"><a href="#Stripe，微信-和-支付宝" class="headerlink" title="Stripe，微信 和 支付宝"></a>Stripe，微信 和 支付宝</h2><p>这是一个最重要的原因之一促使我想要做这么一个东西。有这么一部分人：1. 小商家或者个人网站用户想要接入微信或者支付宝，方便国内用户收费，2. 国外的中小网站想要针对中国用户微信和支付宝收费。但是对于他们而言，由其老外，要想接入微信或者支付宝支付接口，门槛还是有点高，需要去申请商家账号</p>
<p>stripe 却在这方面有着天然优势，由于已经和alipay 和 wechat 达成协议，Stripe 完全可以实现上面的收费，其中stripe 会收取3.4% + $0.50每笔的服务费。 </p>
<p>之前写过一篇关于 <a href="https://troyyang.com/2018/01/21/stripe_guide_alipay/">stripe集成 微信和支付宝</a>的文章，反响挺大的，看到很多评论和转载，也收到很多咨询的邮件，但是之前的那篇从技术角度其实有点老了，我会另外抽时间重新写一个更通用的集成方式（已经在这款插件中实践了）</p>
<h2 id="后续"><a href="#后续" class="headerlink" title="后续"></a>后续</h2><p>回想这半年多的开发时间（包括插件和官网），白天正常上班，晚上继续开发，连周末都不想出门，像打鸡血一样的完善产品，终于迎来了发布的日子。无论这款插件将来如何，安装量怎样，有过这么一段为了某个目标而全力以赴的日子也是极好的！</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2020-12-30T19:49:22.000Z">2020-12-30</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/stripe/" rel="category tag">stripe</a>
<a href="/tags/wordpress/" rel="category tag">wordpress</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2020/12/30/wordpress-stripe-express-released/" data-flag-title="Wordpress 插件 Stripe Express 发布啦！">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<article class="hentry ">
<header class="entry-header">
<h2 class="entry-title"><a class="post-title-link" href="/2020/12/20/mobx/" rel="bookmark">Mobx在项目中的实践 及 与Redux的比较</a></h2>
</header>
<!-- .entry-header -->
<div class="entry-content">
<p>之前在公司FEE内部做过一次技术分享，主要关于Mobx在项目中的使用一年后的体验以及和Redux 的一些比较（因为我们项目之前的状态管理选型选择的是mobx，而其他项目组的同学选择主要是Redux或者还在纠结如何选）。</p>
<p>以下都是根据查询各种资料后的个人理解概览</p>
<h2 id="Mobx-Overview"><a href="#Mobx-Overview" class="headerlink" title="Mobx Overview"></a>Mobx Overview</h2><blockquote>
<p>Mobx looks like a properties tracking and reaction lib.<br>基础部分就省了，只说结论：Mobx 看起来是属性追踪及作出相应反应的库，和Redux 不一样的是，他的状态是mutable的。</p>
</blockquote>
<h3 id="Mobx-4-amp-5"><a href="#Mobx-4-amp-5" class="headerlink" title="Mobx 4 & 5"></a>Mobx 4 & 5</h3><ul>
<li>Mobx 4 Limitations (Observable)</li>
<li>Mobx 5 Proxy based (Only ES 6 Browser, no polyfill)</li>
</ul>
<h2 id="Mobx-amp-Third-Party-view-lib"><a href="#Mobx-amp-Third-Party-view-lib" class="headerlink" title="Mobx & Third-Party view lib"></a>Mobx & Third-Party view lib</h2><ul>
<li>mobx & mobx-react</li>
<li>redux & react-redux</li>
<li>mobx & mobx-arch & mobx-backbone 有吗???</li>
</ul>
<p>Mobx 是可以单独使用的，这点和Redux一样，可以不需要依赖于任何UI 库像，React, Vue，当然如果把他们结合到一起，那才能发挥出最大的作用，所以就理所应当的有mobx-react。</p>
<p>我们公司内部有个UI 库叫arch，很老的了，requirejs时代的，比react, vue, angular还早，没有响应式的更新，核心只有一个render 方法，所以其实可以通过Mobx 简单改造为响应式的，一旦外部属性发生变化，就会触发重新渲染，至于内部状态嘛，呵呵，不考虑了，反正这只是个例子。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">var { observable, autorun } = require("mobx");</span><br><span class="line">var Entity = require('xx/xxxx/entity');</span><br><span class="line"></span><br><span class="line">var todoStore = observable({</span><br><span class="line"> todos: [],</span><br><span class="line"> get completedCount() {</span><br><span class="line"> return this.todos.filter(todo => todo.completed).length</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">autorun(function () {</span><br><span class="line"> // For Backbone</span><br><span class="line"> this.xxxBackBoneComponent = new Entity({</span><br><span class="line"> model: todoStore.todos,</span><br><span class="line"> editable: true</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> // For Arch</span><br><span class="line"> active.render($html, () => {</span><br><span class="line"> this.xxArchComponent = arch.getComponent(xxx);</span><br><span class="line"> });</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">todoStore.todos[0] = {</span><br><span class="line"> title: "Take a walk",</span><br><span class="line"> completed: false</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h2 id="Mobx-Store-Design"><a href="#Mobx-Store-Design" class="headerlink" title="Mobx Store Design"></a>Mobx Store Design</h2><ul>
<li><a href="https://mobx.js.org/defining-data-stores.html" target="_blank" rel="noopener">Offical guide on Store design</a></li>
<li><a href="https://medium.com/dailyjs/mobx-react-best-practices-17e01cec4140" target="_blank" rel="noopener">Best Practice</a></li>
<li>UI State & Domain State</li>
</ul>
<p>这是我觉得最难的部分，如何设计好Mobx的Store？官方给出的一个<a href="https://mobx.js.org/defining-data-stores.html" target="_blank" rel="noopener">guide</a> 是划分为Domain store 和 UI store。Domain store和Redux的one-single store 可不一样，这里是可以有多个的，像users, books, movies, orders 都可以是一个Domain Store， 至于UI store，暂时我们只是存储一些全局的属性。所以，我们的项目中Store的结构大致如下:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">stores</span><br><span class="line">--root.ts</span><br><span class="line">--domain</span><br><span class="line">----aaaStore.ts</span><br><span class="line">----bbbStore.ts</span><br><span class="line">--ui</span><br><span class="line">----application.ts</span><br></pre></td></tr></table></figure></p>
<p>root.ts初始化所有domain和ui store:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">export default class RootStore {</span><br><span class="line"> @observable</span><br><span class="line"> aaStore;</span><br><span class="line"></span><br><span class="line"> @observable</span><br><span class="line"> bbStore;</span><br><span class="line"></span><br><span class="line"> @observable</span><br><span class="line"> applicationUIStore;</span><br><span class="line"></span><br><span class="line"> constructor() {</span><br><span class="line"> // Domain Store Init</span><br><span class="line"> this.aaStore = new AStore(this);</span><br><span class="line"> this.bbStore = new BStore(this);</span><br><span class="line"> ...</span><br><span class="line"></span><br><span class="line"> // UI Store Init</span><br><span class="line"> this.applicationUIStore = new ApplicationUIStore(this);</span><br><span class="line"> ...</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>但是在实际的问题中，我们发现大部分的状态其实都是本地UI状态，（也许有人说用setState啊，如果业务复杂，状态很多, 并且基本会依赖其他store，最好抽出来）所以，问题来了，这些ui store我们放在哪里呢？同时，我们需要把Container 组件里的状态隔离开来，为什么隔离，一是因为UT 不好写（因为有inject，所以在UT里需要写很多Provider），二是傻瓜组件更不容易出错，参考Redux的connect用法，我们得到下面的结构：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ContainerAComponent</span><br><span class="line">--ContainerAComponent.tsx</span><br><span class="line">--ContainerAComponentUIStore.ts</span><br></pre></td></tr></table></figure></p>
<p>ContainerAComponentUIStore.ts<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">export default class ContainerAComponentUIStore {</span><br><span class="line"> rootStore;</span><br><span class="line"> constructor(rootStore) {</span><br><span class="line"> this.rootStore = rootStore;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> @observable</span><br><span class="line"> addHoc = '';</span><br><span class="line"> </span><br><span class="line"> @action.bound</span><br><span class="line"> onAdhocChange = (addHocNewValue) => {</span><br><span class="line"> ....</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
<p>ContainerAComponent.tsx<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">export class ContainerAComponent extends React.Component {</span><br><span class="line"> handleAdhocChange = (e) => {</span><br><span class="line"> this.props.onAdhocChange(e.target.value);</span><br><span class="line"> }</span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line">export default connectComponentStore(ContainerAComponent, ContainerAComponentUIStore);</span><br></pre></td></tr></table></figure></p>
<p>这样，我们导出了两个组件，一个是ContainerAComponent，就是一个简单组件，我们可以通过传统传props的方式去测试组件核心内容，另一个是HOC组件，其实是不用测试的。</p>
<p>而至于connectComponentStore方法，就是一个很简单的HOC<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">export default (WrapperedComponent, ComponentStore) => {</span><br><span class="line"> @inject('appStore')</span><br><span class="line"> @observer</span><br><span class="line"> class Connect extends React.Component {</span><br><span class="line"> @observable componentStore;</span><br><span class="line"></span><br><span class="line"> constructor(props) {</span><br><span class="line"> super(props);</span><br><span class="line"> this.componentStore = new ComponentStore(props.appStore);</span><br><span class="line"> this.ref = createRef();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> static displayName = `${WrapperedComponent.displayName || WrapperedComponent.name}-withUIStore`</span><br><span class="line"></span><br><span class="line"> componentDidMount() {</span><br><span class="line"> this.componentStore.mapState(this.props);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> componentDidUpdate(preProps, preState) {</span><br><span class="line"> this.componentStore.mapState(this.props);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> render() {</span><br><span class="line"> return (<WrapperedComponent ref={this.ref} {...this.componentStore.toProps} {...this.props} />);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> return Connect;</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>
<p>我们业务里，绝大部分都是用到的这种本地UI Store + 简单组件组合这种方式，也许就是所谓的local state component （忘了哪里听到的了）</p>
<h3 id="Mobx-State-Tree（MST）"><a href="#Mobx-State-Tree（MST）" class="headerlink" title="Mobx-State-Tree（MST）"></a>Mobx-State-Tree（MST）</h3><p>也许MST在大型项目中使用是个很好的方式，但我们暂时还没有去尝试。</p>
<h3 id="Project-Structure"><a href="#Project-Structure" class="headerlink" title="Project Structure"></a>Project Structure</h3><p>下面是Mobx的一些项目组织结构参考资料：</p>
<p><a href="https://medium.com/@daniel.bischoff/how-to-structure-your-mobx-react-app-8fd6d9d821a4" target="_blank" rel="noopener">https://medium.com/@daniel.bischoff/how-to-structure-your-mobx-react-app-8fd6d9d821a4</a><br><a href="https://github.com/gothinkster/react-mobx-realworld-example-app" target="_blank" rel="noopener">https://github.com/gothinkster/react-mobx-realworld-example-app</a> </p>
<h2 id="Mobx-React-vs-Redux-React"><a href="#Mobx-React-vs-Redux-React" class="headerlink" title="Mobx-React vs Redux-React"></a>Mobx-React vs Redux-React</h2><p>个人简单的一些看法：</p>
<ul>
<li>Workflow</li>
<li>Freestyle vs Strict</li>
<li>OOP styles vs FP</li>
<li>Small vs Large</li>
<li>Time-traval problem (Resolved by MST)</li>
<li>Container components (Inject vs Connect)</li>
<li><a href="https://github.com/sitepoint-editors/redux-crud-example/tree/master/src" target="_blank" rel="noopener">redux-crud-example</a> & <a href="https://github.com/sitepoint-editors/mobx-crud-example/tree/master/src" target="_blank" rel="noopener">mobx-crud-example</a></li>
</ul>
<p><a href="https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448" target="_blank" rel="noopener">https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448</a><br><a href="https://www.sitepoint.com/redux-vs-mobx-which-is-best/" target="_blank" rel="noopener">https://www.sitepoint.com/redux-vs-mobx-which-is-best/</a></p>
<h3 id="Learning-Redux"><a href="#Learning-Redux" class="headerlink" title="Learning Redux"></a>Learning Redux</h3><p>在一些小项目中用过Redux, 不得不说，Redux的学习成本要比Mobx高得多，比如下面的点，<br>redux, reducer, action, container component, selectors(reselect), redux-thunk, normalizing, ducks, and more waiting…</p>
<h2 id="Others-links"><a href="#Others-links" class="headerlink" title="Others links"></a>Others links</h2><h3 id="Mobx-Best-Practice"><a href="#Mobx-Best-Practice" class="headerlink" title="Mobx-Best-Practice"></a><a href="https://medium.com/dailyjs/mobx-react-best-practices-17e01cec4140" target="_blank" rel="noopener">Mobx-Best-Practice</a></h3><h3 id="Decorator-ES7-TS-vs-no-decorators"><a href="#Decorator-ES7-TS-vs-no-decorators" class="headerlink" title="Decorator (ES7/TS) vs no-decorators"></a>Decorator (ES7/TS) vs no-decorators</h3><h2 id="End"><a href="#End" class="headerlink" title="End"></a>End</h2><p>如果你有更好Mobx使用的一些心得，欢迎交流！</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="posted-on font-asesome-icon">
<a href="" rel="bookmark">
<time class="updated" datetime="2020-12-20T14:03:17.710Z">2020-12-20</time>
</a>
</span>
<span class="cat-links font-asesome-icon">
<a href="/categories/web/" rel="category tag">web</a>
</span>
<span class="tags-links font-asesome-icon">
<a href="/tags/js/" rel="category tag">js</a>
<a href="/tags/react/" rel="category tag">react</a>
</span>
<span class="eye font-asesome-icon leancloud_visitors" id="/2020/12/20/mobx/" data-flag-title="Mobx在项目中的实践 及 与Redux的比较">
<span class="leancloud-visitors-count">
</span>
</span>
</footer><!-- .entry-footer -->
</article>
<div class="misc">
<a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
<nav id="page-nav" class="page-links">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/">下一页 »</a>
</nav>
</main>
</div>
<footer id="colophon" class="site-footer">
<div class="site-info">
<span>powered by <a href="https://hexo.io/">Hexo</a> theme by <a href="https://github.com/Troy-Yang/hexo-theme-twentyfifteen-wordpress">Troy</a> inspired by <a href="https://wordpress.org/themes/">wordpress</a></span>
</div><!-- .site-info -->
</footer>
</div>
<div id="infinite-footer">
<div class="container">
<div class="blog-info">
<a id="infinity-blog-title" href="#" rel="home" title="Scroll back to top">
Happy Coding, Happy Life!
</a>
</div>
<div class="blog-credits">
<span>蜀ICP备15004900号-1</span>
</div>
</div>
</div><!-- #infinite-footer -->
<!-- After footer scripts -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/main.js"></script>
<script>
(function () {
function leancloudSelector(url) {
url = encodeURI(url);
return document.getElementById(url).querySelector('.leancloud-visitors-count');
}
function addCount(Counter) {
var visitors = document.querySelector('.leancloud_visitors');
var url = decodeURI(visitors.id);
var title = visitors.dataset.flagTitle;
Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({ url })))
.then(response => response.json())
.then(({ results }) => {
if (results.length > 0) {
var counter = results[0];
leancloudSelector(url).innerText = counter.time + 1;
Counter('put', '/classes/Counter/' + counter.objectId, { time: { '__op': 'Increment', 'amount': 1 } })
.catch(error => {
console.error('Failed to save visitor count', error);
});
} else {
Counter('post', '/classes/Counter', { title, url, time: 1 })
.then(response => response.json())
.then(() => {
leancloudSelector(url).innerText = 1;
})
.catch(error => {
console.error('Failed to create', error);
});
}
})
.catch(error => {
console.error('LeanCloud Counter Error', error);
});
}
function showTime(Counter) {
var visitors = document.querySelectorAll('.leancloud_visitors');
var entries = [...visitors].map(element => {
return decodeURI(element.id);
});
Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({ url: { '$in': entries } })))
.then(response => response.json())
.then(({ results }) => {
for (let url of entries) {
let target = results.find(item => item.url === url);
leancloudSelector(url).innerText = target ? target.time : 0;
}
})
.catch(error => {
console.error('LeanCloud Counter Error', error);
});
}
let app_id = "wzqncxgqp9MCPiPERe3gnX2Q-gzGzoHsz";
let app_key = "CCtBiqyPtJWupuozt1393AXm";
let server_url = "https://wzqncxgq.lc-cn-n1-shared.com";
function fetchData(api_server) {
var Counter = (method, url, data) => {
return fetch(`${api_server}/1.1${url}`, {
method,
headers: {
'X-LC-Id': app_id,
'X-LC-Key': app_key,
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
};
if ($('.leancloud_visitors').length == 1) {
addCount(Counter);
} else if ($('.post-title-link').length > 1) {
showTime(Counter);
}
}
let api_server = app_id.slice(-9) !== '-MdYXbMMI' ? server_url : `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com`;
if (api_server) {
fetchData(api_server);
} else {
fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
.then(response => response.json())
.then(({ api_server }) => {
fetchData('https://' + api_server);