PayPal JavaScript API pass shipping address

Question

I need to use the PayPal API for an online store. The user sets his shipping information (Name and Address) in the store interface and then clicks the "Pay with PayPal" button. Now I need to pass that information to the PayPal API so that the field "shipping address" in the PayPal checkout interface displays the correct address. I implemented it like shown in the API documentation (https://developer.paypal.com/docs/api/orders/v2/#definition-shipping_detail.address_portable), but it does not seem to work, since the shipping address and name in the PayPal checkout interface is still the default sandbox address for John Doe. Here is how I implemented it, but it has to be wrong, since it does not work:

createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '34'
          },

          shipping_detail: {
            name: {
              full_name: 'Hans Muller'
            },
            address_portable: {
              address_line_1: 'Rohrd. 16',
              address_line_2: 'Rohrdorfer Street',
              admin_area_2: 'Stephanskirchen',
              admin_area_1: 'Bayern',
              postal_code: '83071',
              country_code: 'DE',
            },
          },
        }]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        console.log('Success');
      });
    },

    onError: function (err) {
      console.error(err);
    }

But the PayPal sandbox interface still shows the (german) default shipping address:

In addition it should not be possible to change that address later on in the PayPal interface. Any advice on what I did wrong here would be appreciated.

score 8 · Answer 1 · answered Oct 05 '21 at 18:51

Thanks to Preston PHX (accepted answer), I was able to solve the problem. Here is the full PayPal button render call for all the lazy people:

paypal.Buttons({
    style: {
      size: 'small',
      shape: 'rect',
      color: 'blue',
      layout: 'vertical',
      label: 'paypal',
      height: 40
    },

    createOrder: function(data, actions) {
      return actions.order.create({
        application_context: {
          brand_name: 'myBrand',
          locale: 'us-US',
          shipping_preference: 'SET_PROVIDED_ADDRESS',
        },

        purchase_units: [{
          amount: {
            value: '34'
          },

          shipping: {
            name: {
              full_name: 'Hans Muller'
            },
            address: {
              address_line_1: 'MyStreet 12',
              admin_area_2: 'New York',
              postal_code: '10001',
              country_code: 'US',
            }
          }
        }]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        console.log('Success');
      });
    },

    onError: function (err) {
      console.error(err);
    }
  }).render('#paypal-button-container');

Preston PHX · Accepted Answer · 2021-10-05T19:00:16.940

You are indeed doing it wrong.

For an Orders create request body, shipping information goes in purchase_units -> shipping. You are not using the documented key name object structure.

Secondly, once you correctly provide a shipping address, it can still be changed within the PayPal approval flow. If you want to force the shipping address you provide, you need to set the application_context -> shipping_preference variable, to SET_PROVIDED_ADDRES as documented in the same link above. Note that application_context goes outside the purchase_units array. If you do this to force a particular address and the address provided is not acceptable to PayPal, the transaction will fail.

Make sure you use the documented key names at every level, and not the name of the object that goes there (for example order_* and *_portable are not correct). Incorrectly named variables will be ignored.

The recommended PayPal Checkout flow is to instead obtain the address from the buyer's account, and allow them to change this address within PayPal. You can obtain the selected shipping address after the transaction is approved, and before proceeding with capturing it.

Thanks a lot! That totally solved my problem. I used the wrong object key names. For completeness I will add an answer with the complete working PayPal button script for everyone else having this problem. — Merlin0216, Oct 05 '21 at 18:47

score 0 · Answer 3 · edited Dec 16 '21 at 16:56

If sending to the SDK js address, you need to first add the 'shipping' object in 'purchase_units' after add the 'application_context' at the same level as the 'purchase_units'.

Links:

https://developer.paypal.com/docs/api/orders/v2/#definition-order_application_context for application_context

https://developer.paypal.com/docs/api/orders/v2/#definition-purchase_unit for shipping info in purchase_units

Code:

purchase_units: [{
  items: itemList,
  amount: { data },
  shipping: {
   name: {
    full_name: address.name+' '+address.surname
   },
   type: 'SHIPPING',
   address: {
    address_line_1: address.address,
    country_code: address.country.iso_code,
    postal_code: address.zip_code,
    admin_area_2: address.city,
    admin_area_1: address.country.general_name
  }
 },
}],
application_context: {
 shipping_preference: 'SET_PROVIDED_ADDRESS',
}

PayPal JavaScript API pass shipping address

3 Answers3