Integrate using the iframe checkout

The CardCorp iframe checkout is a SAQ-A-compliant payment-form solution that is both secure and simple to integrate. This type of integration with the payment gateway is called COPYandPAY.

To integrate, you create a checkout ID and use it to display the payment widget on your website. The customer enters their sensitive card data directly into the payment widget in their browser. And the payment widget sends the card data directly to the CardCorp payment gateway.

You will need a page on your site where the customer will be redirected after the payment is approved.

Before you begin

The gateway has test and live environments with different base URLs.

TEST - https://eu-test.oppwa.com/v1/
LIVE - https://eu-prod.oppwa.com/v1/

You can make API requests to the endpoints of these environments by adding the resource paths, such as checkouts or checkouts/{id}/paymentsto the end of the base URL.

Get your CardCorp gateway authentication credentials from our technical support team.

You will have one set of credentials for the test environment and another for the live environment.

Each set of API credentials has one entity ID (also called the channelID) and one API authorisation token.

📘
API credentials
Remember to use the appropriate API endpoint and credentials for test and live environments and different channels, because this is a common cause of errors!

Test cards

When you are testing your integration, use the gateway test cards.

See Gateway testing guide.

Do not use live card data in the test environment.

Basic steps to collect a payment

The first steps to use the COPYandPAY integration are always as follows.

Create the checkout in the gateway using the attributes for your payment flow
Create the payment form on your website using the checkoutId from the gateway
Get the payment status

With these steps, you can accept a single payment. See Single payment checkout.

PCI DSS 4.x

Your website payment pages must comply with PCI DSS v4.x, which is designed to stop attackers from obtaining cardholder data when you are processing it in your e-commerce system.

For the checkout iframe, you can meet these requirements in several ways:

Traditional means:
1. Implement a Content Security Policy (CSP) for the iframe checkout integration on your website.
  1. For basic information about CSPs, see Mozilla CSP docs
  2. For an example of a basic CSP, see the gateway CSP example.
    1. ❗️Warning: By default, this CSP blocks all other third-party scripts, which may cause your website to stop functioning. Please get advice from your System Administrator about the most appropriate CSP for your website.
    2. This CSP is for the production environment only. For the test environment, see CSP for gateway test environment.
2. Use a hash for Sub-resource Integrity (SRI). This is included in the CardCorp documentation for each iframe payment flow, as linked below.
3. Use change detection scans and notifications.
Configure monitoring within your content delivery networks (CDNs).
Contract a third-party solution to manage JavaScript security.

For full details of PCI DSS 4.x, see the gateway documentation and PCI documentation.

Payment flows

After you have accepted a single payment, you can prepare to use other payment flows.

Each payment flow will require different attributes when you create the checkout and take repeated payments.

%%title: iframe checkout payment flows
flowchart TB
    SinglePayment["Single payment"]
    CreateCheckoutSP["Create checkout"]
    DisplayIframeSP["Display payment
    iframe"]
    CheckStatusSP["Check payment
    status"]
    
    OneClickCheckout["One-click checkout"]
    CreateCheckoutOC1["Create checkout"]
    DisplayIframeOC1["Display payment
    iframe"]
    CheckStatusOC1["Check payment
    status"]
    CreateCheckoutOC2["Create checkout"]
    DisplayIframeOC2["Display payment
    iframe"]
    CheckStatusOC2["Check payment
    status"]
    
    RecurringISM["Instalment,
    subscription,
    and metered"]
    CreateCheckoutISM["Create checkout"]
    DisplayIframeISM["Display payment
    iframe"]
    CheckStatusISM1["Check payment
    status"]
    GetRepeatedISM["Get recurring
    payment via API"]
    CheckStatusISM2["Check payment
    status"]
    
		SinglePayment --> CreateCheckoutSP
		CreateCheckoutSP --> DisplayIframeSP
		DisplayIframeSP -->  CheckStatusSP
    
		OneClickCheckout -->  CreateCheckoutOC1
		CreateCheckoutOC1 --> DisplayIframeOC1
		DisplayIframeOC1 --> CheckStatusOC1
		CheckStatusOC1 --> CreateCheckoutOC2
		CreateCheckoutOC2 --> DisplayIframeOC2
		DisplayIframeOC2 --> CheckStatusOC2

		RecurringISM --> CreateCheckoutISM
		CreateCheckoutISM --> DisplayIframeISM
		DisplayIframeISM --> CheckStatusISM1
		CheckStatusISM1 --> GetRepeatedISM
		GetRepeatedISM --> CheckStatusISM2
    
classDef yellow fill:Ivory,stroke:#333,stroke-width:0.5px
classDef green fill:HoneyDew,stroke:#333,stroke-width:0.5px
classDef orange fill:NavajoWhite,stroke:#333,stroke-width:0.5px
classDef lilac fill:GhostWhite,stroke:#333,stroke-width:0.5px
classDef pink fill:Pink,stroke:#333,stroke-width:0.5px
classDef blue fill:#cfefff,stroke:#333,stroke-width:0.5px
classDef white fill:white,stroke:#333,stroke-width:0.5px
linkStyle default stroke:#333,stroke-width:0.5px,color:#333

class SinglePayment white
class CreateCheckoutSP lilac
class DisplayIframeSP lilac
class CheckStatusSP lilac

class OneClickCheckout white
class CreateCheckoutOC1 lilac
class DisplayIframeOC1 lilac
class CheckStatusOC1 lilac
class CreateCheckoutOC2 lilac
class DisplayIframeOC2 lilac
class CheckStatusOC2 lilac

class RecurringISM white
class CreateCheckoutISM lilac
class DisplayIframeISM lilac
class CheckStatusISM1 lilac
class GetRepeatedISM lilac
class CheckStatusISM2 lilac

See the documentation for each payment flow on the following pages.

Testing the payment flows

The payment flow pages above provide example requests and parameters in cURL format, but you can also use the comprehensive gateway playground, which has code samples in all major programming languages.

You can find the gateway playground at the Gateway Integration Guide, and we have formatted the example data for each request in the request pages for each payment type.

Questions? Visit our website to chat to our payment experts and learn more about integrating our iFrame checkout.