Introduction

You might want to display the payment button early in the payment workflow. You need to render the buttons, but you don't have a chechkout ID created yet. Usually, the customer 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.

• Use paymentWidgets.js without a checkout ID:
  HTML

     <script src="https://sandbox-card.peachpayments.com/v1/paymentWidgets.js"></script>

• Define a callback function in wpwlOptions.createCheckout to create a checkout.
• The payment button triggers the callback function. It receives one parameter (a JSON object) containing information about the brand the customer uses (for example, {brand: 'GOOGLEPAY'} when the customer selects Google Pay). The function returns a checkout ID or a promise that resolves to a checkout ID. The returned object can be any thenable object, including both JavaScript Promise and jQuery Promise.

Example:

wpwlOptions.createCheckout = function(json) {
    // (JSON.parse(JSON.stringify(json))).brand returns a string representing the brand used by the shopper.
    // Call your server to create a checkout
    return $.post("https://merchant.server/checkout-endpoint")
    .then(function(response) {
        // Assume your server returns a response containing checkoutId
        return response.checkoutId;
    });
};

Validate integrity with SRI

As required by PCI 4.0, validate the integrity of any script loaded on payment parent pages.

Subresource Integrity (SRI) is a security feature that enables browsers to verify and ensure fetched resources remain unchanged. It works by providing a cryptographic hash that a resource must match. The browser performs this validation before loading the resource. If the hash does not match the calculated result, the browser blocks and does not load the resource.

To use SRI for COPYandPAY Fast Checkout follow the steps:

• Retrieve the cryptographic hash by making a GET request to the dedicated endpoint:

  Request:

  cURL

  GET https://eu-test.oppwa.com/v1/fastcheckout/integrity

  Response:

  JSON

  {
    "integrity": "sha384-1z/aRrLjMiM9uquIxzoYT9t6ddgDWrnl3Na9s5KKheuYt15YqZBX7LuLP6TL7PCP"
  }

• Use the integrity value to render the widget:

  HTML

  <script
      src="https://eu-test.oppwa.com/v1/paymentWidgets.js"
      integrity="sha384-1z/aRrLjMiM9uquIxzoYT9t6ddgDWrnl3Na9s5KKheuYt15YqZBX7LuLP6TL7PCP"
      crossorigin="anonymous">
  </script>

Brands supporting fast checkout option

• Apple Pay
• Google Pay
• PayPal

Apple Pay

Apple Pay serves as a checkout option on both payment and cart pages (fast checkout). After configuring your environment, load the Apple Pay button via the COPYandPAY payment widget by specifying APPLEPAY as a brand in step 2. When the consumer uses the Apple Pay button, the Apple Pay payment sheet appears on their device.

As the consumer interacts with the Apple Pay payment sheet, multiple events trigger. Use the COPYandPAY API callback functions to handle these events. The COPYandPAY API wraps all callback functions offered by the Apple Pay SDK, eliminating the need for direct interaction with the Apple Pay SDK.

To steer or update data on the Apple Pay payment sheet after consumer interaction begins, multiple options are available.

The cart page

Displaying the Apple Pay button in the payment workflow, before obtaining a checkout ID, allows the customer to choose between proceeding with the standard checkout or, paying straight away with Apple Pay.

To display the Apple Pay button first and create a checkout ID later, follow these steps in step 2:

• Use paymentWidgets.js without a checkout ID:
  HTML

  <script src="https://sandbox-card.peachpayments.com/v1/paymentWidgets.js"></script>

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

When the consumer clicks the Apple Pay button, the callback function runs. It must return a checkout ID or a promise that resolves to a checkout ID. The function supports both JavaScript Promise and jQuery Promise.

Example:

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

Use the callback function to confirm that all prerequisites (for example, acceptance of terms and conditions) exist before initiating the payment. If conditions do not meet the requirements, return false to prevent Apple Pay from starting.

Because the checkout amount and currency are initially unknown, manually set the Apple Pay parameters total.amount and currencyCode. Refer to the Apple Pay options for further configurations.

Google pay

Google Pay serves as a checkout option on both payment and cart pages (fast checkout). Load the Google Pay button via the COPYandPAY payment widget by specifying GOOGLEPAY as a brand in step 2. When the consumer uses the Google Pay button, the Google Pay payment sheet appears on their device.

As the consumer interacts with the Google Pay payment sheet, multiple events trigger. Use the COPYandPAY API callback functions to handle these events. The COPYandPAY API wraps all callback functions offered by Google Pay, eliminating the need for direct interaction with Google Pay.

• Use paymentWidgets.js without a checkout ID:
  HTML

  <script src="https://sandbox-card.peachpayments.com/v1/paymentWidgets.js"></script>

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

Click the Google Pay button to run the callback function. The function receives one parameter (a JSON object) containing information about the brand used by the customer (GOOGLEPAY in this case). The function must return a checkout ID or a promise that provides a checkout ID. The returned object can be any thenable object. Both JavaScript Promise and jQuery Promise support this functionality.

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;
    });
  }
};

The cart page

Displaying the Google Pay button in the payment workflow, before obtaining a checkout ID, allows the customer to choose between proceeding with the standard checkout or, paying straight away with Google Pay.

To display the Google Pay button first and create a checkout ID later, follow these steps in step 2:

• Use paymentWidgets.js without a checkout ID:
  HTML

  <script src="https://sandbox-card.peachpayments.com/v1/paymentWidgets.js"></script>

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

When the consumer clicks the Google Pay button, the callback function runs. It must return a checkout ID or a promise that resolves to a checkout ID. The function supports both JavaScript Promise and jQuery Promise.

Example:

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

Change Google Pay behaviour using wpwlOptions.googlePay. Find the full reference for all available options on the Google Pay page.

Since the checkout amount and currency are initially unknown, manually set the Google Pay parameters amount and currencyCode.

PayPal

PayPal with inline flow launches the PayPal checkout experience in a pop-up window without a full-page redirect. This keeps the customer on the merchant's checkout page until they complete the checkout process.

The two ways to use this checkout method are:

• Standard checkout on a payment page.
• Fast checkout on the cart page.

The payment page

Load the PayPal button via the COPYandPAY payment widget by specifying PAYPAL or PAYPAL_CONTINUE as a brand in step 2. Also, set the inline flow in wpwlOptions as follows:

• For the PAYPAL brand:
  JavaScript

  inlineFlow: ["PAYPAL"]

• For the PAYPAL_CONTINUE brand:
  JavaScript

  inlineFlow: ["PAYPAL_CONTINUE"]

Example:

<form action="https://developer.peachpayments.com/docs/oppwa-integrations-copyandpay" class="paymentWidgets" data-brands="PAYPAL_CONTINUE"></form>

body {background-color:#f6f6f5;}

var wpwlOptions = {
  inlineFlow : ["PAYPAL_CONTINUE"]
}

During the normal checkout process, populate wpwlOptions.paypal to customise PayPal behaviour.

The intent parameter is conditional and specifies the PayPal order intent. When the checkout request includes overridePaymentType[PAYPAL], merchants can set the transaction intent with more flexibility. This intent determines whether the system captures funds straight away after checkout or authorises them for later capture. If not set, it defaults to authorize. Supported values include authorize and capture.

The cart page

Displaying the PayPal button in the payment workflow, before obtaining a checkout ID, allows the customer to choose between proceeding with the standard checkout or, paying straight away with PayPal.

To display the PayPal button first and create a checkout ID later, follow these steps in step 2:

• Use paymentWidgets.js without a checkout ID:
  HTML

  <script src="https://sandbox-card.peachpayments.com/v1/paymentWidgets.js"></script>

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

When the customer clicks the PayPal button, the callback function runs. It receives one parameter (a JSON object) containing the brand name used by the customer (PAYPAL in this case). The function returns a checkout ID or a promise that resolves to a checkout ID. Any thenable object works, including both JavaScript Promise and jQuery Promise.

Example:

wpwlOptions.createCheckout = function(json) {
  // (JSON.parse(JSON.stringify(json))).brand is 'PAYPAL_CONTINUE'.
  return $.post("https://merchant.server/checkout-endpoint", {
    "amount": "2.00",
    "currency": "EUR"
  }).then(function(response) {
    return response.checkoutId;
  });
};

PayPal fast checkout options

To use fast checkout, populate wpwlOptions.paypal.