Integración de Razorpay en Django

Los pagos son una parte integral del ecosistema en línea, ya sea en las tiendas de comercio electrónico para procesar los pedidos o una simple donación a alguien. Integrar una pasarela de pago en su sitio web puede ser un proceso tedioso. Echemos un vistazo a cómo puede integrar Razorpay en un sitio web de Django.

¿Qué estamos construyendo?

Construiremos una réplica básica de Buy Me Coffee , uhh Buy Me Chai 😉 donde los usuarios pueden hacernos donaciones. 

Sin embargo, el proceso de integración sigue siendo el mismo para lo que sea que estés construyendo. Analicemos todo el proceso en pasos simples.

Paso 1: Inicie el proyecto Django.

Asegúrese de haber terminado con la instalación de django. Cree un nuevo proyecto llamado dj_razorpay y luego inicie una nueva aplicación llamada pago . Agregue «pago» a la lista de aplicaciones instaladas en el archivo settings.py . Además, aplique las migraciones.

INSTALLED_APPS = [
    ...
    'payment',
    ...
]

Paso 2: Obtenga las claves de Razorpay.

Primero, crea una cuenta en el sitio web de Razorpay , simplemente debes registrarte con tu correo electrónico y contraseña y agregar algunos datos básicos como tu número de teléfono. 

Dentro de la pantalla de configuración, haga clic en Crear una nueva opción de clave, se generará su clave. Obtendrá Key ID y Key Secret. Actualmente, nuestros pagos estarán en «modo de prueba», es decir, no se realizará ninguna transacción real y las opciones de pago también son limitadas. Para aceptar dinero real y desbloquear más opciones de pago, debe completar su KYC y proporcionar sus datos bancarios. El proceso de integración sigue siendo el mismo independientemente del modo.

Nota: Se le mostrará la clave secreta solo una vez, así que cópiela inmediatamente en algún lugar.

Ahora agregue Key Id y Key Secret al archivo settings.py.

RAZOR_KEY_ID = YOUR_KEY_ID
RAZOR_KEY_SECRET = YOUR_KEY_SECRET

Antes de continuar, instalemos el paquete python de razorpay.

pip install razorpay

Paso 3: Vistas.py

Este es el paso principal del proceso. Primero, necesitamos entender cómo funciona el pago en Razorpay.

1. Cree un Razor Order desde nuestro Servidor Django.
2. Pase la identificación del pedido y otras opciones a la interfaz.
3. El usuario hace clic en el botón de pago y paga con uno de los métodos de pago.
4. Razorpay maneja el éxito y el fracaso del pago.
5. En caso de falla, Razorpay facilita el reintento de los pagos.
6. En caso de éxito, Razorpay realiza una solicitud de publicación a una URL de devolución de llamada en nuestro servidor.
7. Verifique la firma del pago para confirmar que el pago es auténtico y no está alterado.
8. Una vez verificado, captura el pago y muestra la página de éxito.

Consulte los comentarios del código para obtener más detalles.

Nota: La cantidad en Razorpay funciona en subunidades de moneda, es decir, 500 rupias se convertirían en 50000 paise. 

from django.shortcuts import render
import razorpay
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponseBadRequest
 
 
# authorize razorpay client with API Keys.
razorpay_client = razorpay.Client(
    auth=(settings.RAZOR_KEY_ID, settings.RAZOR_KEY_SECRET))
 
 
def homepage(request):
    currency = 'INR'
    amount = 20000  # Rs. 200
 
    # Create a Razorpay Order
    razorpay_order = razorpay_client.order.create(dict(amount=amount,
                                                       currency=currency,
                                                       payment_capture='0'))
 
    # order id of newly created order.
    razorpay_order_id = razorpay_order['id']
    callback_url = 'paymenthandler/'
 
    # we need to pass these details to frontend.
    context = {}
    context['razorpay_order_id'] = razorpay_order_id
    context['razorpay_merchant_key'] = settings.RAZOR_KEY_ID
    context['razorpay_amount'] = amount
    context['currency'] = currency
    context['callback_url'] = callback_url
 
    return render(request, 'index.html', context=context)
 
 
# we need to csrf_exempt this url as
# POST request will be made by Razorpay
# and it won't have the csrf token.
@csrf_exempt
def paymenthandler(request):
 
    # only accept POST request.
    if request.method == "POST":
        try:
           
            # get the required parameters from post request.
            payment_id = request.POST.get('razorpay_payment_id', '')
            razorpay_order_id = request.POST.get('razorpay_order_id', '')
            signature = request.POST.get('razorpay_signature', '')
            params_dict = {
                'razorpay_order_id': razorpay_order_id,
                'razorpay_payment_id': payment_id,
                'razorpay_signature': signature
            }
 
            # verify the payment signature.
            result = razorpay_client.utility.verify_payment_signature(
                params_dict)
            if result is None:
                amount = 20000  # Rs. 200
                try:
 
                    # capture the payemt
                    razorpay_client.payment.capture(payment_id, amount)
 
                    # render success page on successful caputre of payment
                    return render(request, 'paymentsuccess.html')
                except:
 
                    # if there is an error while capturing payment.
                    return render(request, 'paymentfail.html')
            else:
 
                # if signature verification fails.
                return render(request, 'paymentfail.html')
        except:
 
            # if we don't find the required parameters in POST data
            return HttpResponseBadRequest()
    else:
       # if other than POST request is made.
        return HttpResponseBadRequest()

Nota: es necesario capturar el pago, de lo contrario, se reembolsará automáticamente al pagador.

Ahora asigne las vistas anteriores a las URL en urls.py.

# dj_razorpay/urls.py
 
from django.contrib import admin
from django.urls import path
from payment import views
 
urlpatterns = [
    path('', views.homepage, name='index'),
    path('paymenthandler/', views.paymenthandler, name='paymenthandler'),
    path('admin/', admin.site.urls),
]

Paso 4: Interfaz

Necesitamos pasar la identificación del pedido de Razorpay y otras opciones mencionadas en el paso anterior. Primero cargue el código javascript de Razorpay que generaría la ventana de pago e inicialícelo con las opciones recibidas del backend. Agregue un detector de eventos al botón de pago para que la ventana de pago se abra una vez que se haga clic en ella.

Aquí estamos representando el botón de pago en la propia página de inicio. También necesitaríamos otras dos páginas para el éxito y el fracaso del pago.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GFG</title>
    <style>
      * {
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
        font-family: cursive;
      }
      html,
      body {
        height: 100%;
      }
      body {
        background-color: #f1f5f8;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .card {
        background-color: white;
        padding: 25px;
        border: 1px solid #bbbbbb;
        border-radius: 5px;
        box-shadow: 1px 1px 10px 0px rgb(0 0 0 / 25%);
      }
      .title {
        text-align: center;
        letter-spacing: 1px;
      }
      .muted {
        color: #8e7f7f;
        display: block;
        margin-bottom: 10px;
        text-align: center;
      }
      .btn_container {
        padding: 20px;
        text-align: center;
      }
      .btn {
        border-radius: 4px;
        cursor: pointer;
        padding: 4px 8px;
        background-color: #ffaaa7;
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        letter-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h1 class="title">Buy Me a Chai ☕</h1>
      <small class="muted"
        >If you like my work, you can support me by donating ₹200</small
      >
      <div class="btn_container">
        <!-- Payment Button -->
        <button class="btn" id="pay-btn">Donate❤️</button>
      </div>
    </div>
  </body>
   
  <!-- Razorpay's Javascript code. -->
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  <script>
    var options = {
       
      // Enter the Key ID generated from the Dashboard
      key: "{{ razorpay_merchant_key }}",
       
      // Amount is in currency subunits.
      // Default currency is INR. Hence,
      // 50000 refers to 50000 paise
      amount: "{{ razorpay_amount }}",
      currency: "{{ currency }}",
       
      // Your/store name.
      name: "Dj Razorpay",
       
      // Pass the `id` obtained in the response of Step 1
      order_id: "{{ razorpay_order_id }}",
      callback_url: "{{ callback_url }}",
    };
     
    // initialise razorpay with the options.
    var rzp1 = new Razorpay(options);
     
    // add event listener to the payment button.
    document.getElementById("pay-btn").onclick = function (e) {
      rzp1.open();
      e.preventDefault();
    };
  </script>
</html>

Paso 5: Prueba

¡Ahora encendamos el servidor y verifiquemos si todo funciona bien! 

python manage.py runserver

¡¡Recibimos con éxito el pago!! Puede verificar estos pagos en el panel de control de Razorpay.