So to summarize the paypal payment function the whole process is done on the front end

background

The company required to add the product order function on the floor page, support PayPal payment and link payment, so we started the demo on PayPal BB first

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <! -- <script src="https://www.paypal.com/sdk/js?client-id=sb"></script> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! -- Ensures optimal rendering on mobile devices. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <! -- Optimal Internet Explorer compatibility -->
    <script src="https://www.paypal.com/sdk/js?client-id=AeRq2qAvJG3KYKzfM0JhaRv2b2bmuuooHaaMz7oEJLollUZeSex0wBDcbTu9rbKeOsxpmtW8wq1-Bsv M">
        // Required. Replace YOUR_CLIENT_ID with your sandbox client ID.
    </script>
    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                console.log('createOrderData', data);
                console.log('createOrderactions', actions);
                // This function sets up the details of the transaction, including the amount and line item details.
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '100' // Transaction amount}}}); },onApprove: function(data, actions) {
                console.log('onApproveData', data);
                console.log('onApproveActions', actions);
                // This function captures the funds from the transaction.
                return actions.order.capture().then(function(details) {
                    console.log('Transaction successful', details);

                    // This function shows a transaction success message to your buyer.
                    alert('Transaction completed by ' + details.payer.name.given_name);
                });
            }
        }).render('#paypal-button-container');
        //This function displays Smart Payment Buttons on your web page.
    </script>

</head>

<body>
    <div id='paypal-button-container'></div>
    <script>
    </script>
</body>
Copy the code

The key point

A third party library

  • ClientId This is the id of the payee
  • CreateOrder Creates the order callback function
  • OnApprove captures the transaction callback function,
  • The details are available in the actions. Order. Capture callback. At this point, the deal is done
  • Id # paypal button – the container container

Own page flow

Bring in a third-party library, bring clientId, and render it into the container you want as shown below

It gave me all the styles, I didn’t make any other changes; Click the paypal button and you’ll be able to hoist up the third-party interface and make the payment.

Third party interface payment process

  • At this time, you need to fill in the buyer’s email account. I applied for a sandbox account (test account) for testing

  • @Personal is the personal account, that is, the buyer, and @Business is the payee, that is, the merchant. Later I will introduce how to apply for a sandbox account and get a clientId
  • This can get the account for login, and then fill in some information (such as the address of the harvest, etc.) to pay, the amount is set by the seller, that is, in the codeValue: '100' // Transaction amountClosing the payment process

How to apply for a sandbox account and obtain a clientId

Application address: www.paypal.com/signin?retu…

  • Under the DASHBOARD menu, select My Apps & Credentials.
  • Make sure you are on the Sandbox TAB to get the API credentials that you will use when developing the code. After testing and before going live, switch to the Live TAB to get live credentials.
  • Under the App Name column, select Default Application and PayPal will create the Application using the new Developer Dashboard account. If you do not see the default application, select Create application.
  • These three steps are posted here, very clear
  • Once you’ve created your app, you get your clientId

Get sandbox accounts for sellers and buyers

  • Click on the account

  • View/Edit Account to see the email address and password of the account
  • After obtaining the buyer’s email account and password, the payment can be made
  • End of the process

Check the transaction

  • www.sandbox.paypal.com/?_ga=1.2520…
  • How to get the View/Edit Account

that’s all