PayPal Continue checkout with inline flow

Introduction

PayPal Continue with inline flow launches the PayPal checkout experience in a pop-up window, without a full page redirect. That means the shopper will stay on the Merchant's checkout page until she/he finishes the complete checkout. There are two possibilities to utilize this kind of checkout. First with a standard checkout option on a payment page and second with a fast checkout option on the cart page.

Standard checkout on the payment page

Loading the PayPal button via COPYandPAY payment widget is just like loading any other brand, i.e. in step 2, PAYPAL_CONTINUE must be specified as a brand. In addition the inline flow must be set in wpwlOptions with inlineFlow : ["PAYPAL_CONTINUE"]

See an example below.

During the normal checkout process, you can populate wpwlOptions.paypal.

Parameter	Mandatory	Description	Default value	Examples
intent	Conditional	The intent of the PayPal order to be set. When overridePaymentType[PAYPAL] attribute is passed as part of the checkout request, more flexibility on setting the intent of the transaction is required by the merchant. The intent determines whether the funds are captured after the buyer checks out, or if the buyer authorizes the funds to be captured later.	authorize (if not populated)	authorize/capture

Fast checkout on the cart page

Sometimes you might want to display the PayPal button early on the payment workflow where you do not yet have a checkout ID. Usually, the shopper can decide whether to continue with the normal checkout, or to immediately pay with PayPal.

It is possible to display the PayPal Button first, decoupled from the checkout ID and create a checkout ID later. In step 2:

Use paymentWidgets.js without a checkout ID

<script src="https://test.oppwa.com/v1/paymentWidgets.js"></script>

Define a callback function in wpwlOptions.createCheckout to create a checkout

We will call the callback function once the PayPal button is clicked. The function will receive one parameter with the used brand ({brand: 'PAYPAL'}) and should return a checkout ID. Specifically, the returned object can be any thenable object. In particular, both JavaScript Promise and jQuery Promise are supported.

Example:

wpwlOptions.createCheckout = function(json) {
    // Call your server to create a checkout
    return $.post("https://your.server/checkout-endpoint")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

PayPal fast checkout options

For using the fast checkout you need to populate wpwlOptions.paypal.

Parameter

Mandatory

Description

Default value

Examples

merchantId

Yes

The merchant-id from Paypal. It needs to be populated in the fast checkout. This value can be found in the merchant account setting

N/A

intent

Conditional (populate only if you want to use capture)

The intent of the PayPal order. Determines whether the funds are captured after the buyer checks out, or if the buyer authorizes the funds to be captured later. Not applicable for subscriptions.

authorize (if not populated)

authorize/capture

clientId

The client-id from PayPal. It needs to be provided if you have subclients which have their own client-id

N/A

currency

Currency of the transaction

N/A

EUR

sdkParams

Could contain all the query parameters from Paypal in JSON format as a key value pair. Refer to Sdk parameter config for a detailed parameter description.

N/A

      
 sdkParams:{
  components: "buttons, messages",
  "enable-funding": "paylater",
  debug: "true"
 }

onShippingChange

A callback by which merchants can update the contents of user's shopping cart to reflect the shipping address they chose on PayPal. Paypal passes two parameters namely 'data' and 'actions' to this callback function.
'data' is an object containing the buyer’s shipping address.

orderID - The ID represents an order.
paymentID - The ID represents a payment.
paymentToken - The ID/token which represents the resource.
shipping_address - The buyer's selected city, state, and postal code.
selected_shipping_option - Shipping option selected by the buyer.

'actions' is an object that contains methods to update the contents of the buyer’s cart and interact with PayPal Checkout.

resolve - Indicates to PayPal that you do not need to make any changes to the buyer’s cart.
reject - Indicates to PayPal that you will not support the shipping address provided by the buyer.
order - Client-side order API method.

Refer Paypal documentation - Shipping Callback

N/A

Refer example below

onShippingChange: function onShippingChange(data, actions) {
		
        if (data.shipping_address.country_code !== 'US') {
            return actions.reject();
        }
	return actions.resolve();
}