Payment Page using IFrame - Nuvei Documentation

On this page:

Overview
Integration

Overview

This solution integrates the Apple Pay payment method button into Nuvei’s Payment Page solution. If the customer’s device supports Apple Pay, and Apple Pay is enabled on the backend, then the Apple Pay is displayed the payment methods gallery in an IFrame in its own page, for the customer to choose from. When Apple Pay is selected, the system handles the rest of payment flow automatically.

The integration involves inserting the sc_applepay.min.js script on top of your website, which acts as a proxy between the IFrame and your main website page.

Integration

Include the sc_applepay.min.js script on top level page of your website, before the Nuvei IFrame is initiated.

You can take the sc_applepay.min.js script from https://cdn.safecharge.com/safecharge_resources/v1/sc_applepay.min.js
The Nuvei IFrame must be included directly on your website and not nested in another IFrame.
Make sure to send the parent_url parameter to the IFrame as the domain name of the parent page.

This example shows the main page of a website that includes the sc_applepay.min.js script, and a /purchase request called from within an IFrame:

Example HTML Main Page with Library and IFrame

<head>
…
 <script src=
   "https://cdn.safecharge.com/safecharge_resources/v1/sc_applepay.min.js"></script>
</head>
<body>
…
 <div>
  <iframe name="sc_frame" src=
    "https://secure.safecharge.com/ppp/purchase.do..."></iframe>
 </div>
…
</body>

Congratulations! You have successfully completed the integration steps!

You can now test your Apple Pay implementation in the Apple Pay Sandbox environment using the test card details provided.
For details, see the Apple Pay Integration Testing topic.