Implementação Razorpay em SwiftUI | Guia passo a passo

Apr 28 2023
Na era digital de hoje, os pagamentos online tornaram-se parte integrante dos negócios, especialmente na Índia, onde o Razorpay emergiu como um popular gateway de pagamento. O SwiftUI, por outro lado, é uma estrutura de interface de usuário revolucionária que tornou a construção de interfaces de usuário muito fácil para desenvolvedores iOS.

Na era digital de hoje, os pagamentos online tornaram-se parte integrante dos negócios, especialmente na Índia, onde o Razorpay emergiu como um popular gateway de pagamento . O SwiftUI, por outro lado, é uma estrutura de interface de usuário revolucionária que tornou a construção de interfaces de usuário muito fácil para desenvolvedores iOS. A combinação dessas duas tecnologias pode fornecer uma excelente solução de pagamento para aplicativos iOS . Neste blog, exploraremos como implementar Razorpay com SwiftUI para fornecer uma experiência de pagamento perfeita aos usuários. Abordaremos os fundamentos do Razorpay e SwiftUI, juntamente com detalhes de implementação passo a passo e perguntas frequentes.

Sobre Razorpay

O Razorpay é um gateway de pagamento que permite que as empresas aceitem pagamentos por meio de cartões de crédito e débito, net banking, UPI e outros métodos de pagamento populares. É um gateway de pagamento popular na Índia e é usado por milhares de empresas em todo o país. O Razorpay possui uma API bem documentada que torna mais fácil para os desenvolvedores integrar o gateway de pagamento em seus aplicativos. Com o Razorpay, as empresas podem otimizar seu processo de pagamento e aumentar a receita, fornecendo uma experiência de pagamento perfeita aos clientes.

Sobre SwiftUI

SwiftUI é uma estrutura de interface de usuário moderna que foi introduzida pela Apple em 2019. É uma estrutura declarativa que permite aos desenvolvedores criar interfaces de usuário usando uma sintaxe simples e intuitiva. SwiftUI ganhou popularidade entre os desenvolvedores devido à sua simplicidade e facilidade de uso . O SwiftUI possui recursos como visualização ao vivo, sintaxe fácil de usar e ajustes automáticos de layout, tornando-o a escolha preferida dos desenvolvedores.

Implementação do Razorpay

Para implementar o Razorpay em seu aplicativo iOS, primeiro você precisa criar uma conta Razorpay e obter as chaves de API necessárias. Depois de obter as chaves de API, você pode usar o Razorpay iOS SDK para integrar o gateway de pagamento ao seu aplicativo. O SDK fornece uma interface simples para aceitar pagamentos em seu aplicativo iOS. Ele oferece suporte a todos os métodos de pagamento populares, incluindo cartões de crédito e débito, net banking, UPI e muito mais. O SDK também fornece recursos como novas tentativas de pagamento, reembolsos e liquidações.

Implementação Razorpay com SwiftUI

Para implementar o Razorpay em um aplicativo SwiftUI, você precisa seguir algumas etapas simples.

Etapa 1: Instalar Razorpay iOS SDK
A primeira etapa na integração do Razorpay com seu aplicativo SwiftUI é instalar o Razorpay iOS SDK usando CocoaPods. Veja como fazer isso:
1. Abra seu projeto no Xcode e navegue até o diretório do projeto.
2. Abra o Podfile para seu projeto.
3. Adicione a seguinte linha ao seu Podfile:

pod 'razorpay-pod', '~> 1.2'

pod install

import Razorpay

import UIKit
import SwiftUI
import Razorpay

struct PaymentGatewayHelper: UIViewControllerRepresentable {
    
    @EnvironmentObject var router: Router<ViewPath>
    
    func makeUIViewController(context: Context) -> CheckoutViewController {
        .init()
    }
    
    func updateUIViewController(_ uiViewController: CheckoutViewController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        
        var parent: PaymentGatewayHelper
        
        init(_ parent: PaymentGatewayHelper) {
            self.parent = parent
            
            super.init()
        }
    }
}

class CheckoutViewController: UIViewController, RazorpayPaymentCompletionProtocolWithData {
        
    static var razorpayTestKey = "rzp_test_" //Put your Razorpay API Key.

    var razorpay: RazorpayCheckout!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        razorpay = RazorpayCheckout.initWithKey(razorpay_test_key, andDelegateWithData: self)
        
        let walletView = WalletScreen {
            self.showPaymentForm()
        }

        let vc = UIHostingController(rootView: walletView)
        let swiftUIView = vc.view!
        view.addSubview(swiftUIView)
        swiftUIView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            swiftUIView.topAnchor.constraint(equalTo: view.topAnchor),
            swiftUIView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            swiftUIView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            swiftUIView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
        
        addChild(vc)
        vc.didMove(toParent: self)
    }

  • Use andDelegateWithData em vez de andDelegate quando precisar de dados de RazorpayPaymentCompletionProtocolWithData.
  • Este é um método delegado que transmite dados adicionais junto com a resposta de conclusão do pagamento.

let options: [String:Any] = [
            "amount": "100", //This is in currency subunits. 100 = 100 paise= INR 1.
            "currency": "INR",//We support more that 92 international currencies.
            "description": "Wallet Recharge",
            "image": "https://url-to-image.jpg",
            "name": "Wallet Recharge",
            "prefill": [
                "contact": "9797979797",
                "email": "[email protected]"
            ],
            "theme": [
                "color": "#F37254"
            ]
        ]

self.razorpay.open(options)

extension CheckoutViewController:RazorpayPaymentCompletionProtocolWithData {
    func onPaymentError(_ code: Int32, description str: String, andData response: [AnyHashable : Any]?) {
        print("error: ", code, str)
        print("withData:", response ?? "")
    }
    
    func onPaymentSuccess(_ payment_id: String, andData response: [AnyHashable : Any]?) {
        print("success: ", payment_id)
        print("withData:", response ?? "")
    }
}

  • Você pode usar orderApi de Razorpay para gerar o objeto de dados.

P: Quais métodos de pagamento o Razorpay suporta?
R:
O Razorpay oferece suporte a todos os métodos de pagamento populares, incluindo cartões de crédito e débito, net banking, UPI e muito mais.

P: Preciso criar uma conta Razorpay para usar o SDK?
R:
Sim, você precisa criar uma conta Razorpay e obter as chaves de API necessárias para usar o SDK.

P. Posso personalizar a tela de pagamento do Razorpay?
R: Sim, você pode personalizar a tela de pagamento usando o Razorpay iOS SDK. Você pode alterar o esquema de cores, logotipo e outros elementos da tela de pagamento.

P. O Razorpay fornece suporte para desenvolvedores?
R:
Sim, Razorpay fornece extensa documentação e suporte para desenvolvedores. Você também pode entrar em contato com a equipe de suporte se precisar de ajuda.

P. O que é um UIHostingController?
R: UIHostingController é um controlador de visualização que hospeda uma visualização SwiftUI. Ele é usado para integrar visualizações SwiftUI em um aplicativo baseado em UIKit existente.

P. Você pode personalizar a aparência de um UIHostingController?
R:
Sim, você pode personalizar a aparência de um UIHostingController definindo a cor de fundo de sua exibição, inserções de conteúdo e outras propriedades. Você também pode incorporar um UIHostingController em um controlador de navegação ou controlador de barra de guias para adicionar navegação ou funcionalidade de barra de guias.