스트라이프 결제 게이트웨이

동일한 URL의 클라이언트 코드 및 서버 코드

일반적인 결제 게이트웨이이며 개발자로서 클릭 상거래 목적으로 이를 통합해야 할 수 있습니다.

요청하려면 결제 버튼이 필요합니다.
Javascript 파일에서 스크립트를 연결하여 단추를 선택하고 기능을 포함하도록 하십시오.

서버 생성 → 결제 요청 처리 . 이는 결제 세부 정보를 조작하지 않도록 클라이언트 측에서 멀리 떨어진 서버에서 처리되어야 합니다.

익스프레스 서버 생성

익스프레스 서버를 설정합니다. 디렉토리를 만들어서mkdir server

npm init -y를 초기화하여 이 디렉토리에 새 프로젝트를 설정합니다.

환경 변수를 로드하는 데 필수적인 스트라이프 라이브러리 및 dotenv 라이브러리인 express 를 설치합니다

.

서버가 변경될 때마다 자동 다시 로드/다시 시작을 위한 개발 종속성 nodemon을 추가합니다.(역동성)

Server.js 상용구 로직

dotenv 및 config()를 사용하여 설정한 환경 변수를 로드합니다.

익스프레스 필요

결제 기능이 호출될 때 수행되는 호출은 API와 유사하므로 정보를 json 형식으로 전송해야 합니다

.

스트라이프를 요구하여 설정합니다.

상점에서 아이템 선언 → DB에서 불러올 수 있습니다. [ 이렇게 하면 클라이언트가 제품 정보를 수정하지 않습니다]. 제품은 ID가 제품 이름 및 가격에 대한 각각의 값을 갖는 형식과 같은 사전으로 선언됩니다. 지도 기능을 활용합니다.

클라이언트는 서버에 ID와 수량만 전송합니다. 나머지는 서버에 의해 채워집니다.

앱이 요청을 받는 포트를 수신해야 합니다. 내 경우 포트 3000

require('dotenv').config()

const express = require('express')
const app = express()

//calls shall be made like apis. We need to send the data packets in json
app.use(express.json())
app.use(express.static('public'))

const stripe = require('stripe')(process.env.STRIPE_PRIVATE_KEY)


const storeItems= new Map([
    [1, {priceInCents:10000, name:"White Jordan Sneakers"}],
    [2, {priceInCents:15000, name: "Customized Airforce Sneakers"}],
])

app.post('/create-checkout-session', async(req,res)=>{
    try{
      const session =await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        mode:'payment',
        line_items: req.body.items.map(item =>{
            const storeItem = storeItems.get(item.id)
            return {
                price_data: {
                    currency:'usd',
                    product_data:{
                        name:storeItem.name
                    },
                    unit_amount: storeItem.priceInCents
                },
                quantity:item.quantity,

            }
        }),
        success_url:`${process.env.SERVER_URL}/success.html`,
        cancel_url:`${process.env.SERVER_URL}/cancel.html`
        })
        res.json({url: session.url})
    }catch(e){
        res.status(500).json({error: e.message})
    }

})
app.listen(3000)

모든 클라이언트 논리 파일이 저장되는 공용 디렉터리를 만듭니다.
서버 javascript 파일에서 새로 생성된 이 디렉토리에 클라이언트 측 코드가 상주하도록 정의해야 합니다.
app.use(express.static(”public”)

const button = document.getElementById("button")
button.addEventListener("click",()=>{
    fetch('/create-checkout-session',{
        method:'POST',
        headers:{
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            items: [
                {id: 1, quantity:2},
                {id:2, quantity:2}
            ]
        })           
        }).then(res => {
            if (res.ok) return res.json()
            return res.json.then(json => Promise.reject(json))
        }).then (({url })=>{
            console.log(url)
            //window.location = url
        }).catch(e=> {
            console.error(e.error)
        })
})

클라이언트와 서버 통합

이벤트 리스너(스크립트 js 파일)에서 체크아웃 페이지에 대한 URL 반환을 프롬프트하기 위해 서버에 요청해야 합니다.

요청(파라메트릭)에서 구매에 대한 정보[제품 ID, 수량 등]를 전달합니다. → 대가로 지불금을 받을 고유한 URL을 받습니다.

이 논리 내에서 성공 및 실패 리디렉션 메커니즘을 정의해야 합니다.

세션
성공 에피소드에서 리디렉션되는 세션을 만들어야 합니다.
여기서 우리는 또한 우리가 수락하는 지불 방법을 정의합니다. 방법에는 은행 송금, 카드 등이 포함됩니다.

모드→ 특정 트랜잭션 반복을 정의합니다. 일회성 결제 또는 구독 등이 될 수 있습니다.

성공 및 실패 URL은 여기에 정의되어 있습니다.

*성공 *→ $ {process.env.SERVER_URL}/success.html

*취소 *→ $ {process.env.SERVER_URL}/cancel.html

환경 변수를 사용하여 동일한 코드를 프로덕션에 푸시할 수 있습니다. 그러나 URL을 명시적으로 정의하여 정적인 방법을 사용할 수도 있습니다 → http://localhost:3000/success.html

SERVER_URL 변수는 .env 파일에서 선언됩니다.

SERVER_URL = http://localhost:3000 개발 URL용이며 프로덕션으로 푸시되기 전에 변경됩니다.

공개 리포지토리에 푸시하는 정보를 보호하려면 .env 파일을 gitignore 파일 설정에 추가해야 합니다.

스트라이프 PRIVATE_KEY
이를 위해서는 스트라이프 계정이 필요합니다.
공용 리포지토리에 푸시하지 않을 것이므로 변수를 .env 파일에 저장하십시오.

이것이 스트라이프 작업에 필요한 전부입니다.

Click Here 클론, 포크 및 콜라보를 위해 내 github 저장소로 이동!!

전체stripe code의 경우 official documentation.을 통해 이동할 수도 있습니다.