COPYandPAY Fast Checkout

COPY+PAY 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.vr-pay-ecommerce.de/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;
    });
};

Validate integrity with SRI

As required by PCI 4.0, it is necessary to validate the integrity of any script loaded on the payment parent pages. To know more read our PCI DSS Guide.

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch are delivered without unexpected manipulation. It works by providing a cryptographic hash that a resource must match. This validation is performed by the browser before loading the resource. If the result calculated by the browser does not match the hash provided, the resource is blocked and not loaded.

To implement SRI for COPY+PAY Fast Checkout follow the steps:

  • Retrieve the cryptographic hash by making a GET request to the dedicated endpoint https://eu-test.oppwa.com/v1/fastcheckout/integrity and save the value returned in the integrity parameter in the response. For example:

    Request: 
    GET https://eu-test.oppwa.com/v1/fastcheckout/integrity
    Response: 
    {
     "integrity":"sha384-1z/aRrLjMiM9uquIxzoYT9t6ddgDWrnl3Na9s5KKheuYt15YqZBX7LuLP6TL7PCP"
}
  • Use the integrity value to render the widget as follows: 
    <script
    src="https://eu-test.oppwa.com/v1/paymentWidgets.js"
    integrity="sha384-1z/aRrLjMiM9uquIxzoYT9t6ddgDWrnl3Na9s5KKheuYt15YqZBX7LuLP6TL7PCP"
    crossorigin="anonymous">
</script>

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.vr-pay-ecommerce.de/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.vr-pay-ecommerce.de/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.vr-pay-ecommerce.de/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.vr-pay-ecommerce.de/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.