- \n
- \n
- “@angular\/core”: “^15.0.0”<\/ul>\n<\/li>\n<\/ul>\n
- \n
- “ngx-stripe”: “^14.1.0”<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
- “@stripe\/stripe-js”: “^1.44.1”<\/ul>\n
Angular\u5e94\u7528\u7684\u8bbe\u7f6e<\/h2>\n
\u9996\u5148\u8981\u8bbe\u7f6e\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
$ npm i -g @angular\/cli\r\n$ ng new ng-stripe-demo\r\n<\/code><\/pre>\n\u5f53\u60a8\u9996\u6b21\u8fd0\u884cng\u547d\u4ee4\u65f6\uff0c\u4f1a\u8be2\u95ee\u60a8\u662f\u5426\u8981\u8bbe\u7f6e\u81ea\u52a8\u8865\u5168\u3002<\/p>\n
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options \r\nand autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) (Y\/n) \r\n<\/code><\/pre>\n\u9664\u975e\u4f7f\u7528\u5171\u4eab\u673a\u5668\u6216\u8005\u5c06\u6765\u6ca1\u6709\u8ba1\u5212\u4f7f\u7528Angular\uff0c\u5426\u5219\u5efa\u8bae\u4f7f\u7528y\u6765\u8fdb\u884c\u8bbe\u7f6e\u3002<\/p>\n
\u4e3a\u4e86\u4f7f\u672c\u6b21\u6f14\u793a\u7b80\u5355\u660e\u4e86\uff0c\u7701\u7565\u4e86\u8def\u7531\u548cCSS\u7684\u5143\u8bed\u8a00\u3002<\/p>\n
? Would you like to add Angular routing? No\r\n? Which stylesheet format would you like to use? CSS\r\n<\/code><\/pre>\n\u4e00\u65e6\u8bbe\u7f6e\u5b8c\u6210\uff0c\u5c06\u4f1a\u663e\u793a\u4ee5\u4e0b\u6d88\u606f\u3002<\/p>\n
\u2714 Packages installed successfully.\r\n Successfully initialized git.\r\n<\/code><\/pre>\n\u8ba9\u6211\u4eec\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\u5e76\u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668\u3002<\/p>\n
$ <\/span>ng serve\r\nBuild at: 2022-11-30T08:43:42.491Z - Hash: 04ce66ad26425dbf - Time: 5930ms\r\n\r\n**<\/span> Angular Live Development Server is listening on localhost:4200, open your browser on http:\/\/localhost:4200\/ **<\/span>\r\n\r\n\r\n\u2714 Compiled successfully.\r\n<\/code><\/pre>\n\u8bbf\u95ee\u663e\u793a\u7684URL(http:\/\/localhost:4200\/)\uff0c\u786e\u4fdd\u6f14\u793a\u754c\u9762\u6b63\u5e38\u663e\u793a\u3002<\/p>\n
![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d36f237434c4406c715d9\/19-0.png\" "\\"\\"")
<\/div>\n\u4f7f\u7528ngx-stripe\u5c06Stripe\u7684\u652f\u4ed8\u8868\u5355\u96c6\u6210\u8fdb\u6765\u3002<\/h2>\n
\u4ece\u8fd9\u91cc\u5f00\u59cb\u4f7f\u7528ngx-stripe\uff0c\u5c06\u652f\u4ed8\u8868\u5355\u96c6\u6210\u8fdb\u6765\u3002<\/p>\n
<\/p>\n
\u56fe\u4e66\u9986\u7684\u5b89\u88c5\u548c\u8bbe\u7f6e<\/h3>\n
\u8bf7\u6309\u7167\u6587\u6863\u7684\u6307\u793a\u5b89\u88c5\u5e93\u3002<\/p>\n
$ <\/span>npm install <\/span>ngx-stripe @stripe\/stripe-js\r\n<\/code><\/pre>\nngx-stripe\u768414.1.0\u7248\u672c\u4e4b\u524d\uff0c\u5728\u5b89\u88c5Angular v15\u65f6\u53ef\u80fd\u4f1a\u51fa\u73b0\u9519\u8bef\u3002
\n\u6839\u636eGitHub\u7684\u95ee\u9898\u62a5\u544a\uff0c\u5b83\u6307\u51fa\u201c\u7531\u4e8e\u5185\u90e8\u53d8\u66f4\u9700\u8981\u66f4\u591a\u65f6\u95f4\u6765\u53d1\u5e03\u3002\u201d
\n\u76f8\u5173\u94fe\u63a5\uff1ahttps:\/\/github.com\/richnologies\/ngx-stripe\/issues\/187
\n\u76ee\u524d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7npm install ngx-stripe –force\u8fdb\u884c\u5b89\u88c5\uff0c\u5982\u679c\u5b89\u88c5\u4e0d\u6210\u529f\uff0c\u8bf7\u5c1d\u8bd5\u4f7f\u7528\u6b64\u65b9\u6cd5\u3002<\/div>\n\u8ba9\u6211\u4eec\u5728NgModule\u4e2d\u52a0\u8f7d\u5df2\u5b89\u88c5\u7684ngx-stripe\u3002<\/p>\n
\u5c06 src\/app\/app.module.ts \u6587\u4ef6\u4fee\u6539\u5982\u4e0b\u3002<\/p>\n
import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\n+<\/span>import<\/span> {<\/span> NgxStripeModule<\/span> }<\/span> from<\/span> '<\/span>ngx-stripe<\/span>'<\/span>;<\/span>\r\n<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n declarations<\/span>:<\/span> [<\/span>\r\n AppComponent<\/span>\r\n ],<\/span>\r\n imports<\/span>:<\/span> [<\/span>\r\n BrowserModule<\/span>,<\/span>\r\n+ <\/span> NgxStripeModule<\/span>.<\/span>forRoot<\/span>(<\/span>'<\/span>pk_test_\u304b\u3089\u59cb\u307e\u308bStripe\u306e\u516c\u958b\u53ef\u80fdAPI\u30ad\u30fc<\/span>'<\/span>)<\/span>\r\n<\/span> ],<\/span>\r\n providers<\/span>:<\/span> [],<\/span>\r\n bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n\u8c03\u7528API\u6765\u83b7\u53d6Payment Intent\u3002<\/h3>\n
\u5728\u663e\u793aStripe.js\u7684\u5361\u7247\u5143\u7d20\u4e4b\u524d\uff0c\u9700\u8981\u9884\u5148\u521b\u5efaPayment Intent\u6216Setup Intent\uff08\u4ec5\u4fdd\u5b58\u5361\u7247\u4fe1\u606f\u7b49\u60c5\u51b5\uff09\u3002<\/p>\n
\u5728Stripe\u6587\u6863\u7684\u5feb\u901f\u5165\u95e8\u4e2d\u51c6\u5907API\u3002<\/p>\n
<\/p>\n
\u5728\u53d6\u5f97\u7684\u4ed8\u6b3e\u610f\u56fe\u4e2d\u663e\u793a\u652f\u4ed8\u8868\u5355\u3002<\/h3>\n
\u901a\u8fc7\u8c03\u7528\u51c6\u5907\u597d\u7684API\uff0c\u4f8b\u5982\u5feb\u901f\u5165\u95e8\uff0c\u5c55\u793a\u652f\u4ed8\u8868\u5355\u3002<\/p>\n
\u7531\u4e8e\u8981\u4f7f\u7528HttpClientModule\uff0c\u6240\u4ee5\u9700\u8981\u5148\u5728src\/app\/app.module.ts\u4e2d\u8fdb\u884c\u8bbe\u7f6e\u3002<\/p>\n
\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\n+<\/span>import<\/span> {<\/span> HttpClientModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\n<\/span>import<\/span> {<\/span> NgxStripeModule<\/span> }<\/span> from<\/span> '<\/span>ngx-stripe<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n declarations<\/span>:<\/span> [<\/span>\r\n AppComponent<\/span>\r\n ],<\/span>\r\n imports<\/span>:<\/span> [<\/span>\r\n BrowserModule<\/span>,<\/span>\r\n+ <\/span> HttpClientModule<\/span>,<\/span>\r\n<\/span> NgxStripeModule<\/span>.<\/span>forRoot<\/span>(<\/span>'<\/span>pk_test_\u304b\u3089\u59cb\u307e\u308bStripe\u306e\u516c\u958b\u53ef\u80fdAPI\u30ad\u30fc<\/span>'<\/span>)<\/span>\r\n ],<\/span>\r\n providers<\/span>:<\/span> [],<\/span>\r\n bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n\u5c06src\/app\/app.component.ts\u8fdb\u884c\u5982\u4e0b\u66f4\u6539\u3002<\/p>\n
-<\/span>import<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n<\/span>+<\/span>import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n<\/span>+<\/span>import<\/span> {<\/span> HttpClient<\/span> }<\/span> from<\/span> '<\/span>@angular\/common\/http<\/span>'<\/span>;<\/span>\r\n<\/span>+<\/span>import<\/span> {<\/span> Observable<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\n<\/span>\r\ntype<\/span> PaymentIntentAPIResponse<\/span> =<\/span> {<\/span>\r\n clientSecret<\/span>:<\/span> string<\/span>;<\/span>\r\n}<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n selector<\/span>:<\/span>
<\/p>\n
- \n
- \n