تكامل Checkout.com: دليل Frames.js و Payment Request API

جدول المحتويات

1. لماذا Checkout.com
2. الامتثال لـ PCI مع Frames
3. معالجة الدفع من جانب الخادم
4. تكامل React Frames
5. تنفيذ 3D Secure
6. معالجة Webhooks

لماذا Checkout.com

Checkout.com احتلت مكانة بين تجربة مطور Stripe وميزات Adyen المؤسسية:

• تسعير شفاف - Interchange++ للتجار ذوي الحجم الكبير
• استحواذ عالمي - اتصالات مباشرة في أكثر من 50 دولة
• API حديثة - REST مع توثيق جيد

الامتثال لـ PCI مع Frames

Frames.js هي إجابة Checkout.com على Stripe Elements - مكتبة من جانب العميل ترمز تفاصيل البطاقة دون أن يراها خادمك أبداً.

معالجة الدفع من جانب الخادم

export class CheckoutPaymentService {
  async processPayment(params: ProcessPaymentParams) {
    const paymentRequest = {
      source: { type: 'token', token: params.token },
      amount: params.amount,
      currency: params.currency.toUpperCase(),
      reference: params.orderId,
      capture: params.capture,
      '3ds': { enabled: true },
      success_url: `${APP_URL}/checkout/success`,
      failure_url: `${APP_URL}/checkout/failure`,
    };

    const payment = await checkout.payments.request(paymentRequest);

    if (payment.status === 'Pending' && payment._links?.redirect) {
      return {
        paymentId: payment.id,
        status: 'pending_3ds',
        redirectUrl: payment._links.redirect.href,
        requiresAction: true,
      };
    }

    return {
      paymentId: payment.id,
      status: payment.status.toLowerCase(),
      requiresAction: false,
    };
  }
}

تكامل React Frames

export function CheckoutFrames({ publicKey, onTokenized, onError }) {
  useEffect(() => {
    window.Frames.init({ publicKey });

    window.Frames.addEventHandler(
      window.Frames.Events.CARD_TOKENIZED,
      (event) => onTokenized(event.token)
    );
  }, [publicKey]);

  const handleSubmit = async () => {
    await window.Frames.submitCard();
  };

  return (
    <div>
      <div className="card-number-frame" />
      <div className="expiry-date-frame" />
      <div className="cvv-frame" />
      <button onClick={handleSubmit}>ادفع الآن</button>
    </div>
  );
}

الخلاصة

Checkout.com تقدم مدفوعات بمستوى المؤسسات مع:

1. Frames.js - امتثال PCI بدون تعقيد
2. 3DS مرن - تحكم في تدفقات المصادقة
3. تسعير شفاف - Interchange++ للحجم
4. مدفوعات مقسمة - جاهزة للأسواق