نحوه ادغام PayPal با HTML، CSS و Javascript

ek3nk4r 2023-04-04

0 43 خواندن این مطلب 4 دقیقه زمان میبرد

نحوه ادغام PayPal با HTML، CSS و Javascript

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

آیا تا به حال از یک وب سایت بازدید کرده اید و سپس به این فکر کرده اید که چگونه تراکنش ها به صورت آنلاین انجام می شود، چه در خرید کالا، چه خدمات، پرداخت هزینه یک دوره آنلاین یا حتی اهدای آنلاین؟

جواب سوال شما را گرفتم

در این مقاله قصد داریم یک وب سایت اهدایی ایجاد کنیم تا کاربر بتواند مبلغ کمک مالی خود را وارد کرده و از طریق پی پال کمک مالی کند.

فهرست مطالب

پی پال چیست؟

پی پال یک سیستم پرداخت آنلاین است که به افراد و مشاغل امکان ارسال و دریافت پرداخت های الکترونیکی را می دهد. این در سال 1998 تاسیس شد و از آن زمان به یکی از پر استفاده ترین پلت فرم های پرداخت در جهان تبدیل شده است.

پی پال کاربران را قادر می سازد تا حساب هایی ایجاد کرده و آنها را به حساب های بانکی، کارت های اعتباری یا کارت های نقدی خود پیوند دهند. سپس کاربران می توانند از حساب های پی پال خود برای خرید یا دریافت پرداخت برای کالاها و خدمات، انتقال وجه به سایر کاربران یا برداشت وجه به حساب های بانکی مرتبط خود استفاده کنند.

PayPal به دلیل سهولت استفاده، ویژگی‌های امنیتی، و پذیرش گسترده در بسیاری از تجار و خدمات آنلاین محبوب است. این در بیش از 200 بازار موجود است و از بیش از 100 ارز پشتیبانی می کند، که آن را به گزینه ای مناسب برای پرداخت برای افراد و مشاغل در سراسر جهان تبدیل می کند.

چگونه PayPal را در صفحات محصول خود ادغام کنید

حالا که می دانیم می خواهیم به چه چیزی برسیم، بیایید وارد عمل شویم. من این فرآیند را به 6 مرحله آسان برای دنبال کردن تقسیم کردم. آن ها هستند:

برای دریافت API های خود به ابزارهای توسعه دهنده PayPal دسترسی داشته باشید.
یک محیط sandbox PayPal راه اندازی کنید.
دکمه PayPal خود را ایجاد و سفارشی کنید.
دکمه خود را در فایل های فعلی خود ادغام کنید.
ادغام را با استفاده از محیط sandbox PayPal تست کنید.
پخش زنده شوید و پرداخت های واقعی را بپذیرید.

دسترسی به ابزارهای توسعه دهنده PayPal برای دریافت API های خود

اگر قبلاً یکی دارید، کافی است مستقیماً به ابزارهای توسعه دهنده PayPal بروید.

برای ایجاد یک حساب PayPal، باید از وب سایت PayPal دیدن کنید و دستورالعمل های روی صفحه را برای ثبت نام دنبال کنید. از شما خواسته می شود اطلاعات شخصی و مالی مانند نام، آدرس ایمیل و جزئیات کارت اعتباری خود را ارائه دهید.

پس از تکمیل فرآیند ثبت‌نام، می‌توانید به حساب PayPal خود وارد شوید و به ابزارهای توسعه‌دهنده و APIهای مورد نیاز برای ادغام دسترسی داشته باشید. مهم است که از یک آدرس ایمیل معتبر استفاده کنید زیرا اطلاعات و به روز رسانی های مهمی را از PayPal دریافت خواهید کرد.

سپس، می‌توانید ابزارهای توسعه‌دهنده را در سمت راست بالای داشبورد PayPal خود بیابید.

توضیحات تصویر

راه اندازی یک محیط سندباکس پی پال

محیط Sandbox یک محیط آزمایشی است که از محیط Live PayPal تقلید می کند. این به شما امکان می‌دهد قبل از پخش زنده، یکپارچگی خود را آزمایش کنید، که یک ویژگی عالی از PayPal برای اطمینان از اینکه همه چیز مطابق انتظار کار می‌کند است.

برای راه‌اندازی یک محیط sandbox PayPal، باید وارد حساب PayPal خود شوید و به داشبورد توسعه‌دهنده بروید.

از آنجا، می‌توانید با دنبال کردن دستورالعمل‌های روی صفحه، یک حساب sandbox جدید ایجاد کنید.

پس از ایجاد حساب سندباکس، می‌توانید از آن برای آزمایش یکپارچگی خود با پرداخت‌های آزمایشی استفاده کنید. می توانید از اکانت sandbox به موازات حساب کاربری زنده خود استفاده کنید.

ایجاد دکمه پی پال شما

این مرحله شامل ایجاد یک دکمه Paypal با استفاده از PayPal SDK است

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" ></script>

دکمه Paypal را که در فایل HTML گنجانده می شود، اضافه کنید.

یک فیلد ورودی اضافه کنید که مقدار را بگیرد.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./script.js" defer></script>
    <title> Paypal Integration with Javascript </title>
    <script  src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" ></script>
</head>
<body>
    <h1>Hello world, This is PayPal Integration with Javascript</h1>

    <input id="donate-amount" type="Enter Amount">
    <div id="paypal-button-container">
    </div>
</body>
</html>

ایجاد کد جاوا اسکریپت برای فراخوانی دکمه های پی پال

ایجاد یک script.js فایل و تابع زیر را اضافه کنید.

function initPayPalButton() {
  paypal
    .Buttons({
      style: {
        shape: "rect",
        color: "gold",
        layout: "vertical",
        label: "paypal",
      },

      createOrder: function (data, actions) {
        const userInput = document.getElementById("donate-amount").value;
        const paypalAmount = parseFloat(userInput) ;
        return actions.order.create({
          purchase_units: [
            { amount: { currency_code: "USD", value: paypalAmount } },
          ],
        });
      },
}
initPayPalButton();

تابع بالا نمونه Paypal را ایجاد می کند و نمونه سفارشی ایجاد می کند که مقدار ورودی را می گیرد و آن را به مقداری که در وب سایت جمع آوری کمک کسر می شود ترسیم می کند.

افزودن پیام تایید

هنگامی که تراکنش پی پال به درستی ارزیابی می شود، یک پیام برای کاربر ارسال کنید.

onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {
          // Full available details
          console.log(
            "Capture result",
            orderData,
            JSON.stringify(orderData, null, 2)
          );

          // Show a success message within this page, for example:
          const element = document.getElementById("paypal-button-container");
          element.innerHTML = "";
          element.innerHTML = "<h3>Thank you for your payment!</h3>";

          // Or go to another URL:  actions.redirect('thank_you.html');
        });
      },

      onError: function (err) {
        console.log(err);
      },

کد زیر کل راهنمای پیاده سازی جاوا اسکریپت است.

function initPayPalButton() {
  paypal
    .Buttons({
      style: {
        shape: "rect",
        color: "gold",
        layout: "vertical",
        label: "paypal",
      },

      createOrder: function (data, actions) {
        const userInput = document.getElementById("donate-amount").value;
        const paypalAmount = parseFloat(userInput) / 100;
        return actions.order.create({
          purchase_units: [
            { amount: { currency_code: "USD", value: paypalAmount } },
          ],
        });
      },

      onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {
          // Full available details
          console.log(
            "Capture result",
            orderData,
            JSON.stringify(orderData, null, 2)
          );

          // Show a success message within this page, for example:
          const element = document.getElementById("paypal-button-container");
          element.innerHTML = "";
          element.innerHTML = "<h3>Thank you for your payment!</h3>";

          // Or go to another URL:  actions.redirect('thank_you.html');
        });
      },

      onError: function (err) {
        console.log(err);
      },
    })
    .render("#paypal-button-container");
}
initPayPalButton();