IFrame

Pay via iFrame

iFrame is a simple and flexible method for integrating PayOp with your website. Integrating an iFrame is as easy as pasting a URL link. To do this, you need to add a special json-code on any page that loads the payment form.

The benefit of using this integration compared to the payment page is that the integration is seamless and the customer never notice that the merchant website is left.

Create Payment

To create a payment, you should post some required data array to our API:

var data = { publicKey: "yourpublicKey", //required signature: "", //required, need generate https://payop.com/apidoc/#request-signature paymentMethod: "", //required order: { id: "12345", //required amount: 4.0000, //required currency: "USD" //required }, customer: { "email": "me@myemail.com", //required "phone": "", //required for some pay methods "name": "" //required for some pay methods } }

as result you get json in this format:

{ "data": { "message": "Payment created", "redirectUrl": "http://payop.com/en/payments/v1.1/payment/pay/32d040d4-941b-11e9-b2ec-0242ac130004" }, "errors": [] }

Embedding the iFrame

Received url you can embed on your site in iframe (for example).

Code example

Here is a small example of how you can embed payment link, This case is in pure javascript but you can use any programming language, all you need is POST request with some predefined params.

var data = { publicKey: "application-3", signature: "e77a8970c5cc068f83dddb28d0fe3d8aacb2fe379ee2c1fefa30f5b5b2cd582c", paymentMethod: "1747bfb0-8e92-11e9-bacd-6777df501eda", //payment method internal id order: { id: "OID-0001", amount: 25.9821, currency: "USD", }, customer: { "email": "me@myemail.com", "phone": "+374841842151", "name": "Ivanov Ivan", } } var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://payop.com/api/v1.1/payments/payment'); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.send(JSON.stringify(data)); xhr.onload = function () { if (xhr.status != 200) { console.log(xhr.status + ': ' + xhr.statusText); } else { var apiResponse = JSON.parse(xhr.responseText); var responseUrl = apiResponse.data.redirectUrl; document.getElementById("my-iframe-id").setAttribute("src",responseUrl); } }

PCI Compliance

iFrame based integration offers the easiest path to PCI Compliance. Since iFrame is as good as a separate browser window, your website is completely shielded away from getting any sensitive card information.