JavaScript SDK reference

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

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

1paypal.Buttons({
2  style: {
3    layout: 'vertical',
4    color:  'blue',
5    shape:  'rect',
6    label:  'paypal'
7  }
8}).render('#paypal-button-container');

1<div id="paypal-button-container" style="max-width:1000px;"></div>
2
3<script>
4  paypal.Buttons({
5  style: {
6    disableMaxWidth: true
7  },
8}).render('#paypal-button-container');
9</script>

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons&vault=true&intent=subscription"></script>

1paypal.Buttons({
2  createSubscription(data, actions) {
3    return actions.subscription.create({
4      'plan_id': 'P-2UF78835G6983425GLSM44MA'
5    });
6  },
7
8  onApprove(data) {
9    alert('You have successfully created subscription ' + data.subscriptionID);
10  }
11}).render('#paypal-button-container');

1paypal.Buttons({
2  createSubscription(data, actions) {
3    // updatedSubscription, status, and subscriptionId are defined by your code
4    if (updatedSubscription && (status === 'ACTIVE' || status === 'SUSPENDED')) {
5      // if subscription exists, revise it by chaning the plan id
6      return actions.subscription.revise(subscriptionId, {
7        "plan_id": "NEW_SUBSCRIPTION_PLAN_ID"
8      });
9    } else {
10      return actions.subscription.create({
11        'plan_id': 'P-2UF78835G6983425GLSM44MA'
12      });
13    }
14  },
15
16  onApprove(data) {
17    alert('You have successfully created subscription ' + data.subscriptionID);
18  }
19}).render('#paypal-button-container');

1paypal.Buttons({
2  createOrder() {
3    // This function sets up the details of the transaction, including the amount and line item details.
4    return fetch("/my-server/create-paypal-order", {
5      method: "POST",
6      headers: {
7        "Content-Type": "application/json",
8      },
9      body: JSON.stringify({
10        cart: [
11          {
12            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
13            quantity: "YOUR_PRODUCT_QUANTITY"
14          }
15        ]
16      })
17    });
18  },
19  onApprove(data) {
20    // This function captures the funds from the transaction.
21    return fetch("/my-server/capture-paypal-order", {
22      method: "POST",
23      body: JSON.stringify({
24        orderID: data.orderID
25      })
26    })
27    .then((response) => response.json())
28    .then((details) => {
29      // This function shows a transaction success message to your buyer.
30      alert('Transaction completed by ' + details.payer.name.given_name);
31    });
32  }
33}).render('#paypal-button-container');
34//This function displays payment buttons on your web page.

1paypal.Buttons({
2  onCancel(data) {
3    // Show a cancel page, or return to cart
4  }
5}).render('#paypal-button-container');

1paypal.Buttons({
2  onError(err) {
3    // For example, redirect to a specific error page
4    window.location.href = "/your-error-page-here";
5  }
6}).render('#paypal-button-container');

1<p id="error" class="hidden">Click the checkbox</p>
2<label><input id="check" type="checkbox" required> Click here to continue</label>
3
4<script>
5  paypal.Buttons({
6
7    // onInit is called when the button first renders
8    onInit(data, actions)  {
9
10      // Disable the buttons
11      actions.disable();
12
13      // Listen for changes to the checkbox
14      document.querySelector('#check')
15        .addEventListener('change', function(event) {
16
17          // Enable or disable the button when it is checked or unchecked
18          if (event.target.checked)  {
19            actions.enable();
20          } else  {
21            actions.disable();
22          }
23      });
24    },
25
26    // onClick is called when the button is clicked
27    onClick()  {
28
29      // Show a validation error if the checkbox is not checked
30      if (!document.querySelector('#check').checked) {
31        document.querySelector('#error').classList.remove('hidden');
32      }
33    }
34
35  }).render('#paypal-button-container');
36</script>

1// Loop over each funding source / payment method
2paypal.getFundingSources().forEach(function(fundingSource) {
3
4  // Initialize the buttons
5  var button = paypal.Buttons({
6    fundingSource: fundingSource
7  });
8
9  // Check if the button is eligible
10  if (button.isEligible()) {
11
12    // Render the standalone button for that funding source
13    button.render('#paypal-button-container');
14  }
15});

1paypal.Buttons().render('#paypal-buttons-container');

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,marks"></script>

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,funding-eligibility,marks"></script>

1// Loop over each funding source / payment method
2paypal.getFundingSources().forEach(function(fundingSource) {
3
4  // Initialize the marks
5  var mark = paypal.Marks({
6    fundingSource: fundingSource
7  });
8
9  // Check if the mark is eligible
10  if (mark.isEligible()) {
11
12    // Render the standalone mark for that funding source
13    mark.render('#paypal-mark-container');
14  }
15});

1paypal.Marks().render('#paypal-marks-container');

1<!-- Render the radio buttons and marks -->
2<label>
3  <input type="radio" name="payment-option" value="paypal" checked>
4  <div id="paypal-marks-container"></div>
5</label>
6
7<label>
8  <input type="radio" name="payment-option" value="alternate">
9</label>
10
11<div id="paypal-buttons-container"></div>
12<div id="alternate-button-container">
13  <button>Pay with a different method</button>
14</div>
15
16<script>
17  // Render the PayPal marks
18  paypal.Marks().render('#paypal-marks-container');
19
20  // Render the PayPal buttons
21  paypal.Buttons().render('#paypal-buttons-container');
22
23  // Listen for changes to the radio buttons
24  document.querySelectorAll('input[name=payment-option]')
25    .forEach(function (el) {
26      el.addEventListener('change', function (event) {
27
28        // If PayPal is selected, show the PayPal button
29        if (event.target.value === 'paypal') {
30          document.body.querySelector('#alternate-button-container')
31            .style.display = 'none';
32          document.body.querySelector('#paypal-buttons-container')
33            .style.display = 'block';
34        }
35
36        // If alternate funding is selected, show a different button
37        if (event.target.value === 'alternate') {
38          document.body.querySelector('#alternate-button-container')
39            .style.display = 'block';
40          document.body.querySelector('#paypal-buttons-container')
41            .style.display = 'none';
42        }
43      });
44    });
45
46  // Hide non-PayPal button by default
47  document.body.querySelector('#alternate-button-container')
48    .style.display = 'none';
49</script>

1const cardFields = paypal.CardFields({
2    style,
3    createOrder,
4    onApprove
5});

1const createOrder = (data, actions) => {
2    return fetch('/api/paypal/order', {
3        method: 'POST'
4    }).then(res => {
5        return res.json();
6    }).then(json => {
7        return json.orderID;
8    });
9};

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \n -H "Content-Type: application/json" \n -H "Authorization: Bearer ACCESS-TOKEN" \n -d '{
2    "intent": "CAPTURE",
3    "purchase_units": [
4        {
5            "amount": {
6                "currency_code": "USD",
7                "value": "100.00"
8            }
9        }
10    ],
11}

1{
2      "id": "5O190127TN364715T",
3      "status": "CREATED",
4      "intent": "CAPTURE",
5      "purchase_units": [
6          {
7              "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
8              "amount": {
9                  "currency_code": "USD",
10                  "value": "100.00"
11              }
12          }
13      ],
14      "create_time": "2022-10-03T11:18:49Z",
15      "links": [
16          {
17              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
18              "rel": "self",
19              "method": "GET"
20          },
21          {
22              "href": "https://www.paypal.com/checkoutnow?token=5O190127TN364715T",
23              "rel": "approve",
24              "method": "GET"
25          },
26          {
27              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
28              "rel": "update",
29              "method": "PATCH"
30          },
31          {
32              "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T/capture",
33              "rel": "capture",
34              "method": "POST"
35          }
36      ]
37  }

1const onApprove = (data, actions) => {
2    return fetch('/api/paypal/order/capture', {
3        method: 'POST',
4        body: JSON.stringify({
5            orderID: data.orderID
6        })
7    }).then(res => {
8        return res.json();
9    }).then(json => {
10        // Show a success page
11    });
12};

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/<order_id>/capture 
2 -H "Content-Type: application/json" 
3 -H "Authorization: Bearer ACCESS-TOKEN"

1{
2  "id": "some_id",
3  "status": "COMPLETED",
4  "payment_source": {
5    "card": {
6      "brand": "VISA",
7      "last_digits": "1111",
8      "type": "CREDIT"
9    }
10  },
11  "purchase_units": [
12    {
13      "reference_id": "reference_id",
14      "payments": {
15        "authorizations": [
16          {
17            "id": "id",
18            "status": "CREATED",
19            "amount": {
20              "currency_code": "USD",
21              "value": "100.00"
22            },
23            "seller_protection": {
24              "status": "ELIGIBLE",
25              "dispute_categories": [
26                "ITEM_NOT_RECEIVED",
27                "UNAUTHORIZED_TRANSACTION"
28              ]
29            },
30            "expiration_time": "2022-10-04T14:37:39Z",
31            "links": [
32              {
33                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T",
34                "rel": "self",
35                "method": "GET"
36              },
37              {
38                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T/capture",
39                "rel": "capture",
40                "method": "POST"
41              },
42              {
43                "href": "https://api-m.paypal.com/v2/payments/authorizations/5O190127TN364715T/void",
44                "rel": "void",
45                "method": "POST"
46              },
47              {
48                "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
49                "rel": "up",
50                "method": "GET"
51              }
52            ]
53          }
54        ]
55      }
56    }
57  ],
58  "payer": {
59    "name": {
60      "given_name": "Firstname",
61      "surname": "Lastname"
62    },
63    "email_address": "payer@example.com",
64    "payer_id": "QYR5Z8XDVJNXQ"
65  },
66  "links": [
67    {
68      "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
69      "rel": "self",
70      "method": "GET"
71    }
72  ]
73}

1const cardFields = paypal.CardFields({
2    // ...
3    onError = (error) => {
4        // Handle the error object
5        console.error(error);
6    },
7    // ...
8});

1const cardNameContainer = document.getElementById("card-name-field-container");
2const nameField = cardField.NameField({
3  placeholder: "Enter your full name as it appears on your card",
4inputEvents: {
5    onChange: (event)=> {
6        console.log("returns a stateObject", event);
7    }
8},
9style: {
10    ".invalid": {
11        "color": "purple",
12    }
13}
14});
15  });
16nameField.render(cardNameContainer);
17const cardNumberContainer = document.getElementById("card-number-field-container");
18const numberField = cardField.NumberField(/*options*/);
19numberField.render(cardNumberContainer);
20const cardExpiryContainer = document.getElementById("card-expiry-field-container");
21const expiryField = cardField.ExpiryField(/*options*/);
22expiryField.render(cardExpiryContainer);
23const cardCvvContainer = document.getElementById("card-cvv-field-container");
24const cvvField = cardField.CVVField(/*options*/);
25cvvField.render(cardCvvContainer);

1const cardStyle = {
2    'input': {
3        'font-size': '16px',
4        'font-family': 'courier, monospace',
5        'font-weight': 'lighter',
6        'color': '#ccc',
7    },
8    '.invalid': {
9        'color': 'purple',
10    },
11};
12const cardField = paypal.CardFields({
13    style: cardStyle
14});

1const nameFieldStyle = {
2    'input': {
3        'color': 'blue'
4    }
5    '.invalid': {
6        'color': 'purple'
7    },
8};
9const nameField = cardField.NameField({
10    style: nameFieldStyle
11}).render('#card-name-field-container');

1const cardField = paypal.CardFields({
2    inputEvents: {
3        onChange: function(data) => {
4            // Do something when an input changes
5        },
6        onFocus: function(data) => {
7            // Do something when a field gets focus
8        },
9        onBlur: function(data) => {
10            // Do something when a field loses focus
11        }
12        onInputSubmitRequest: function(data) => {
13            if (data.isFormValid) {
14                // Submit the card form for the payer
15            } else {
16                // Inform payer that some fields are not valid
17            }
18        }
19    }
20})

1const cardField = paypal.CardFields(/* options */)
2const nameField = cardField.NameField({
3       inputEvents: {
4        onChange: function(data) => {
5            // Do something when the input of only the name field changes
6        },
7        onFocus: function(data) => {
8            // Do something when only the name field gets focus
9        },
10        onBlur: function(data) => {
11            // Do something when only name field loses focus
12        }
13        onInputSubmitRequest: function(data) => {
14            if (data.isFormValid) {
15                // Submit the card form for the payer
16            } else {
17                // Inform payer that some fields are not valid
18            }
19        }
20    }
21});

1data: {
2    cards: [{code: {name: 'CVV', size: 3}, niceType: "Visa", type: "visa"}]
3    emittedBy: "number", // Not returned for getState()
4    isFormValid: false,
5    errors: ["INVALID_CVV"]
6    fields: {
7        cardCvvField: {
8            isFocused: false,
9            isEmpty: true,
10            isValid: false,
11            isPotentiallyValid: true,
12        },
13        cardNumberField: {
14            isFocused: true,
15            isEmpty: false,
16            isValid: false,
17            isPotentiallyValid: true,
18        },
19        cardNameField: {
20            isFocused: false,
21            isEmpty: true,
22            isValid: false,
23            isPotentiallyValid: true,
24        },
25        cardExpiryField: {
26            isFocused: false,
27            isEmpty: true,
28            isValid: false,
29            isPotentiallyValid: true,
30        },
31    },
32}

1const cardFields = paypal.CardFields({/* options */});
2let cardContainer = document.getElementById("#card-number-field-container")
3const cardNumberField = cardFields.NumberField({
4    // Add valid or invalid class when the validation changes on the field
5    inputEvents: {
6        onChange: (data) => {
7            cardContainer.className = data.fields.cardNumberField.isValid ? 'valid' : 'invalid';
8        }
9    }
10})

1const formContainer = document.getElementById("form-container")
2const cardFields = paypal.CardFields({
3    inputEvents: {
4        onChange: (data) => {
5            formContainer.className = data.isFormValid ? 'valid' : 'invalid'
6        }
7    }
8});

1const cardField = paypal.CardFields(/* options */)
2// ...
3// Render the card fields
4// ...
5cardFields.getState().then((data) => {
6    // Submit only if the current
7    // state of the form is valid
8    if (data.isFormValid) {
9        cardFields.submit().then(() => {
10            //Submit success
11        }).catch((error) => {
12            //Submit error
13        });
14    }
15});

1const cardField = paypal.CardFields(/* options */)
2if (cardFields.isEligible()) {
3  cardFields.NumberField().render("#card-number-field-container");
4  cardFields.CVVField().render("#card-cvv-field-container");
5  // ...
6}

1// Add click listener to merchant-supplied submit button
2// and call the submit function on the CardField component
3multiCardFieldButton.addEventListener("click", () => {
4  cardField.submit().then(() => {
5    console.log("Card Fields submit");
6  }).catch((err) => {
7    console.log("There was an error with card fields: ", err);
8  });
9});

1const cardField = paypal.CardFields(/* options */)
2const numberField = cardField.NumberField(/* options */)
3numberField.addClass("purple");
4numberField.render(cardNumberContainer);

1const cardField = paypal.CardFields(/* options */)
2const nameField = cardField.NameField(/* options */);
3nameField.render(cardNameContainer);
4nameField.clear();

1const cardField = paypal.CardFields(/* options */)
2const nameField = cardField.NameField(/* options */)
3nameField.render(cardNameContainer);
4nameField.focus();

1const cardField = paypal.CardFields(/* options */)
2const numberField = cardField.NumberField(/* options */)
3numberField.render(cardNumberContainer);
4numberField.removeAttribute("placeholder");

1const cardField = paypal.CardFields(/* options */)
2const numberField = cardField.NumberField(/* options */)
3numberField.render(cardNumberContainer);
4numberField.removeClass("purple");

1const cardNumberContainer = document.getElementById("card-number-field-container");
2const cardField = paypal.CardFields(/* options */)
3cardField.NumberField(/* options */).render(cardNumberContainer);
4// OR use a selector string
5cardField.NumberField(/*options*/).render("#card-number-field-container")

1const cardField = paypal.CardFields(/* options */)
2const nameField = cardField.NameField(/* options */)
3nameField.setAttribute("placeholder", "Enter your full name");
4nameField.render(cardNameContainer);

1const cardField = paypal.CardFields(/* options */)
2const nameField = cardField.NameField(/* options */)
3nameField.render(cardNameContainer);
4nameField.setMessage("Enter your full name");

1<html>
2    <head>
3        <meta charset="UTF-8">
4        <title>Checkout Page</title>
5    </head>
6    <body>
7        <div id="checkout-form">
8         <div id="card-name-field-container"></div>
9         <div id="card-number-field-container"></div>
10         <div id="card-expiry-field-container"></div>
11         <div id="card-cvv-field-container"></div>
12         <button id="multi-card-field-button" type="button">Pay now with Card Fields</button>
13        </div>
14    </body>
15      <script src="https://www.paypal.com/sdk/js?client-id=<your-client-id>&components=card-fields"></script>
16      <script>
17       // Custom styles object (optional)
18        const styleObject = {
19            input: {
20                "font-size": "16 px",
21                "font-family": "monospace",
22                "font-weight": "lighter",
23                color: "blue",
24            },
25            ".invalid": {
26            color: "purple",
27            },
28            ":hover": {
29                color: "orange",
30            },
31            ".purple": {
32                color: "purple",
33            },
34        };
35        // Create the card fields component and define callbacks
36        const cardField = paypal.CardFields({
37            style: styleObject,
38            createOrder: function (data, actions) {
39                return fetch("/api/paypal/order/create/", {
40                method: "post",
41                })
42                .then((res) => {
43                    return res.json();
44                })
45                .then((orderData) => {
46                    return orderData.id;
47                });
48            },
49            onApprove: function (data, actions) {
50                const { orderID } = data;
51                return fetch('/api/paypal/orders/${orderID}/capture/', {
52                method: "post",
53                })
54                .then((res) => {
55                    return res.json();
56                })
57                .then((orderData) => {
58                    // Redirect to success page
59                });
60            },
61            inputEvents: {
62                onChange: function (data) {
63                    // Handle a change event in any of the fields
64                },
65                onFocus: function(data) {
66                    // Handle a focus event in any of the fields
67                },
68                onBlur: function(data) {
69                    // Handle a blur event in any of the fields
70                },
71                onInputSubmitRequest: function(data) {
72                    // Handle an attempt to submit the entire card form
73                    // while focusing any of the fields
74                }
75            },
76        });
77        // Define the container for each field and the submit button
78        const cardNameContainer = document.getElementById("card-name-field-container"); // Optional field
79        const cardNumberContainer = document.getElementById("card-number-field-container");
80        const cardCvvContainer = document.getElementById("card-cvv-field-container");
81        const cardExpiryContainer = document.getElementById("card-expiry-field-container");
82        const multiCardFieldButton = document.getElementById("multi-card-field-button");
83        // Render each field after checking for eligibility
84        if (cardField.isEligible()) {
85            const nameField = cardField.NameField();
86            nameField.render(cardNameContainer);
87            const numberField = cardField.NumberField();
88            numberField.render(cardNumberContainer);
89            const cvvField = cardField.CVVField();
90            cvvField.render(cardCvvContainer);
91            const expiryField = cardField.ExpiryField();
92            expiryField.render(cardExpiryContainer);
93            // Add click listener to the submit button and call the submit function on the CardField component
94            multiCardFieldButton.addEventListener("click", () => {
95                cardField
96                .submit()
97                .then(() => {
98                    // Handle a successful payment
99                })
100                .catch((err) => {
101                    // Handle an unsuccessful payment
102                });
103            });
104        }
105      </script>
106</html>