How to Turn off shipping with new PayPal JavaScript SDK

Question

I'm playing around with the new PayPal Javascript SDK buttons here https://developer.paypal.com/docs/checkout/reference/customize-sdk

Our app sells digital goods and doesn't require a shipping address. Is there any way to turn that off?

// render paypal buttons
paypal.Buttons({
    createOrder: function (data, actions) {
        // Set up the transaction
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: $scope.total
                }
            }],
            application_context: {
                shipping_preference: "NO_SHIPPING"
            }
        });
    },
    onApprove: function (data, actions) {
        // Capture the funds from the transaction
        return actions.order.capture().then(function (details) {
            // Show a success message to your buyer
            alert('Transaction completed by ' + details.payer.name.given_name + ' order ID: ' + data.orderID);


        });
    }
}).render('#paypal-button-container');

Tournai

Answer 1

Yes, you will need to pass the shipping_preference object.

array(
 'shipping_preference' => 'NO_SHIPPING'
),

Reference : https://developer.paypal.com/docs/api/payments/v1/?mark=shipping_preference%20#definition-application_context

Katharina

That is a link to the deprecated v1 documentation. I pasted my code above, is there a way to get that flag working with the new Javascript SDK? – Tournai

Figured it out. Updated my answer with the working code. – Tournai

Is this really working? Will it work with sandbox account? I have been trying this the whole day and it does not work. I am referring to your example in the main questions. – Escallop

Answer 2

It worked for me (at least in sandbox).

import React from 'react';
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

function MyPaypalButton() {
  const clientId = 'your client id';
  const plan_id = 'your plan id';

  const createSubscription = (data, actions) => {
    console.log('createSubscription:', { data, actions });
    return actions.subscription
      .create({ plan_id, application_context: { shipping_preference: 'NO_SHIPPING' }})
      .then((orderId) => {
    // Your code here after create the order
        console.log({ orderId });
    return orderId;
      });
  };
  return (
    <PayPalScriptProvider options={{ clientId, intent: 'subscription', vault: true }}>
      <PayPalButtons style={{ layout: "horizontal" }} {...{createSubscription}} />
    </PayPalScriptProvider>
  );
}

https://developer.paypal.com/docs/api/subscriptions/v1/#definition-application_context

Redfaced

Answer 3

For those who are using v2 of PayPal REST API, please note that the shipping_preference in application_context is DEPRECATED.

The fields in application_context are now available in the experience_context object under the payment_source

Reference: Orders. (2024). PayPal API Reference. https://developer.paypal.com/docs/api/orders/v2/#orders_create!path=application_context/shipping_preference&t=request

Thrippence