COPYandPAY Fast Checkout

You might want to display the payment button early in the payment workflow. You need the buttons being rendered, but you don’t have a chechkout ID created yet. Usually, the shopper can decide whether to continue with the normal checkout, or to immediately pay with one of the fast checkout options. It is possible to display the payment button first and create a checkout ID later.

It is possible to display the payment button first 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 payment 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(json) {
    // Call your server to create a checkout
    // (JSON.parse(JSON.stringify(json))).brand - gives a string representation of the brand used by the shopper.
    return $.post("https://your.server")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

Brands supporting Fast Checkout option

Apple Pay

Display the Apple Pay Button first 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 Apple Pay 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(json) {
    // Call your server to create a checkout
    // (JSON.parse(JSON.stringify(json))).brand - Would be 'APPLEPAY'.
    return $.post("https://your.server")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

For further options on how to integrate Apple Pay, please have a look at our detailed Apple Pay page.

Google Pay

Display the Google Pay Button first 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 Google Pay 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:

var wpwlOptions = {
	googlePay : {
	    gatewayMerchantId: '8a8294174d0a8edd014d242337942575',
	    merchantId : "01234567890123456789",
	    merchantName : "Example Stage Merchant",
	    currencyCode : "EUR",
	    prefetchPriceStatus : "NOT_CURRENTLY_KNOWN",
	    amount : amount,
	    displayItems: [
			{
			  label: "Subtotal",
			  type: "SUBTOTAL",
			  price: "11.00",
			},
		      {
			  label: "Tax",
			  type: "TAX",
			  price: "1.00",
			},
		      {
			  label: "CGST",
			  type: "TAX",
			  price: "1.20",
			},
		      {
			  label: "SGST",
			  type: "TAX",
			  price: "1.25",
			}
		    ],
	    onPaymentDataChanged : function onPaymentDataChanged(intermediatePaymentData) {
	      return new Promise(function(resolve, reject) {
		 resolve({});
	      });
	    },
	    billingAddressRequired : true,
	    billingAddressParameters : { "format": "MIN", phoneNumberRequired : true },
	    onPaymentAuthorized: function onPaymentAuthorized(paymentData) {
		  return new Promise(function(resolve, reject){
		    resolve(
			{  transactionState: 'SUCCESS'  }
		    );
		  });
		},
	},
	checkout : {
	    amount : "0.01"
	},
	createCheckout: function(json) {
	    // (JSON.parse(JSON.stringify(json))).brand - Would be 'GOOGLEPAY'.
	    return $.post(host + "/v1/checkouts", {
		"authentication.entityId":"8a8294174d0a8edd014d242337942575",
		"authentication.password":"sy6KJsT8",
		"authentication.userId":"8a8294174b7ecb28014b9699220015cc",
		"amount": "12.05",
		"currency": "EUR",
		"paymentType": "PA",
		"testMode":"EXTERNAL"
	    }).then(function(response) {
		return response.id;
	    });
	}
    };

For further options on how to integrate Google Pay, please have a look at our detailed Google Pay page.

PayPal Continue

Display the PayPal Button first 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 with a few extra parameters :

wpwlOptions.createCheckout = function(json) {
	// (JSON.parse(JSON.stringify(json))).brand - Would be 'PAYPAL_CONTINUE'.
	// 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;
    });
};