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¤cy=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
orPICKUP
).amount
: Additional cost for this method.currency_code
: ISO currency code (for example,USD
).value
: String-formatted decimal format (for example,1.00
).
Funding source | Payment button |
---|---|
paypal.FUNDING.PAYPAL | PayPal |
paypal.FUNDING.CARD | Credit or debit cards |
paypal.FUNDING.CREDIT | PayPal Credit |
paypal.FUNDING.VENMO | Venmo |
paypal.FUNDING.SEPA | SEPA-Lastschrift |
paypal.FUNDING.BANCONTACT | Bancontact |
paypal.FUNDING.EPS | eps |
paypal.FUNDING.GIROPAY | giropay |
paypal.FUNDING.IDEAL | iDEAL |
paypal.FUNDING.MERCADOPAGO | Mercado Pago |
paypal.FUNDING.MYBANK | MyBank |
paypal.FUNDING.P24 | Przelewy24 |
paypal.FUNDING.SOFORT | Sofort |
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.