PayPal JS SDK v6 — Developer Showcase

All major SDK components in one page. Click a card or use the nav to explore each payment method and scenario.

🔵

PayPal Button

Standard checkout, Pay Now, Continue, BOPIS, and onShippingChange scenarios.

💙

Venmo Button

Renders on eligible devices using FUNDING.VENMO funding source.

✅

Pay Later Button

Dedicated Pay Later checkout via FUNDING.PAYLATER.

💬

Pay Later Message

Inline messaging via paypal.Messages() — multiple placements.

SDK Script Tag

<script
  src="https://www.paypal.com/sdk/js
    ?client-id=AVJ64pXVas3BtB-YrVVMFfCAZx2r2RlEjn0TwRtpGGNxqhhR-DRILDWX8gONSh-jSgunDQucOrVplXtm
    &components=buttons,messages
    &enable-funding=venmo,paylater
    &currency=USD"
></script>

client-id: AVJ64p…Xlm currency: USD components: buttons, messages enable-funding: venmo, paylater

PayPal Button

Four scenarios: Standard + onShippingChange, Pay Now (user_action: PAY_NOW), Continue (user_action: CONTINUE), and BOPIS (in-store pickup, no shipping). Select a scenario below.

Scenario:

Live Preview

Rendered Button

Configuration

fundingSourceFUNDING.PAYPAL

style.labelpaypal

style.colorgold

user_actionPAY_NOW

onShippingChangeenabled

shipping_preferenceGET_FROM_FILE

ℹ️ onShippingChange fires whenever the buyer changes their address or shipping option inside the PayPal popup. The handler patches the order total via actions.order.patch().

Event Log

--:--:--Waiting for SDK to render…

paypal-standard.js

// ── PayPal Button · Standard + onShippingChange ─

paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,

  style: {
    layout: 'vertical',
    color:  'gold',
    shape:  'rect',
    label:  'paypal',
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: '99.99',
          breakdown: {
            item_total:  { currency_code: 'USD', value: '89.99' },
            shipping:    { currency_code: 'USD', value: '10.00' },
          },
        },
      }],
      application_context: {
        shipping_preference: 'GET_FROM_FILE',
        user_action: 'PAY_NOW',
      },
    });
  },

  // ─ Fires when buyer changes address or shipping option
  onShippingChange(data, actions) {
    // Reject non-US addresses
    if (data.shipping_address.country_code !== 'US') {
      return actions.reject();
    }

    // Determine shipping cost from selected option
    const shippingCost = data.selected_shipping_option
      ? parseFloat(data.selected_shipping_option.amount.value)
      : 10.00;

    // Patch the order total in real-time
    return actions.order.patch([{
      op: 'replace',
      path: "/purchase_units/@reference_id=='default'/amount",
      value: {
        currency_code: 'USD',
        value: (89.99 + shippingCost).toFixed(2),
        breakdown: {
          item_total: { currency_code: 'USD', value: '89.99' },
          shipping:   { currency_code: 'USD', value: shippingCost.toFixed(2) },
        },
      },
    }]);
  },

  onApprove(data, actions) {
    return actions.order.capture().then(details => {
      alert(`Captured! Payer: ${details.payer.name.given_name}`);
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
}).render('#paypal-button-container');

// ── PayPal Button · Pay Now ──────────────────────
//
// user_action: 'PAY_NOW' → PayPal review page shows
// "Pay Now" — order is captured immediately.
//

paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,

  style: {
    layout: 'vertical',
    color:  'gold',
    shape:  'rect',
    label:  'pay',    // "Pay Now" label on button
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: '99.99',
        },
        description: 'Pay Now Demo',
      }],
      application_context: {
        shipping_preference: 'GET_FROM_FILE',
        user_action: 'PAY_NOW', // ← Key: "Pay Now" on PP review
      },
    });
  },

  onApprove(data, actions) {
    // Capture immediately — no merchant review step
    return actions.order.capture().then(details => {
      alert(`Payment complete!\nOrder: ${details.id}`);
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
}).render('#paypal-button-container');

// ── PayPal Button · Continue ─────────────────────
//
// user_action: 'CONTINUE' → PayPal review page shows
// "Continue" — buyer returns to merchant review page
// before the final capture call.
//

paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,

  style: {
    layout: 'vertical',
    color:  'blue',
    shape:  'rect',
    label:  'checkout', // "Checkout" label on button
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: '99.99',
        },
      }],
      application_context: {
        shipping_preference: 'GET_FROM_FILE',
        user_action: 'CONTINUE', // ← Key: "Continue" on PP review
        return_url: 'https://yoursite.com/review',
        cancel_url: 'https://yoursite.com/cancel',
      },
    });
  },

  onApprove(data, actions) {
    // Buyer returned to merchant — show review page
    // then call capture() when buyer confirms
    console.log('Buyer approved, orderID:', data.orderID);

    // Merchant shows order review, then captures:
    return actions.order.capture().then(details => {
      alert(`Confirmed & captured!\nOrder: ${details.id}`);
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
}).render('#paypal-button-container');

// ── PayPal Button · BOPIS ────────────────────────
//
// Buy Online, Pick Up In Store.
// shipping_preference: 'NO_SHIPPING' removes the
// shipping address step from the PayPal popup.
// Use for: in-store pickup, digital goods, donations.
//

paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,

  style: {
    layout: 'vertical',
    color:  'gold',
    shape:  'rect',
    label:  'pay',
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: '99.99',
        },
        description: 'In-store Pickup — Order #12345',
        // Optional: supply store pickup address
        shipping: {
          name: { full_name: 'Store Pickup' },
          address: {
            address_line_1: '123 Main St',
            admin_area_2:   'San Jose',
            admin_area_1:   'CA',
            postal_code:    '95131',
            country_code:   'US',
          },
        },
      }],
      application_context: {
        shipping_preference: 'NO_SHIPPING', // ← Hides shipping in popup
        user_action: 'PAY_NOW',
      },
    });
  },

  onApprove(data, actions) {
    return actions.order.capture().then(details => {
      alert(`BOPIS payment complete!\nReady for pickup.\nOrder: ${details.id}`);
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
}).render('#paypal-button-container');

Venmo Button

Renders the Venmo funding source button using paypal.FUNDING.VENMO. The button only renders on eligible devices — desktop browsers may show the fallback message.

Live Preview

Rendered Button

Configuration

fundingSourceFUNDING.VENMO

enable-funding (URL)venmo

style.colorblue

style.shaperect

Event Log

--:--:--Waiting for SDK to render…

venmo-button.js

// ── Venmo Button (JS SDK v6) ───────────────────
//
// SDK script must include: &enable-funding=venmo
//

const venmoBtn = paypal.Buttons({

  fundingSource: paypal.FUNDING.VENMO,

  style: {
    color:  'blue',   // Venmo brand blue
    shape:  'rect',
    label:  'pay',
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: { currency_code: 'USD', value: '99.99' },
      }],
      application_context: { user_action: 'PAY_NOW' },
    });
  },

  onApprove(data, actions) {
    return actions.order.capture().then(details => {
      alert('Venmo payment complete!');
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
});

// Always check eligibility before rendering
if (venmoBtn.isEligible()) {
  venmoBtn.render('#venmo-button-container');
} else {
  console.log('Venmo not eligible on this device');
}

Pay Later Button

Dedicated Pay Later checkout using paypal.FUNDING.PAYLATER. Lets buyers split purchases into installments — no extra cost to the merchant.

Live Preview

Rendered Button

Configuration

fundingSourceFUNDING.PAYLATER

enable-funding (URL)paylater

style.colorwhite

style.shapepill

style.labelpay

Event Log

--:--:--Waiting for SDK to render…

paylater-button.js

// ── Pay Later Button (JS SDK v6) ───────────────
//
// SDK script must include: &enable-funding=paylater
//

paypal.Buttons({

  fundingSource: paypal.FUNDING.PAYLATER,

  style: {
    color:  'white',  // 'gold' | 'blue' | 'silver' | 'white' | 'black'
    shape:  'pill',
    label:  'pay',
    height: 45,
  },

  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: '99.99',
        },
        description: 'Pay Later Demo',
      }],
      application_context: {
        user_action: 'PAY_NOW',
      },
    });
  },

  onApprove(data, actions) {
    return actions.order.capture().then(details => {
      alert(`Pay Later captured!\nOrder: ${details.id}`);
    });
  },

  onCancel: () => console.log('Cancelled'),
  onError:  (err) => console.error(err),
}).render('#paylater-button-container');

Pay Later Message

The paypal.Messages() component renders inline Pay Later messaging. In sandbox, buyerCountry simulates the buyer's locale and activates the correct Pay Later product. Select a country, then adjust the amount slider.

Buyer Country (sandbox: buyerCountry param)

Order Amount

$150

Product Page

placement: product · logo: inline

Cart Page

placement: cart · logo: primary

Payment Page

placement: payment · logo: alternative

Home Page

placement: home · logo: inline

paylater-message.js

// ── Pay Later Message (JS SDK v6) ─────────────
// SDK tag requires: &components=messages
//
// buyerCountry is a SANDBOX-ONLY param that simulates
// the buyer's locale. In production, PayPal detects
// the buyer's country automatically — do NOT send it.

// Product page
paypal.Messages({
  amount: 150.00,
  placement: 'product',
  buyerCountry: 'US',  // sandbox only
  style: { layout: 'text', logo: { type: 'inline' } },
}).render('#msg-product');

// Cart page
paypal.Messages({
  amount: 150.00,
  placement: 'cart',
  buyerCountry: 'US',
  style: { layout: 'text', logo: { type: 'primary' } },
}).render('#msg-cart');

// Payment page
paypal.Messages({
  amount: 150.00,
  placement: 'payment',
  buyerCountry: 'US',
  style: { layout: 'text', logo: { type: 'alternative' } },
}).render('#msg-payment');

// Home page
paypal.Messages({
  amount: 150.00,
  placement: 'home',
  buyerCountry: 'US',
  style: { layout: 'text', logo: { type: 'inline' } },
}).render('#msg-home');