Panduan Mudah untuk Mengintegrasikan Juspay dalam Apl TypeScript React Anda-tutorial js-php.cn

Panduan Mudah untuk Mengintegrasikan Juspay dalam Apl TypeScript React Anda

DDD

Lepaskan： 2024-09-18 19:37:10

asal

458 orang telah melayarinya

Panduan ini menyediakan arahan langkah demi langkah tentang cara menyepadukan Juspay ke dalam apl React menggunakan TypeScript untuk bahagian hadapan dan bahagian belakang proses pembayaran.

Prasyarat

Pastikan anda mempunyai kelayakan berikut untuk Juspay:

ID Pedagang
ID Pelanggan
Kunci API

Aliran Integrasi

Berikut ialah aliran integrasi pembayaran menggunakan Juspay:

Simple Guide to Integrate Juspay in Your TypeScript React App

Langkah-langkah untuk Penyepaduan TypeScript

1. Buat Sesi Pembayaran (Sebelah Pelayan dalam TypeScript)

Gunakan Node.js/Express dengan TypeScript untuk membuat sesi pembayaran menggunakan API Juspay.

Buat antara muka TypeScript PaymentSession untuk menaip respons anda:

interface PaymentSession {
  payment_link: string;
  order_id: string;
  status: string;
}

Salin selepas log masuk

Kod TypeScript untuk membuat sesi:

import axios from 'axios';
import base64 from 'base-64';
import { Request, Response } from 'express';

const createSession = async (req: Request, res: Response) => {
  const apiKey = 'your_api_key';
  const authHeader = base64.encode(`${apiKey}:`);

  try {
    const response = await axios.post<PaymentSession>(
      'https://api.juspay.in/session',
      {
        customer_id: 'customer_id_here',
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
      },
      {
        headers: {
          Authorization: `Basic ${authHeader}`,
        },
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: (error as Error).message });
  }
};

export default createSession;

Salin selepas log masuk

Dalam kod ini:

Antara muka PaymentSession memastikan keselamatan jenis untuk respons sesi.
Tegasan jenis TypeScript memastikan pengendalian ralat yang tepat (ralat sebagai Ralat).

2. Mulakan Pembayaran daripada React Client (TypeScript)

Dalam klien React, buat komponen yang memulakan proses pembayaran menggunakan cangkuk useEffect dan Axios untuk permintaan API.

Tentukan antara muka untuk respons sesi:

interface PaymentSession {
  payment_link: string;
  order_id: string;
}

Salin selepas log masuk

Komponen dalam TypeScript:

import React, { useState } from 'react';
import axios from 'axios';

const PaymentPage: React.FC = () => {
  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);

  const initiatePayment = async () => {
    try {
      const response = await axios.post<PaymentSession>('/api/create-session', {
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
        customer_id: 'your-customer-id',
      });
      setPaymentUrl(response.data.payment_link);
    } catch (error) {
      console.error('Error initiating payment:', error);
    }
  };

  return (
    <div>
      <h1>Initiate Payment</h1>
      <button onClick={initiatePayment}>Pay Now</button>
      {paymentUrl && (
        <div>
          <a href={paymentUrl} target="_blank" rel="noopener noreferrer">
            Complete Payment
          </a>
        </div>
      )}
    </div>
  );
};

export default PaymentPage;

Salin selepas log masuk

Dalam kod ini:

PaymentSession memastikan struktur respons yang dijangkakan daripada bahagian belakang.
Fungsi initiatePayment menghantar permintaan untuk memulakan pembayaran dan mengendalikan respons.

3. Mengendalikan URL Pemulangan dan Menyemak Status Pembayaran

Apabila pengguna diubah hala semula selepas pembayaran, anda perlu menyemak status pembayaran dan memaparkannya.

Antara Muka TypeScript untuk Status Pembayaran:

interface PaymentStatus {
  status: string;
  order_id: string;
  amount: number;
}

Salin selepas log masuk

Komponen Reaksi untuk Mengendalikan Status Pembayaran:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const PaymentStatusPage: React.FC = () => {
  const [paymentStatus, setPaymentStatus] = useState<string | null>(null);

  useEffect(() => {
    const checkPaymentStatus = async () => {
      try {
        const response = await axios.get<PaymentStatus>('/api/check-status', {
          params: { order_id: 'your-order-id' },
        });
        setPaymentStatus(response.data.status);
      } catch (error) {
        console.error('Error fetching payment status:', error);
      }
    };

    checkPaymentStatus();
  }, []);

  return (
    <div>
      <h1>Payment Status</h1>
      {paymentStatus ? (
        <p>Payment Status: {paymentStatus}</p>
      ) : (
        <p>Checking payment status...</p>
      )}
    </div>
  );
};

export default PaymentStatusPage;

Salin selepas log masuk

Dalam komponen ini:

Anda menghantar pesanan_id ke bahagian belakang anda untuk menyemak status pembayaran.
Halaman belakang harus mengembalikan status berdasarkan respons daripada API Juspay.

4. Mengendalikan Webhooks dengan TypeScript (Backend)

Juspay akan menghantar webhook untuk memberitahu anda tentang perubahan status pembayaran. Di bawah ialah cara mengendalikan perkara ini dalam persekitaran TypeScript.

import { Request, Response } from 'express';

interface JuspayWebhook {
  order_id: string;
  status: string;
  amount: number;
  currency: string;
}

const handleWebhook = (req: Request, res: Response) => {
  const paymentUpdate: JuspayWebhook = req.body;

  console.log('Payment Update Received:', paymentUpdate);

  // Process the payment update (e.g., update your database)

  // Respond to Juspay to confirm receipt
  res.status(200).send('Webhook received');
};

export default handleWebhook;

Salin selepas log masuk

5. Balas Juspay dengan 200 OK (Backend)

Untuk mengesahkan penerimaan pemberitahuan webhook, pelayan anda harus mengembalikan status 200 OK:

app.post('/api/webhook', (req: Request, res: Response) => {
  // Acknowledge the webhook
  res.status(200).send('OK');
});

Salin selepas log masuk

Kesimpulan

Dengan mengikuti langkah-langkah ini dan memanfaatkan TypeScript untuk kedua-dua klien dan kod sisi pelayan, anda boleh menyepadukan Juspay ke dalam apl React anda dengan cekap dan selamat. TypeScript menambah faedah keselamatan jenis, mengurangkan ralat dan memastikan penyepaduan anda lancar.

Pihak Pelanggan: Anda memulakan pembayaran menggunakan komponen React dan menyemak status.
Sisi Pelayan: Bahagian belakang Node.js/Express anda mengendalikan sesi pembayaran, status dan pemberitahuan webhook.

Panduan ini memberikan gambaran keseluruhan lengkap tentang cara mengintegrasikan Juspay ke dalam timbunan web moden menggunakan TypeScript.

Atas ialah kandungan terperinci Panduan Mudah untuk Mengintegrasikan Juspay dalam Apl TypeScript React Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!