COPYandPAY Fast Checkout

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.onlinepayments.pt/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 will receive one parameter (a JSON object) that contains information on the name of the brand used by the shopper (E.g.: {brand: 'GOOGLEPAY'}, when GooglePay was used by the shopper) and 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) {
    // (JSON.parse(JSON.stringify(json))).brand - gives a string representation of the brand used by the shopper.
    // Call your server to create a checkout
    return $.post("https://merchant.server/checkout-endpoint")
    .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.onlinepayments.pt/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 will receive one parameter (a JSON object) that contains information on the name of the brand used by the shopper ('APPLEPAY' in this case). 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) {
    // (JSON.parse(JSON.stringify(json))).brand - Would be 'APPLEPAY'.
    return $.post("https://merchant.server/checkout-endpoint")
    .then(function(response) {
        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.onlinepayments.pt/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 will receive one parameter (a JSON object) that contains information on the name of the brand used by the shopper ('GOOGLEPAY' in this case). 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("https://merchant.server/checkout-endpoint", {
		"amount": "12.05",
		"currency": "EUR",
	    }).then(function(response) {
		return response.checkoutId;
	    });
	}
    };

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

Amazon Pay

Display the Amazon Pay Button first and create a checkout ID later. In step 2:

  • Use paymentWidgets.js without a checkout ID 
    <script src="https://test.onlinepayments.pt/v1/paymentWidgets.js"></script>
  • Define a callback function in wpwlOptions.createCheckout to create a checkout

We will call the callback function once the Amazon Pay button is clicked. The function will receive one parameter (a JSON object) that contains information on the name of the brand used by the shopper ('AMAZONPAY' in this case). 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 :


var wpwlOptions = {
	inlineFlow : ["AMAZONPAY"],
	amazonpay:{
	    merchantId : "MerchantId",
	    ledgerCurrency : "USD",
	    sandbox: "true",
	    checkoutLanguage: "en_US",
	    productType: "PayAndShip",
	    placement: "Cart",
	    buttonColor: "Gold"
	},

	createCheckout: function(json) {
	    // (JSON.parse(JSON.stringify(json))).brand - Would be 'AMAZONPAY'.
	    return $.post("https://merchant.server/checkout-endpoint", {
		"amount": "2.53",
		"currency": "USD",
		"cart.items[0].name":"Battery Power Pack",
		"cart.items[0].price":"10.12",
		"cart.items[0].quantity":"1",
		"cart.items[0].tax":"0",
		"cart.items[0].totalAmount":"10.12",
		"cart.items[0].totalTaxAmount":"0",
		"customer.email":"john@doe.com",
		"customer.givenName":"John",
		"customer.surname":"Doe",
		"shipping.street1":"Ship Street 1",
		"shipping.street2":"Ship Street 2",
		"shipping.city":"Ship City",
		"shipping.state":"Ship State",
		"shipping.country":"US",
		"shipping.postcode":"30092",
		"shipping.customer.email":"ship@email.com",
		"shipping.givenName":"John",
		"shipping.surname":"Doe",
		"customer.ip":"127.0.0.1",
		"merchantTransactionId":"fastCheckOutMerchantTxId001",
		"merchantInvoiceId":"fastCheckOutMerchantInvId001"
	    }).then(function(response) {
		return response.checkoutId;
	    });
	}
    };

For further options on how to integrate AmazonPay Pay, please have a look at our detailed Amazon 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.onlinepayments.pt/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 (a JSON object) that contains information on the name of the brand used by the shopper ('PAYPAL_CONTINUE' in this case). 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'.
    return $.post("https://merchant.server/checkout-endpoint", {
        "amount":"2.00",
        "currency":"EUR",
    }).then(function(response) {
        return response.checkoutId;
    });
};

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