Hosted Fields - iFrame (PayPal Payment)

What Does the Iframe Do?

This iframe allows merchants to place the PayPal payment buttons on their website, and accept payments through PayPal without having to redirect their customers to the PayArc's Hosted Checkout page.

By seamlessly integrating with the merchant’s payment flow, the iframe generates a token that can be used for transaction processing without storing sensitive information on the merchant's servers. This improves security, simplifies compliance, and provides a seamless experience for customers.

Business Description

PayArc provides a token that can be used later to justify a financial movement. The token is obtained by providing mechant's "Client ID" and amount of payment. To blend into the merchant’s site and maintain the look and feel of the merchant’s portal, PayArc provides access to iframes that must be embedded in the site.

Technical Integration

Head to https://testportal.payarc.net/demo/iframe/ for an integration playground.

Enter your PAYARC_API_KEY (constant is defined below) in the top right corner and the demo will be presented.

Overview

Call GET @ https://testportal.payarc.net/v1/get-iframe?user=k3EDYzYPEk3zLwPj&amount=41.98
- Replace the user value with the PAYARC_API_KEY specified below
- Replace the amount value with the amount of your order/payment you want to recieve.
In the API listed above as response body you will recieve Iframe with the key "paypal-button-container".
- Include that Iframe in the place where you want to see the PayPal buttons on your end.
- In the playground provided this happens in the empty <div id="paypal-button-container"></div>
Define the callback for PayArc’s interaction. The Iframe sends vanilla JS messages to the parent page with types: "paypal-onApprove" and "paypal-onError". These are handled in the demo by a simple console.log()

(example of handling callbacks in the parent page)

window.addEventListener('message', (e) => {
  const { type, data, error } = e.data;
  
  if (type === 'paypal-onApprove') {
    console.log('Transaction approved:', data);
    // Custom logic for onApprove
  }
  if (type === 'paypal-onError') {
    console.error('Transaction error:', error);
    // Custom logic for onError
  }
)

Manage the look and feel by updating styles provided by PayArc.

Constants

The following JavaScript constants must be set:

PAYARC_API_KEY: The merchant’s specific ID obtained from the Merchant's dashboard API section.

Error Codes

200: Success
403: Wrong Client ID (Forbidden).
422: Data validation error (Empty fields, wrong CVV, wrong expiry date).
408: User session expired.
419: User session expired.
409: Wrong response from Payment Gateway (e.g., wrong card number).

Questions and Answers

Q: Can I hide the labels of input fields?
A: Yes, use display: none; in the .payarc-label style.

Q: What is payarcInitiatePaymentObject?
A: It's an internal object to accept the values entered by the customer.