JavaScript SDK dynamically exposes objects and methods, based on components you are using. These components are configured in the components query string parameter in the URL you have included in the <script>.

Note: New browser versions are frequently released. Make sure to keep your browser updated to the latest version for best results.

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- Replace "test" with your own sandbox Business account app client ID -->
    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>
    <!-- Set up a container element for the button -->
    <div id="paypal-button-container"></div>
    <script>
      paypal.Buttons({
        createOrder() {
          return fetch("/my-server/create-paypal-order", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              cart: [
                {
                  sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                  quantity: "YOUR_PRODUCT_QUANTITY",
                },
              ]
            })
          })
          .then((response) => response.json())
          .then((order) => order.id);
        }
      }).render('#paypal-button-container');
    </script>
  </body>
</html>

JavaScript

paypal.Buttons({
  createOrder() {
    // This function sets up the details of the transaction, including the amount and line item details.
    return fetch("/my-server/create-paypal-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        cart: [
          {
            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
            quantity: "YOUR_PRODUCT_QUANTITY"
          }
        ]
      })
    });
  },
  onApprove(data) {
    // This function captures the funds from the transaction.
    return fetch("/my-server/capture-paypal-order", {
      method: "POST",
      body: JSON.stringify({
        orderID: data.orderID
      })
    })
    .then((response) => response.json())
    .then((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 payment buttons on your web page.

JSON


{
  "title": "Block xnxx",
  "context": {
    "quote": "Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.",
    "cite": "Adipiscing Ornare"
  },
  "variants": [
    {
      "name": "no-cite",
      "title": "No Cite",
      "context": {
        "cite": null
      }
    }
  ]
}

Node.js


app.post("/my-server/create-paypal-order", async (req, res) => {
  const order = await createOrder();
  res.json(order);
});

// use the orders api to create an order
function createOrder() {
  // create accessToken using your clientID and clientSecret
  // for the full stack example, please see the Standard Integration guide 
  // https://developer.paypal.com/docs/multiparty/checkout/standard/integrate/
  const accessToken = "REPLACE_WITH_YOUR_ACCESS_TOKEN";
  return fetch ("https://api-m.sandbox.paypal.com/v2/checkout/orders", {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    }
    body: JSON.stringify({
      "purchase_units": [
        {
          "amount": {
            "currency_code": "USD",
            "value": "100.00"
          },
          "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b"
        }
      ],
      "intent": "CAPTURE",
      "payment_source": {
        "paypal": {
          "experience_context": {
            "payment_method_preference": "IMMEDIATE_PAYMENT_REQUIRED",
            "payment_method_selected": "PAYPAL",
            "brand_name": "EXAMPLE INC",
            "locale": "en-US",
            "landing_page": "LOGIN",
            "shipping_preference": "SET_PROVIDED_ADDRESS",
            "user_action": "PAY_NOW",
            "return_url": "https://example.com/returnUrl",
            "cancel_url": "https://example.com/cancelUrl"
          }
        }
      }
    })
  })
  .then((response) => response.json());
}

Data Attribute

data: An object containing the buyer’s shipping address. Consists of the following fields:

  • orderID (required): An ID that represents an order.
  • paymentID (optional): An ID that represents a payment.
  • paymentToken (required): An ID/token that represents the resource.
  • shipping_address (required): The buyer's selected city, state, country, and postal code.
    • city: Shipping address city.
    • state: Shipping address state or province.
    • country_code: Shipping address country.
    • postal_code: Shipping address ZIP code or postal code.
  • selected_shipping_option (optional): Shipping option selected by the buyer.
    • label: Custom shipping method label.
    • type: Shipping method type (SHIPPING or PICKUP).
    • amount: Additional cost for this method.
      • currency_code: ISO currency code (for example, USD).
      • value: String-formatted decimal format (for example, 1.00).
Funding sourcePayment button
paypal.FUNDING.PAYPALPayPal
paypal.FUNDING.CARDCredit or debit cards
paypal.FUNDING.CREDITPayPal Credit
paypal.FUNDING.VENMOVenmo
paypal.FUNDING.SEPASEPA-Lastschrift
paypal.FUNDING.BANCONTACTBancontact
paypal.FUNDING.EPSeps
paypal.FUNDING.GIROPAYgiropay
paypal.FUNDING.IDEALiDEAL
paypal.FUNDING.MERCADOPAGOMercado Pago
paypal.FUNDING.MYBANKMyBank
paypal.FUNDING.P24Przelewy24
paypal.FUNDING.SOFORTSofort

Messages

Use when you want to display Pay Later messages on your site. Because Pay Later offers differ by country, certain options for the messages component render differently depending on country. For complete details, as well as country-specific examples, see Pay Later Reference.