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.

Todo Java Script

 

During the normal checkout process, you can populate wpwlOptions.paypal. ParameterMandatoryDescriptionDefault valueExamplesmerchantIdYesThe merchant-id from Paypal. It needs to be populated in the fast checkout. This value can be found in the merchant account settingN/A intentConditional (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/captureclientIdNoThe client-id from PayPal. It needs to be provided if you have subclients which have their own client-idN/A currencyNoCurrency of the transactionN/AEURonShippingChangeNo
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();
}

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.como.world/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 should return a checkout ID, or a promise that will 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(additionalData) {
    // Call your server to create a checkout e.g:
	 return $.post(host + "/v1/checkouts", {
                        "authentication.entityId":"8ac7a4c970bf1ef60170bf541bad00e8",
                        "authentication.password":"npHBAg7saQ",
                        "authentication.userId":"8ac7a4c970bf1ef60170bf4d8b340067",
                        "amount":"2.00",
                        "currency":"EUR",
                        "paymentType":"PA",
                        "testMode":"EXTERNAL"
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
		//e.g
        return response.checkoutId;
    });
};

PayPal fast checkout options

For using the fast checkout you need to populate wpwlOptions.paypal.
ParameterMandatoryDescriptionDefault valueExamples
merchantIdYesThe merchant-id from Paypal. It needs to be populated in the fast checkout. This value can be found in the merchant account settingN/A 
intentConditional (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
clientIdNoThe client-id from PayPal. It needs to be provided if you have subclients which have their own client-idN/A 
currencyNoCurrency of the transactionN/AEUR
onShippingChangeNo
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/ARefer example below
onShippingChange: function onShippingChange(data, actions) {
		
        if (data.shipping_address.country_code !== 'US') {
            return actions.reject();
        }
	return actions.resolve();
}