Przewodnik po integracji Autopay jako procesora płatności z Medusa

Autopay to jedna z największych platform integracji płatności w Polsce, oferująca bezpieczne funkcje do zarządzania transakcjami płatniczymi w aplikacjach.

Ten przewodnik pokazuje, jak skonfigurować projekt Medusa z wykorzystaniem Autopay jako wybranym procesorem płatności, przy użyciu wtyczki medusa-payment-autopay.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że utworzyłeś konto w Autopay. W późniejszym etapie będziesz musiał pobrać klucze API ze swojego konta, aby połączyć Medusa z kontem Autopay. Upewnij się również, że zainstalowałeś serwer backendowy Medusa.js.

Szybki start

Uruchom poniższe polecenie w katalogu backendu Medusa:

yarn add medusa-payment-autopay

Ustaw następujące zmienne środowiskowe w pliku .env

AUTOPAY_URL=<YOUR_AUTOPAY_URL>
AUTOPAY_GENERAL_KEY=<YOUR_AUTOPAY_GENERAL_KEY>
AUTOPAY_SERVICE_ID=<YOUR_AUTOPAY_SERVICE_ID>
STORE_CORS=<YOUR_STOREFRONT_URL>

W medusa-config.js dodaj poniższy fragment na końcu tablicy plugins:

const plugins = [
  // other plugins...
  {
    resolve: `medusa-payment-autopay`,
    options: {
      autopay_url: process.env.AUTOPAY_URL,
      general_key: process.env.AUTOPAY_GENERAL_KEY,
      service_id: process.env.AUTOPAY_SERVICE_ID,
      store_cors: process.env.STORE_CORS,
    },
  },
];

Uruchom polecenie yarn dev i przejdź do panelu administratora > Ustawienia > Regiony, a następnie kliknij Edytuj szczegóły regionu.

Upewnij się, że wybrałeś opcję "autopay" w dostawcach płatności oraz wybrano obsługiwane waluty (PLN, EUR, GBP, USD). Kliknij "Zapisz" i zamknij.

Wybór kanału płatności

Uwaga: Ten krok jest opcjonalny. Jeśli nie ustawisz ID bramki w kontekście koszyka, zostaniesz przekierowany do listy płatności Autopay, gdzie możesz wybrać kanał płatności.

Teraz przejdźmy do naszego storeforntu (Next.js) i zaimplementujmy wybieranie kanału płatności (np. BLIK, Przelewy24 itp.).

Zacznijmy od utworzenia axios instance i Medusa instance:

// utils/api.ts
import axios from "axios"
import Medusa from "@medusajs/medusa-js"

const $api = axios.create({ baseURL: MEDUSA_BACKEND_URL })
const $medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3 })

Dodaj React Query hook, aby pobrać kanały płatności Autopay:

// hooks/use-autopay-channels.ts
import { $api } from "../utils/api"
import { useQuery } from "@tanstack/react-query"

type GatewayListResponse = {
  gatewayList: [
    {
      gatewayID: number
      gatewayName: string
      gatewayType: string
      bankName: string
      iconURL: string
      state: string
      stateDate: string
      gatewayDescription: null | string
      inBalanceAllowed: boolean
      currencyList: { currency: string }[]
    }
  ]
}

export const useAutopayChannels = (cartId: string) => 
  useQuery<GatewayListResponse>(
    ["autopay-channels", cartId],
    () => $api.get(`/store/autopay/${cartId}/gateways`).then((res) => res.data)
  )

Teraz użyj go w naszym komponencie płatności:

import { RadioGroup } from "@headlessui/react"
import Radio from "../components/Radio"
import Button from "../components/Button"
import { useAutopayChannels } from '../hooks/use-autopay-channels'
import { $medusa } from '../utils/api' 
import { Cart } from '@medusajs/medusa'

const PaymentSection = ({cart}: {cart: Cart}) => {
  const [selectedPaymentChannel, setSelectedPaymentChannel] = useState<null | string>(cart.context?.provider_id as string ?? null)
  const { data: paymentChannels, isLoading } = useAutopayChannels(cart.id)

  const changeAutopayGateway = (gatewayId: string) => {
    setSelectedPaymentChannel(gatewayId)
  }

  const onSubmit = () => {
    // Setting payment channel so user
    // will automatically redirected to payment channel website
    $medusa.carts.update(cart.id, {
      context: {
        gateway_id: gatewayId
      }
    })
  }

  if (isLoading || updatingCart) return <Loader />

  return (
      <>
        <RadioGroup
              value={null}
              onChange={changeAutopayGateway}
            >
              {data.gatewayList.map((paymentChannel) => {
                return (
                  <RadioGroup.Option
                    key={paymentChannel.gatewayID}
                    id={paymentChannel.gatewayID}
                    name={paymentChannel.gatewayName}
                    selectedPaymentOptionId={selectedAutopayGateway}
                  >
                    <div className="flex items-center justify-between ">
                      <div className="flex items-center gap-x-4">
                        <Radio checked={selectedPaymentOptionId === id} />
                         {paymentChannel.gatewayName}
                       </div>
                    </div>
                  </RadioGroup.Option>
                )
              })}
        </RadioGroup>
        <Button onClick={changeAutopayGateway}>Next</Button>
      </>
  )
}

Przesyłanie koszyka

Teraz utwórz przycisk przesyłania dla swojego koszyka i dodaj funkcję handler:

import Button from '../components/Button'
import { $medusa } from '../utils/api'
import { Cart } from '@medusajs/medusa'
import Router from "next/router";

const SubmitButton = ({cartId}: {cartId: string}) => {
  const router = useRouter()

  const submitCart = async () => {
    // Handle other things like adresses and email...
    await $medusa.carts.createPaymentSessions(cartId);
    
    // Complete a cart to create a pending order
    // and redirect to Autopay page
    $medusa.carts.complete(cartId).then(({ cart }) => {
      const redirectUrl = cart.payment_session.data.redirect_url;
      router.replace(redirectUrl); 
    });
  }

  return (
    <Button onClick={submitCart}>Buy</Button>
  )
}

Teraz umieść komponent SubmitButton w swojej kasie. Po kliknięciu zostaniesz przekierowany do wybranego przez Ciebie kanału płatności. Po pomyślnej płatności, opłacone zamówienie pojawi się w Twoim panelu administracyjnym.

Mam nadzieję, że ten artykuł okazał się pomocny :).