{"id":95627,"date":"2025-02-02T02:56:54","date_gmt":"2025-02-01T23:26:54","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-%d9%be%d8%b1%d8%af%d8%a7%d8%ae%d8%aa-paysafe-js-%d8%af%d8%b1-react-js-%d8%a8%d8%a7-3ds-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/"},"modified":"2025-02-02T02:56:54","modified_gmt":"2025-02-01T23:26:54","slug":"%d8%a7%d8%af%d8%ba%d8%a7%d9%85-%d9%be%d8%b1%d8%af%d8%a7%d8%ae%d8%aa-paysafe-js-%d8%af%d8%b1-react-js-%d8%a8%d8%a7-3ds-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-%d9%be%d8%b1%d8%af%d8%a7%d8%ae%d8%aa-paysafe-js-%d8%af%d8%b1-react-js-%d8%a8%d8%a7-3ds-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/","title":{"rendered":"\u0627\u062f\u063a\u0627\u0645 \u067e\u0631\u062f\u0627\u062e\u062a Paysafe.js \u062f\u0631 React.js \u0628\u0627 3DS (\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645)"},"content":{"rendered":"<div data-article-id=\"2254420\" id=\"article-body\">\n<p>\u0627\u062f\u063a\u0627\u0645 \u06cc\u06a9 \u062f\u0631\u0648\u0627\u0632\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0627\u06cc\u062f \u0633\u0627\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0627\u0645\u0627 \u06a9\u0627\u0631 \u0628\u0627 Paysafe.js \u0686\u06cc\u0632\u06cc \u0646\u06cc\u0633\u062a. \u0627\u06af\u0631 \u062a\u0627\u06a9\u0646\u0648\u0646 \u0633\u0639\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0646\u0627\u0627\u0645\u06cc\u062f\u06cc \u0631\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f: \u062d\u062f\u0627\u0642\u0644 \u0645\u0646\u0627\u0628\u0639 \u0622\u0646\u0644\u0627\u06cc\u0646 \u060c \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u067e\u0631\u0627\u06a9\u0646\u062f\u0647 \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u062c\u0631\u0627\u06cc \u0645\u0628\u0647\u0645.<\/p>\n<p>\u0628\u0631 \u062e\u0644\u0627\u0641 Stripe \u06cc\u0627 PayPal \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u0628\u06cc \u0634\u0645\u0627\u0631\u06cc \u060c \u0628\u062d\u062b \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0646\u062c\u0645\u0646 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0633\u0631\u0631\u06cc\u0632 \u067e\u0634\u062a\u0647 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u060c Paysafe.js \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0628\u06cc\u0627\u0628\u0627\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0633\u062a. \u0627\u0633\u0646\u0627\u062f \u0631\u0633\u0645\u06cc \u0622\u0646\u0647\u0627 \u0641\u0642\u0637 \u0645\u0644\u0632\u0648\u0645\u0627\u062a \u0644\u062e\u062a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062d\u062a\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 &#8211; \u0645\u0627\u0646\u0646\u062f \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u0647\u0627\u06cc \u060c \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 UI \u06cc\u0627 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062e\u0631\u0627\u0628\u06cc \u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a &#8211; \u0622\u0632\u0645\u0627\u06cc\u0634 \u060c \u062e\u0637\u0627 \u0648 \u0634\u06cc\u0631\u062c\u0647 \u0647\u0627\u06cc \u0639\u0645\u06cc\u0642 \u062f\u0631 \u0628\u0644\u06cc\u0637 \u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0686\u0627\u0644\u0634 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0647\u0646\u06af\u0627\u0645 \u0627\u062f\u063a\u0627\u0645 Paysafe.js \u060c \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0628\u0627\u06cc\u062f \u0645\u0631\u0627\u0642\u0628 \u0628\u0627\u0634\u0646\u062f \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627\u0639\u062b \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u062f\u0631 \u0648\u0642\u062a \u0634\u0645\u0627 \u0634\u0648\u062f \u060c \u0628\u0631\u062c\u0633\u062a\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0627\u06af\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u0627\u062f\u063a\u0627\u0645 \u0647\u0633\u062a\u06cc\u062f \u060c \u062a\u0646\u0647\u0627 \u0646\u06cc\u0633\u062a\u06cc\u062f!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmfynyxsut7cajboe47s4.jpg\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"600\" height=\"327\" title=\"\"><\/p>\n<p>\u0645\u0631\u062d\u0644\u0647 1.<\/p>\n<p>\u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 paysafe.js \u0633\u0631\u0648\u06a9\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>'use client';\n\nimport { useState, useEffect } from 'react';\nimport { PaysafeError, PaysafeOptions } from '@\/types\/paySafe\/type';\n\nexport const usePaysafe = (apiKey: string, options: PaysafeOptions) =&gt; {\n  const [instance, setInstance] = useState<any null=\"\">(null);\n  const [error, setError] = useState<paysafeerror null=\"\">(null);\n\n  useEffect(() =&gt; {\n    const loadScript = async () =&gt; {\n      if (typeof window === 'undefined') return;\n\n      if (!document.getElementById('paysafe-sdk')) {\n        const script = document.createElement('script');\n        script.src=\"https:\/\/hosted.paysafe.com\/js\/v1\/latest\/paysafe.min.js\";\n        script.id = 'paysafe-sdk';\n        script.async = true;\n        script.onload = () =&gt; {\n          console.log('Paysafe SDK loaded');\n          initializePaysafe();\n        };\n        script.onerror = () =&gt; {\n          console.error('Failed to load Paysafe SDK');\n          setError({\n            code: 'SDK_LOAD_FAILED',\n            detailedMessage: 'Failed to load Paysafe SDK',\n          });\n        };\n        document.body.appendChild(script);\n      } else {\n        console.log('Paysafe SDK already loaded');\n        initializePaysafe();\n      }\n    };\n\n    const initializePaysafe = () =&gt; {\n      if (window.paysafe) {\n        window.paysafe.fields.setup(apiKey, options, (paysafeInstance: any, setupError: any) =&gt; {\n          if (setupError) {\n            console.error('Paysafe Setup Error:', setupError.detailedMessage);\n            setError(setupError);\n          } else {\n            console.log('Paysafe setup successful');\n            setInstance(paysafeInstance);\n          }\n        });\n      } else {\n        console.error('Paysafe SDK is not available after loading');\n        setError({ code: 'SDK_NOT_LOADED', detailedMessage: 'Paysafe SDK not loaded' });\n      }\n    };\n\n    loadScript();\n  }, [apiKey, options]);\n\n  \/\/ Additional Methods\n  const checkFieldIsEmpty = (field: string) =&gt; {\n    if (!instance) return false;\n    return instance.fields[field]?.isEmpty() ?? false;\n  };\n\n  const checkFieldIsValid = (field: string) =&gt; {\n    if (!instance) return false;\n    return instance.fields[field]?.isValid() ?? false;\n  };\n\n  const checkAllFieldsValid = () =&gt; {\n    if (!instance) return false;\n    return instance.areAllFieldsValid();\n  };\n\n  return { instance, error, checkFieldIsEmpty, checkFieldIsValid, checkAllFieldsValid };\n};\n\n<\/paysafeerror><\/any><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f\u061f \u0645\u0627 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0627\u06cc\u0645!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5y05i4uccl2i4my08juq.jpg\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"769\" height=\"432\" title=\"\"><\/p>\n<p>\u0645\u0631\u062d\u0644\u0647 2<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0648\u0642\u062a \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useState, useEffect } from 'react';\nimport { useMutation } from '@tanstack\/react-query';\nimport { PaysafeError, PaysafeOptions } from '@\/types\/paySafe\/type';\nimport { usePaysafe } from '@\/hooks\/usePaySafe';\nimport Image from 'next\/image';\nimport { Input } from '@\/components\/ui\/input';\nimport { Button } from '@\/components\/ui\/button';\nimport useCustomToast from '@\/hooks\/useCustomToast';\nimport { PaymentContactType } from '@\/types\/flight\/type';\nimport { get3DSOptions } from '@\/utils\/get3DSOptions';\n\nconst API_KEY = 'your API key';\nconst PAYSAFE_ACCOUNT_ID = 'your account id';\n\ntype Props = {\n  amount: number;\n  currency?: string;\n  serverPayload: any;\n  validPaymentContacts: PaymentContactType | null;\n};\n\nconst OPTIONS: PaysafeOptions = {\n  environment: 'TEST',\n  currency: 'GBP',\n  accounts: {\n    default: PAYSAFE_ACCOUNT_ID,\n  },\n  fields: {\n    cardNumber: { selector: '#card-number', placeholder: 'Card number' },\n    expiryDate: { selector: '#expiration-date', placeholder: 'Expiration date' },\n    cvv: { selector: '#cvv', placeholder: 'CVV' },\n  },\n};\n\nconst PaySafeForm = ({ amount, validPaymentContacts, serverPayload, currency = 'GBP' }: Props) =&gt; {\n  const [cardBrand, setCardBrand] = useState<string null=\"\">(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [cardHolderName, setCardHolderName] = useState('');\n\n  const { showToast } = useCustomToast();\n\n  const { instance, error: setupError, checkAllFieldsValid } = usePaysafe(API_KEY, OPTIONS);\n\n  const tokenizeMutation = useMutation<string paysafeerror=\"\">({\n    mutationFn: () =&gt; {\n      return new Promise((_, reject) =&gt; {\n        if (!instance) {\n          return reject({ code: 'NO_INSTANCE', detailedMessage: 'No Paysafe instance available' });\n        }\n\n        instance.tokenize(\n          get3DSOptions(\n            amount,\n            currency,\n            PAYSAFE_ACCOUNT_ID,\n            cardHolderName,\n            serverPayload.bookingUuid || '',\n            validPaymentContacts,\n          ),\n          function (_: any, error: any, result: { token: string }) {\n            if (result) {\n              console.log(result.token);\n            }\n\n            if (error) {\n              console.error('Tokenization error:', error);\n              reject(error);\n              setIsLoading(false);\n            }\n          },\n        );\n      });\n    },\n\n    onError: (error: any) =&gt; {\n      setIsLoading(false);\n      console.log(error.detailedMessage || 'Tokenization failed');\n      alert(error.detailedMessage || 'Tokenization failed');\n    },\n  });\n\n  const handlePay = async () =&gt; {\n    setIsLoading(true);\n    if (checkAllFieldsValid()) {\n      tokenizeMutation.mutate();\n    } else {\n      setIsLoading(false);\n      showToast({\n        type: 'error',\n        content:\n          'Kindly ensure that the \"Card Number,\" \"Expiration Date,\" and \"CVV\" are provided and valid.',\n      });\n    }\n  };\n\n  useEffect(() =&gt; {\n    if (instance) {\n      instance.cardBrandRecognition(function (_, event) {\n        const recognizedCardBrand: any = event.data.cardBrand;\n\n        if (recognizedCardBrand) {\n          setCardBrand(recognizedCardBrand);\n        } else {\n          setCardBrand(null);\n        }\n      });\n\n      instance.unsupportedCardBrand(function (instance, event) {\n        alert('The provided card brand is not supported. Please choose another card brand.');\n        console.log(instance, event);\n      });\n    }\n  }, [instance]);\n\n  const handleCardHolderNameChange = (e: any) =&gt; {\n    setCardHolderName(e.target.value);\n  };\n\n  if (setupError) {\n    return (\n      <div classname=\"flex min-h-screen items-center justify-center\">\n        <p classname=\"text-red-600\">Error: {setupError.detailedMessage}<\/p>\n      <\/div>\n    );\n  }\n\n  return (\n    <div classname=\"w-full\">\n      \n      <button classname=\"{`ml-auto\" mt-6=\"\" flex=\"\" h-14=\"\" w-40=\"\" max-w-=\"\" items-center=\"\" justify-center=\"\" text-sm=\"\" font-medium=\"\" :=\"\" from-=\"\" to-=\"\" onclick=\"{handlePay}\" disabled=\"{isLoading\">\n        {isLoading ? 'Processing...' : 'Pay'}\n      <\/button>\n    <\/div>\n  );\n};\n\nexport default PaySafeForm;\n\n<\/string><\/string><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0631\u062d\u0644\u0647 3.<\/p>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u06cc\u0627\u0648\u0631 \u0631\u0627 \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f \u060c <code>get3DSOptions<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { PaymentContactType } from '@\/types\/flight\/type';\n\nexport const get3DSOptions = (\n  amount: number,\n  currency: string,\n  accountId: number,\n  cardHolderName: string,\n  bookingsUUID: string,\n  validPaymentContacts: PaymentContactType | null,\n) =&gt; ({\n  amount: Math.round(amount * 100),\n  openAs: 'IFRAME', \/\/ Ensures the tokenization happens with 3D Secure in an iframe\n  transactionType: 'PAYMENT',\n  merchantRefNum: bookingsUUID,\n  paymentType: 'CARD',\n  customerDetails: {\n    holderName: cardHolderName,\n    profile: {\n      firstName: validPaymentContacts?.fullName?.split(' ')[0],\n      lastName: validPaymentContacts?.fullName?.split(' ')[1],\n      email: validPaymentContacts?.email,\n    },\n  },\n  threeDS: {\n    amount: Math.round(amount * 100),\n    currency,\n    accountId,\n    merchantRefNum: bookingsUUID,\n    useThreeDSecureVersion2: true,\n    authenticationPurpose: 'PAYMENT_TRANSACTION',\n    challengeRequestIndicator: 'CHALLENGE_MANDATED',\n    threeDsMethodCompletionIndicator: 'Y',\n    deviceChannel: 'BROWSER',\n    messageCategory: 'PAYMENT',\n    electronicDelivery: {\n      email: validPaymentContacts?.email,\n      isElectronicDelivery: true,\n    },\n    priorAuthenticationData: {\n      authenticationMethod: 'SMS_OTP',\n    },\n    requestorChallengePreference: 'NO_PREFERENCE',\n    transactionIntent: 'GOODS_OR_SERVICE_PURCHASE',\n    profile: {\n      email: validPaymentContacts?.email,\n      phone: validPaymentContacts?.phone,\n      cellPhone: validPaymentContacts?.phone,\n    },\n    userAccountDetails: {\n      priorThreeDSAuthentication: {\n        data: 'Some up to 2048 bytes undefined data',\n        method: 'ACS_CHALLENGE',\n        time: '2014-01-26T10:32:28Z',\n      },\n    },\n    browserDetails: {\n      javaEnabled: true,\n      language: 'en-US',\n      colorDepth: 24,\n      screenHeight: 1080,\n      screenWidth: 1920,\n      timeZoneOffset: -120,\n      userAgent:\n        'Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/91.0.4472.124 Safari\/537.36',\n    },\n  },\n  vault: {\n    holderName: cardHolderName,\n  },\n});\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \u0645\u0627 \u062a\u0645\u0627\u0645 \u0634\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F866ogq32x4fyis6nnb4g.jpg\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"600\" height=\"357\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u060c \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0645\u0646 \u067e\u06cc\u0648\u0633\u062a \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u0632\u06cc\u0627\u062f\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>PS \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0622\u0632\u0645\u0627\u06cc\u0634 \u060c \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0641\u0642\u0637 \u0627\u0632 \u06a9\u0627\u0631\u062a\u0647\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u0633\u0627\u0632\u06cc 3DS \u0647\u0633\u062a\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0622\u0631\u0632\u0648\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0645\u06cc \u06a9\u0646\u0645!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u062f\u063a\u0627\u0645 \u06cc\u06a9 \u062f\u0631\u0648\u0627\u0632\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0627\u06cc\u062f \u0633\u0627\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u0627\u0645\u0627 \u06a9\u0627\u0631 \u0628\u0627 Paysafe.js \u0686\u06cc\u0632\u06cc \u0646\u06cc\u0633\u062a. \u0627\u06af\u0631 \u062a\u0627\u06a9\u0646\u0648\u0646 \u0633\u0639\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0646\u0627\u0627\u0645\u06cc\u062f\u06cc \u0631\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f: \u062d\u062f\u0627\u0642\u0644 \u0645\u0646\u0627\u0628\u0639 \u0622\u0646\u0644\u0627\u06cc\u0646 \u060c \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u067e\u0631\u0627\u06a9\u0646\u062f\u0647 \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u062c\u0631\u0627\u06cc \u0645\u0628\u0647\u0645. \u0628\u0631 \u062e\u0644\u0627\u0641 Stripe \u06cc\u0627 PayPal \u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":95628,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhbau9vdc4kzpl4ci3txf.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-95627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=95627"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/95627\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/95628"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=95627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=95627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=95627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}