تكامل Braintree للدفع: دليل Drop-in UI والتنفيذ المخصص

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

1. لماذا Braintree
2. إعداد جانب الخادم
3. تكامل Drop-in UI
4. Hosted Fields للواجهة المخصصة
5. تكامل PayPal و Venmo
6. Vault للمدفوعات المتكررة

لماذا Braintree

Braintree (مملوكة لـ PayPal) تقدم مزايا فريدة:

• تكامل PayPal أصلي - دفع PayPal سلس
• دعم Venmo - محفظة الجوال الأمريكية
• Vault - تخزين الرموز للمدفوعات المتكررة
• دعم الأسواق - مدفوعات مقسمة جاهزة
• انتشار عالمي - 45+ دولة، 130+ عملة

إعداد جانب الخادم

import braintree from 'braintree';

export const gateway = new braintree.BraintreeGateway({
  environment: process.env.NODE_ENV === 'production'
    ? braintree.Environment.Production
    : braintree.Environment.Sandbox,
  merchantId: process.env.BRAINTREE_MERCHANT_ID!,
  publicKey: process.env.BRAINTREE_PUBLIC_KEY!,
  privateKey: process.env.BRAINTREE_PRIVATE_KEY!,
});

تكامل Drop-in UI

export function BraintreeDropIn({ clientToken, amount, onSuccess }) {
  const dropinInstance = useRef(null);

  useEffect(() => {
    const init = async () => {
      const instance = await dropin.create({
        authorization: clientToken,
        container: '#dropin-container',
        paypal: { flow: 'checkout', amount: amount.toFixed(2) },
        venmo: { allowNewBrowserTab: false },
      });
      dropinInstance.current = instance;
    };
    init();
  }, [clientToken]);

  const handlePayment = async () => {
    const { nonce } = await dropinInstance.current.requestPaymentMethod();
    // أرسل nonce للخادم
  };

  return (
    <div>
      <div id="dropin-container" />
      <button onClick={handlePayment}>ادفع الآن</button>
    </div>
  );
}

Vault للمدفوعات المتكررة

// إنشاء عميل مع طريقة دفع محفوظة
async createCustomerWithPaymentMethod(params) {
  const result = await gateway.customer.create({
    email: params.email,
    paymentMethodNonce: params.paymentMethodNonce,
  });

  return {
    customerId: result.customer.id,
    paymentMethodToken: result.customer.paymentMethods[0].token,
  };
}

// شحن طريقة الدفع المحفوظة
async chargeVaultedPaymentMethod(params) {
  const result = await gateway.transaction.sale({
    amount: params.amount.toFixed(2),
    paymentMethodToken: params.paymentMethodToken,
    options: { submitForSettlement: true },
  });

  return { success: result.success, transactionId: result.transaction?.id };
}

الخلاصة

Braintree يتفوق في:

1. تكامل PayPal - تجربة أصلية سلسة
2. مدفوعات الأسواق - مدفوعات مقسمة مدمجة
3. الفوترة المتكررة - Vault + اشتراكات
4. السوق الأمريكي - دعم Venmo