Panduan Mudah untuk Mengintegrasikan Juspay dalam Apl TypeScript React Anda

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:

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;
}

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;

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;
}

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;

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;
}

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;

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;

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');
});

---

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!