Ամբողջովին ձևաչափված տարբերակի համար կարող եք դիտել այս ձեռնարկը մեր կայքում՝



Սթրիփում ամսական կրկնվող բաժանորդագրությունների ստեղծում Node.js-ի միջոցով (Մաս 3)
Որպես հիշեցում, այս ձեռնարկը բաժանված է 3 մասի. ՄԱՍ 1. Տրամադրում է ընդհանուր ակնարկ և ցույց է տալիս, թե ինչպես…codenebula.io



Որպես հիշեցում, այս ձեռնարկը բաժանված է 3 մասի.

ՄԱՍ 1. Տրամադրում է ընդհանուր ակնարկ և ցույց է տալիս, թե ինչպես ստեղծել բաժանորդագրության պլաններ Stripe Dashboard-ի միջոցով:

ՄԱՍ 2. Անցնում է լավագույն փորձին, երբ խոսքը վերաբերում է Node-ի, Express-ի, Stripe API-ի և այլնի միջոցով ձեր աշխատանքային տարածքը կարգավորելուն:

ՄԱՍ 3 (Դուք այստեղ եք). ցույց է տալիս, թե ինչպես օգտագործել հաճախորդի մուտքագրված քարտի համարը Stripe Token, Հաճախորդ և Բաժանորդագրություն ստեղծելու համար:

Այստեղ տեղադրված բոլոր ծածկագրերը կարող եք գտնել հետևյալ հասցեով՝

https://github.com/code-nebula/stripe-recurring-subscriptions

Դուք կարող եք նկատել, որ մեր պահեստի որոշ կոդեր ներկայացված չեն այս ձեռնարկում: Դա պայմանավորված է նրանով, որ պահեստը ներառում է ծածկագիր

  1. Ադմինիստրատորի տեսք. որտեղ կարող եք ստեղծել «Արտադրանքներ» և «պլաններ» Stripe API-ի միջոցով: Ինչպես դա անել, մենք կքննարկենք առանձին բլոգի գրառման մեջ:
  2. Հաճախորդի դիտում — Որտեղ ձեր օգտվողները կարող են դիտել և վճարել ձեր «պլանները»: Մենք լուսաբանում ենք, թե ինչպես դա կարգավորել այս ձեռնարկում:

Եթե ​​այս Stripe տերմիններից որևէ մեկը ձեզ անծանոթ է, մի անհանգստացեք, դրանք ներառված են Մաս 1-ում:

Մենք վերջին անգամ թողեցինք «signUp.html» էջը ներկայացնելու խնդրանքը: Այժմ մենք իրականում կոդավորում ենք այդ էջը:

Այն նման կլինի

6. Ստեղծեք ձեր վճարման ձևը և ստեղծեք Stripe Token

Նախ, մենք պետք է ստեղծենք ձև, որտեղ ձեր հաճախորդը կարող է մուտքագրել իր կրեդիտ քարտի տվյալները:

Անվտանգության նկատառումներից ելնելով, մենք կցանկանայինք խուսափել վարկային քարտի այդ չմշակված տեղեկատվությունը մեր սերվերին ուղարկելուց: Stripe-ը հասկանում է անվտանգության այս մտահոգությունը և այդպիսով առաջարկում է մի քանի տարբերակներ՝ հաճախորդի կողմից այդ տվյալները ապահով հավաքելու համար:

Այս ձեռնարկի նպատակների համար մենք կօգտագործենք Stripe Elements՝ քարտի տեղեկատվությունը մշակելու համար:

Եթե ​​հիշում եք վերջին մասից, մենք ներառել ենք Stripe հաճախորդի կողմից գրադարանը մեր «views/base.html» ֆայլում: Մենք այն ներառել ենք «base.html» ֆայլում՝ ի տարբերություն մեր գրանցման էջում՝ «signUp.html», քանի որ Stripe-ը խորհուրդ է տալիս ներառել այս գրադարանը մեր կայքի յուրաքանչյուր էջում՝ խարդախությունից լավագույնս պաշտպանվելու համար:

<script src="https://js.stripe.com/v3/"></script>

Քանի որ մեր բոլոր HTML ֆայլերը տարածում են «views/base.html», մենք մուտք ունենք այս գրադարանը մեր «signUp.html» ֆայլում:

Եկեք անցնենք այս ֆայլի տեղադրմանը.

Եթե ​​նախընտրում եք անմիջապես տեսնել կոդը ստորև բերված հատվածների փոխարեն, խնդրում ենք ստուգել այս Github հղումը.



code-nebula/stripe-recurring-subscriptions
Ստեղծեք կրկնվող բաժանորդագրություններ Stripe-ում՝ օգտագործելով Node - code-nebula/stripe-recurring-subscriptionsgithub.com



HTML բաժին — դիտումներ/signUp.html

Այստեղ մենք վերցնում ենք փոխանցված պարամետրերը (product և plan) և մուտք ենք գործում դրանց համապատասխան հատկությունները (product.name, plan.name, plan.amount և այլն): Մենք դա անում ենք հաճախորդին ցույց տալու համար, թե որ ապրանքն ու պլանն են նրանք գրանցվում: Կայքի իրական տարբերակում դուք հավանաբար կցուցադրեիք միայն պլանի մասին տեղեկատվությունը (քանի որ ապրանքը ներկայացնում է կայքը):

Այնուհետև մենք ստեղծեցինք պայմանական բաժին, որը ներկայացնում է կամ հաջողության կամ սխալի հաղորդագրություն: Մի անհանգստացեք այս բաժնի մասին հենց հիմա. այն արդիական է դառնում միայն վճարման ձևը ներկայացնելուց հետո, և մեր սերվերը մեզ ուղարկում է կամ «հաջողություն» կամ «սխալ» պարամետր՝ կախված նրանից, թե ինչպես է վճարումը մշակվել:

Հաջորդը, մենք ստեղծեցինք մեր վճարման ձևը: Ինչպես նախկինում, մենք օգտագործում ենք թաքնված մուտքագրման դաշտերի հզորությունը՝ մեր արտադրանքի և պլանի վերաբերյալ տվյալներ հավաքելու համար. այս տվյալները մեզ անհրաժեշտ կլինեն, երբ մենք

  1. Ստեղծեք Բաժանորդագրություն ձևը ներկայացնելուց հետո և
  2. Վերարտադրեք այս էջը հաջողության կամ սխալի հաղորդագրությամբ

Այնուհետև մենք ստեղծում ենք մուտքագրման պարզ դաշտ՝ հաճախորդի էլ. Հիմա գալիս է հետաքրքիր մասը. Մենք ստեղծում ենք կոնտեյների div մեր Stripe Elements օրինակի համար՝ <div id="card-element">

Մենք անում ենք նույն բանը և ստեղծում ենք կոնտեյների div սխալի հաղորդագրությունների համար, որոնք մեզ ուղարկում է Stripe Elements օրինակը. <div id="card-errors" role="alert">

Ի վերջո, մենք ներառում ենք «ներկայացնել» տիպի մուտքագրում, որպեսզի իրականում ներկայացնենք մեր ձևը:

Javascript բաժին — դիտումներ/signUp.html

Նշում. Ամբողջ Javascript-ը, բացառությամբ օգնականի stripeTokenHandler ֆունկցիայի, փաթաթված է if (document.getElementById('card-element')) պայմանական բլոկով, քանի որ գրանցման էջը կրկնապատկվում է որպես հաստատման էջ: Հաստատման էջում մենք չենք տրամադրում վճարման ձևը (տե՛ս վերևի HTML կոդը հաջողությամբ, այլապես սխալի դեպքում և այլ կերպ արգելափակումներ):

Քանի որ ես կբացատրեմ Javascript-ը բազմաթիվ կոդի հատվածներում, ես ստորև չեմ ներառի փաթաթման պայմանական բլոկը, բայց այն հասանելի է Github էջում:

Նախ, մենք կկանչենք հաճախորդի կողմից Stripe Javascript գրադարանը՝ անցնելով մեր հրապարակվող թեստային բանալի: Ի տարբերություն մեր Stripe Secret փորձարկման բանալիի, մեր Stripe Publishable թեստային բանալին գաղտնի չէ, ուստի ճիշտ չէ ներառել ձեր դիմումի կոդը:

Այնուհետև մենք ստեղծում ենք Stripe Elements-ի օրինակ:

Քանի որ Stripe Elements օրինակը փաթաթված է iframe-ով, դժվար է այն ամբողջը ոճավորել մեր սեփական CSS-ով: Այնուամենայնիվ, Stripe-ը հաշվի է առնում դա, և եկեք նշենք մեր հատուկ ոճերի օբյեկտը, որպեսզի օրինակը կարողանա համապատասխանել մեր մնացած ձևին: Նկատի ունեցեք, որ այս ոճի օբյեկտն ազդում է իրենց մուտքագրման վրա, ՈՉ թե ընդհանուր Stripe Elements կոնտեյների վրա (որը մշակվում է ստորև CSS բաժնում): “base” հատկությունը վերաբերում է նորմալ վիճակին, մինչդեռ “անվավեր” վերաբերում է սխալի վիճակին:

Հաջորդը, մենք ասում ենք մեր Stripe Elements օրինակին, որ հատուկ ստեղծի «քարտ» տարրը: «Քարտ» տարրը մուտքագրման պարզ դաշտ է, որը պարունակում է բաժիններ վարկային քարտի համարի, CVC համարի, ժամկետի և փոստային ինդեքսի համար:

Այնուհետև մենք կցում կամ տեղադրում ենք Stripe Elements քարտի օրինակը մեր HTML-ի div-ին «card-element» ID-ով:

Այնուհետև մենք ստեղծեցինք իրադարձությունների ունկնդիր քարտի օրինակում: Այն լսում է մուտքագրման ցանկացած փոփոխություն, և եթե սխալ կա, այն լրացնում է «#card-errors» բաժանման մեջ:

Հետևյալ կոդը ընդհատում է «ներկայացնել» ձևի սկզբնական իրադարձությունը, երբ սեղմում ենք «Վճարել» կոճակը: event.preventDefault()-ը կանխում է ձևի ներկայացումը և տվյալների փոխանցումը մեր Node սերվերին:

Հաջորդ բաժինը ներկայացնում է Stripe-ի կարևոր հատկանիշը՝ tokenization:

Tokens-ը հիմնականում այն ​​է, թե ինչպես է Stripe-ը հավաքում և վերացում քարտի կամ բանկային գաղտնի տեղեկությունները: Հաճախորդի կողմից թոքենների ստեղծումը (ինչպես մենք կանենք Stripe Elements-ի դեպքում) երաշխավորում է, որ քարտի տվյալները չեն փոխանցվում մեր սերվերին: Եթե ​​այն փոխանցվեր մեր սերվերին, ինչ-որ մեկը կարող է պոտենցիալ ընդհատել կամ վերահսկել հարցումը և տեսնել, որ փոխանցվում են զգայուն տվյալները:

Նշանները, այնուամենայնիվ, անվտանգ են փոխանցման համար, քանի որ դրանք վերացական են:

Նկատի ունեցեք, որ նշանները չեն կարող օգտագործվել մեկից ավելի անգամ: Ահա թե ինչու, ինչպես շուտով կտեսնեք, մենք պետք է ստեղծենք Stripe Հաճախորդ: Մենք կարող ենք կցել նշան՝ որպես Հաճախորդի համար վճարման աղբյուր և այդպիսով ստեղծել կրկնվող գանձումներ:

Այսպիսով, ստորև բերված կոդում մենք կանչում ենք createToken մեթոդը Stripe-ի հաճախորդի կողմի գրադարանից և անցնում մեր Stripe Elements քարտի օրինակում:

Եթե ​​սխալ կա, մենք լրացնում ենք «#card-errors» div-ը, այլապես հաջողությամբ վերադարձված նշանը փոխանցում ենք stripeTokenHandler կոչվող օգնական ֆունկցիայի:

stripeTokenHandler ֆունկցիան, ըստ էության, գրավում է վճարման ձևը և ավելացնում ևս մեկ թաքնված մուտքագրման դաշտ՝ նշանային արժեքով:

CSS բաժին — views/signUp.html

Այս կոդը վերցված է անմիջապես Stripe Elements QuickstartCSS բաժնից: Այն օգտագործվում է Stripe Elements կոնտեյների ոճավորման համար, այլ ոչ թե իրական մուտքերը (ինչի համար օգտագործվել է վերը նշված հատուկ ոճավորումը):

7. Ստեղծեք Հաճախորդ և Բաժանորդագրություն

Ինչպես նշեցի վերևում, մենք պետք է նշանը կցենք Stripe Հաճախորդին: Եկեք վերադառնանք մեր “stripe-functions.js” ֆայլին և ստեղծենք օգնական ֆունկցիա այս տրամաբանությունը կարգավորելու համար:

Մենք կստեղծենք նոր գործառույթ, որը կոչվում է createCustomerAndSubscription, որը շղթայական կներկայացնի հաճախորդ ստեղծելու գործընթացը նշանից, այնուհետև կստեղծի հաճախորդից բաժանորդագրություն:

Մենք զանգում ենք stripe.customers.create() (API փաստաթղթեր) և փոխանցում հաճախորդի էլ.փոստը և նշանը:

(Նկատի ունեցեք, որ մենք նշում ենք նշանը որպես աղբյուր: Stripe տերմինաբանության աղբյուրը ըստ էության հաճախորդի վճարման եղանակի ներկայացումն է: Դրանք կարող են լինել նշաններ, ինչպես նաև այլ բաներ:)

Հաճախորդ ստեղծելուց հետո մենք վերցնում ենք արդյունքը (Հաճախորդի օբյեկտ) և կանչում Stripe API-ի մեկ այլ մեթոդ՝ stripe.subscriptions.create (API փաստաթղթեր): Մենք անցնում ենք հաճախորդի ID-ն և itemsզանգվածում ստեղծում պլանի օբյեկտ: Ուշադրություն դարձրեք, որ մենք ըստ էության միացնում ենք Հաճախորդին պլանի հետ: (Հիշու՞մ եք 1-ին մասի գծապատկերը):

api/stripe-functions.js

Այժմ մենք պատրաստ ենք արտահանել այս գործառույթը և օգտագործել այն. համոզվեք, որ ձեր «module.exports» ֆայլի ներքևի մասում այսպիսի տեսք ունի.

app.js

Այժմ, երբ մենք ստեղծել ենք մեր օգնական գործառույթը Stripe Հաճախորդ և Բաժանորդագրություն ստեղծելու համար, եկեք տեսնենք, թե ինչպես է այն օգտագործվում, երբ ներկայացվում է մեր գրանցման էջը:

Նախ մենք ստեղծում ենք արտադրանք և պլանավորում օբյեկտներ, որոնք կփոխանցվեն որպես պարամետրեր հաստատման էջում (հիշենք, որ «signUp.html»-ը կրկնապատկվում է որպես գրանցման և հաստատման էջ):

Այնուհետև մենք կանչում ենք createCustomerAndSubscription մեթոդը և անցնում req.body որպես ֆունկցիայի պարամետր, քանի որ հարցման մարմինը պարունակում է նշան և պլանի տեղեկատվություն:

Եթե ​​հաճախորդի և բաժանորդագրության ստեղծումը հաջողված է, մենք կրկին ցուցադրում ենք գրանցման էջը, բայց այժմ success պարամետրով: Հակառակ դեպքում, մենք գրանցման էջը ներկայացնում ենք errorպարամետրով:

Եվ հիմա մենք պատրաստվում ենք փորձարկել մեր ձևը:

Գործարկեք ձեր հավելվածը npm start-ի միջոցով և ևս մեկ անգամ անցեք localhost:3000/customerView:

Կտտացրեք «Գրանցվել» կոճակը պլաններից որևէ մեկի վրա: Այնուհետև դուք պետք է տեսնեք վճարման ձևը

Մուտքագրեք ցանկացած էլփոստ և մուտքագրեք Stripe-ի թեստի համարը 4242 4242 4242 4242: Այնուհետև ընտրեք ցանկացած CVC համար, ապագա պիտանելիության ժամկետ և ԱՄՆ: Փոստային ինդեքս:

Սեղմեք «Վճարել» կոճակը և կտեսնեք հաջողության հետևյալ էջը.

Ստուգելու համար, թե արդյոք հաճախորդը և բաժանորդագրությունը իրականում ստեղծվել են, նավարկեք ձեր Stripe Dashboard:

Կողային տողում սեղմեք «Վճարումներ» և ընդլայնվելուց հետո սեղմեք «Բաժանորդագրություններ»: Այժմ դուք պետք է տեսնեք հետևյալը.

Եթե ​​սեղմեք Հաճախորդի վրա, ավելի մանրամասն տեսք կունենաք.

Եվ վերջ! Դուք ստեղծել եք ձեր առաջին կրկնվող բաժանորդագրությունը Stripe-ի միջոցով: Շնորհավորում ենք այսքանը հասնելու համար:

8. Հաջորդ քայլերը

Մինչ այժմ մենք ամեն ինչ զարգացնում ենք թեստային միջավայրում: Հաջորդ քայլերը կլինեն ձեր հայտի ստեղծումը կենդանի/արտադրական միջավայրի համար:

Ձեզ անհրաժեշտ կլինի

  • Ակտիվացրեք ձեր հաշիվը
  • Անջատեք ձեր փորձնական Stripe Secret բանալին և Stripe Publishable Key ուղիղ տարբերակների համար
  • Ծառայեք ձեր կայքը HTTPS-ի միջոցով՝ վճարման տեղեկատվությունը անվտանգ և անվնաս պահելու համար

Եթե ​​դուք հետաքրքրված եք այս հաջորդ քայլերով և ցանկանում եք ավելի մանրամասն ուղեցույց, խնդրում ենք տեղեկացնել մեզ:

Ցանկանու՞մ եք պարզ և ինտուիտիվ միջոց՝ ձեր Stripe-ի բաժանորդագրություններին հետևելու համար:

ProfitKit-ը ձեր Stripe հաշվի համար անվճար օրացույց է, որը թույլ է տալիս պարզ և արդյունավետ եղանակով հետևել ժամկետանց փորձարկումներին, առաջիկա չեղարկումներին և սպասվող վճարումներին: Google Calendar-ի հետ ինտեգրումը ներառված է մեր անվճար պլանում:

Գրանցվեք անվճար https://www.profitkit.io կայքում: