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 entryPoint fill:#EEECEA,stroke:#5F5E5A,stroke-width:0.5px,color:#2C2C2A
classDef apiCall fill:#D6E8F9,stroke:#185FA5,stroke-width:0.5px,color:#042C53
classDef iframe fill:#E2E0FB,stroke:#534AB7,stroke-width:0.5px,color:#26215C
class SinglePayment,OneClickCheckout,RecurringISM entryPoint
class CreateCheckoutSP,CreateCheckoutOC1,CreateCheckoutOC2,CreateCheckoutISM,CheckStatusSP,CheckStatusOC1,CheckStatusOC2,CheckStatusISM1,CheckStatusISM2,GetRepeatedISM apiCall
class DisplayIframeSP,DisplayIframeOC1,DisplayIframeOC2,DisplayIframeISM iframe

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.