Wallet shipping options

This guide explains how to dynamically update the payment amount based on the shipping method selected by the customer when using Apple Pay or Google Pay in Payment Components.

This functionality supports two flows:

• Via payment_options.feed_url – Provide the URL of your endpoint that MultiSafepay uses to retrieve available shipping methods dynamically based on the shipping details provided by the customer in Apple Pay or Google Pay. The shipping methods include their prices and allowed or excluded areas.
• Via payment_options.settings.checkout_options.shipping_methods – Define the available shipping methods directly in the request, including their prices and allowed or excluded areas. If both feed_url and shipping_methods are provided, shipping_methods takes precedence and feed_url is ignored.

How it works

1. The customer starts an Apple Pay or Google Pay payment in the Payment Component.
2. The customer provides or updates their shipping details in the wallet.
3. MultiSafepay determines the available shipping methods using either:
   • the merchant endpoint configured in payment_options.feed_url, or
   • the shipping methods defined in payment_options.settings.checkout_options.shipping_methods.
4. The wallet displays the available shipping methods for the customer's shipping address.
5. The customer selects a shipping method.
6. The shipping method's price is added to the payment amount.
7. If the customer selects a different shipping method, the payment amount is updated based on the price of the newly selected method.
8. The customer continues and authorizes the payment using the updated amount.

1. Enable shipping

Enable shipping for Apple Pay, Google Pay, or both under the required object: payment_options.settings.gateways.

• Google Pay: GOOGLEPAY.shipping.enabled

• Apple Pay: APPLEPAY.shipping.enabled

  For example:

  JSON

    {
      "payment_options": {
        "settings": {
          "gateways": {
            "APPLEPAY": {
              "shipping": {
                "enabled": true
              }
            },
            "GOOGLEPAY": {
              "shipping": {
                "enabled": true
              }
            }
          }
        }
      }
    }

2. Configure shipping methods

Choose one of the following flows:

{
  "payment_options": {
    "feed_url": "https://example.com/shipping",
    "settings": {
      "gateways": {
        "APPLEPAY": {
          "shipping": {
            "enabled": true
          }
        },
        "GOOGLEPAY": {
          "shipping": {
            "enabled": true
          }
        }
      },
      "checkout_options": {
        "shipping_methods": {
          "flat_rate_shipping": [
            {
              "name": "Standard shipping",
              "price": 7
            },
            {
              "name": "Express shipping",
              "price": 9
            }
          ]
        }
      }
    }
  }
}