Стрипе је платформа за обраду плаћања која вам омогућава да додате унапред изграђену страницу за плаћање на веб локацију и прихватите и управљате онлајн плаћањима. Широко је популаран због своје лакоће коришћења, обимне документације, подршке за локална плаћања, опција прилагођавања и брендирања, претплата, фактурисања и спречавања превара.
Користећи Стрипе, можете да прихватате плаћања из различитих извора, укључујући кредитне и дебитне картице, Аппле Паи и Гоогле Паи.
Додавање Стрипе Цхецкоут-а у апликацију Нект.јс
Можете интегрисати Стрипе цхецкоут са апликацијама креираним помоћу различитих технологија укључујући Нект.јс.
Овај водич претпоставља да сте поставили Нект.јс сајт за е-трговину и пружа само водич о томе како да додате Стрипе цхецкоут на локацију.
Подешавање Стрипе налога и преузимање АПИ кључева
Да бисте користили Стрипе цхецкоут, потребно је да креирате Стрипе налог и добијете АПИ кључеве. АПИ кључеви се састоје од кључа за објављивање и тајног кључа, који ћете користити за аутентификацију захтева из ваше апликације Стрипе АПИ-ју.
Пратите ове кораке да бисте подесили Стрипе налог:
- Иди на Стрипе вебсите и кликните на дугме „Пријави се“.
- Унесите своју е-пошту, пуно име, земљу и лозинку и кликните на дугме „Креирај налог“.
- Потврдите своју е-пошту пратећи упутства у е-поруци коју ће вам послати Стрипе.
- На контролној табли са тракама кликните на „Активирај плаћања“ и одговорите на брза питања да бисте довршили процес подешавања налога. Ова питања могу да се односе на назив предузећа, адресу и информације о банци. За потребе развоја, користите тестни режим.
- Копирајте АПИ кључеве са картице „Програмери“ у .енв датотеку у фасцикли апликације.
Сада ћете моћи да приступите Стрипе налогу помоћу АПИ кључева.
Инсталирање Стрипе нпм пакета
Покрените ову команду да бисте инсталирали Стрипе нпм пакет.
нпм инсталл стрипе
Увезите Стрипе библиотеку на страницу компоненте за плаћање.
увоз Стрипе из'пруга';
У фасцикли АПИ креирајте нову датотеку под називом цхецкоут-сессион.јс датотека. Иницијализујте Стрипе објекат помоћу АПИ кључева које сте преузели са своје Стрипе контролне табле.
конст пруга = захтевају('пруга')(процесс.енв. СТРИПЕ_СЕЦРЕТ_КЕИ);
У функцији руковаоца, узмите ставке за проверу из параметара тела.
извозУобичајеноасинцфункцијаруковалац(рек, рес) {
конст { итем } = рек.боди;
};
Креирајте објекат сесије преузимања функцији руковаоца и проследите ставке.
конст сесија = чекати стрипе.цхецкоут.сессионс.цреате({
Паимент_метход_типес: ['карта'],
лине_итемс: [
ставка,
],
режим: 'плаћање',
успех_урл: `${рек.хеадерс.оригин}/?success=true`,
цанцел_урл: `${рек.хеадерс.оригин}/?canceled=true`,
});
Ево шта значе чворови које прослеђујете објекту сесије:
- Паимент_метход_типес: Начин плаћања који сесија плаћања прихвата. Прегледајте листу доступних начина плаћања у Стрипе документација.
- лине_итемс: Листа ставки које корисник купује.
- режим: Режим сесије наплате. Ако ставке за наплату укључују најмање једну ставку која се понавља, прође „претплату“.
- успех_урл: УРЛ Стрипе ће преусмерити кориснике ако је уплата успешна
- цанцел_урл: УРЛ Стрипе ће преусмерити кориснике ако откажу плаћање.
Све у свему, датотека цхецкоут-сессион.јс би требало да изгледа овако:
извозУобичајеноасинцфункцијаруковалац(рек, рес) {
ако (рек.метход 'ПОШТА') {
конст {царт} = рек.боди;покушати {
конст сесија = чекати стрипе.цхецкоут.сессионс.цреате({
лине_итемс: [
колица
],
режим: 'плаћање',
успех_урл: `${рек.хеадерс.оригин}/success`,
цанцел_урл: `${рек.хеадерс.оригин}/cancele`,
});
рес.редирецт(303, сессион.урл);
} улов (ерр) {
рес.статус (ерр.статусЦоде || 500).јсон (ерр.мессаге);
}
} друго {
рес.сетХеадер('Дозволи', 'ПОШТА');
рес.статус(405).крај('Метод није дозвољен');
}
}
Ова функција сада користи три/цатцх за преусмеравање корисника када дође до грешке током плаћања. Сада када сте креирали АПИ руту која ће обрадити плаћање, следећи корак је да креирате компоненту за одјаву која ће управљати процесом плаћања.
Погледајте овај пост на креирање АПИ рута у Нект.јс за детаљније објашњење Нект.јс АПИ рута.
Креирање Цхецкоут компоненте
Да бисте обрадили плаћање, потребно је да инсталирате библиотеку @стрипе/стрипе-јс користећи НПМ.
нпм инсталл @стрипе/стрипе-јс
Библиотека @стрипе/стрипе-јс је услужни програм за учитавање који ће вам помоћи да учитате инстанцу Стрипе.јс.
Када се инсталација заврши, креирајте нову датотеку у директоријуму /цомпонентс под називом /цомпонентс/цхецкоут.јс. Затим позовите функцију лоадстрипе из библиотеке @стрипе/стрипе-јс, прослеђујући кључ за објављивање као аргумент.
увоз { лоадСтрипе } из'@стрипе/стрипе-јс';
конст стрипеПромисе = лоадСтрипе(
процес.енв. НЕКСТ_ПУБЛИЦ_СТРИПЕ_ПУБЛИСХАБЛЕ_КЕИ
);
лоадстрипе() враћа обећање које се решава са новокреираним Стрипе објектом када се Стрипе.јс учита.
Затим додајте функцију за креирање сесије плаћања у компоненти.
извозУобичајенофункцијаПровери({царт}) {
конст хандлеЦхецкоут = асинц () => {
покушати {
конст пруга = чекати стрипеПромисе;конст цхецкоутСессион = чекати акиос.пост("/апи/цхецкоут-сессион", {
колица,
});конст резултат = чекати стрипе.редирецтТоЦхецкоут({
сессионИд: цхецкоутСессион.дата.ид,
});
ако (ресулт.еррор) {
упозорење (резултат.еррор.мессаге);
}
} улов (грешка) {
конзола.лог (грешка);
}
};
повратак (
</div>
);
}
Ова функција користи Акиос за позивање АПИ-ја који сте креирали у фасцикли /апи да бисте преузели сесију плаћања.
Додајте дугме за одјаву у повратном исказу које ће покренути функцију хандлеЦхецкоут када се кликне.
Можете позвати компоненту за наплату на страници корпе.
Руковање преусмеравањима са Стрипе-а
У рути АПИ-ја за одјаву дефинисали сте УРЛ за успех и УРЛ за отказивање који трака треба да преусмери корисника када је процес успешан или неуспешан. УРЛ за отказивање се мапира на /цанцел руту, док се УРЛ за успех мапира на /суццесс руту. Додајте две компоненте у фасциклу /пагес под називом успех и откажите да бисте управљали овим УРЛ-овима.
У пагес/суццесс.јс додајте компоненту успеха.
извозУобичајенофункцијаУспех() {
повратак<див>Плаћање је успешнодив>;
}
У пагес/цанцел.јс додајте компоненту за отказивање.
извозУобичајенофункцијаПоништити, отказати() {
повратак<див>Дошло је до грешке током плаћањадив>;
}Сада ће Стрипе преусмерити на било коју од ових страница у зависности од статуса плаћања.
Ако користите Нект.јс 13, погледајте овај водич како функционише директоријум апликације у Нект.јс 13 да бисте прешли из директоријума /пагес.
Додатне опције прилагођавања за страницу за плаћање
На Стрипе контролној табли можете да прилагодите страницу за плаћање тако да одговара изгледу вашег бренда. Можете да додате логотип, икону, боју бренда, боју акцента, па чак и да користите сопствени прилагођени домен. Поред тога, када креирате сесију плаћања, можете додати начине плаћања које желите и навести језик који Стрипе треба да приказује на страници за плаћање. Све ове опције вам омогућавају да прилагодите процес плаћања како би одговарао вашој апликацији.
Зашто користити Стрипе за страницу за плаћање?
Иако можете да направите сопствену услугу обраде плаћања, коришћење платформе за плаћање као што је Стрипе је обично боља опција. Стрипе цхецкоут вам помаже да смањите време развоја, омогућавајући вам да почнете да прихватате плаћања у кратком времену.
Штавише, добијате додатне функције као што су ПЦИ усклађеност, опоравак колица, могућности попуста и могућност прикупљања информација о испоруци и слања фактура након плаћања.
