PayFrame

PayFrame, our embedded payment form, is the simplest and safest way to process payments. It allows you to securely collect your customer's information and process the payment without having to save sensitive data to your servers.

You can embed PayFrame by following these simple steps.

Adding the Scripts

To get started, you must add the following scripts to your checkout page.

<!-- Include latest stable release of jQuery -->

<script type="text/javascript" src="https://api.payrix.com/payFrameScript"></script>

<script>
  PayFrame.config.apiKey = "b57d7185174957f97b1a4b66350d845b";
  PayFrame.config.merchant = "p1_mer_5a285faf1b79148f3500b9e";
  PayFrame.config.amount = 500;
</script>

Be sure to set the PayFrame.config.apiKey to your public API key, the PayFrame.config.merchant to your Merchant ID, and the PayFrame.config.amount to the amount you want to charge the customer (in cents).

Calling PayFrame

Having added the scripts to your checkout page, you now have to call PayFrame. This can be done by either using the PayFrame button or manually popping-up PayFrame.

To use the PayFrame button, add the following to the script above.

  PayFrame.config.button = {
    parent: "parent-pay",
    value: "Pay",
    class: "my-pay"
  };

Now be sure to tag the parent element that you want calling PayFrame with the parent-pay ID. This will insert a button in the parent element which will call PayFrame.

To manually pop-up PayFrame, simply call PayFrame.popup().

Customize PayFrame

The default color for PayFrame is #86C6D0. You can change the color by adding the following to the script above.

 PayFrame.config.color = "86C6D0";

You can add the merchant's name, description, or logo to PayFrame, by adding the following to the script above.

  PayFrame.config.name = "Demo Name";
  PayFrame.config.description = "This is a Demo";
  PayFrame.config.image = "http://example.com/images/square_logo.jpg";

PayFrame.config.color

By default, PayFrame will prompt the customer to add their billing address. You can provide this yourself, by adding the following to the script above.

  PayFrame.config.billingAddress = {
    address: "",
    city: "",
    state: "",
    zip: "",
    email: "",
    phone: ""
  };

PayFrame Callback Functions

You can setup the callback functions for PayFrame by adding the following to the script above.

  PayFrame.onSuccess = function (response) {
    // Process the responsePayFrame.config.billingAddress = {
  }
  PayFrame.onFailure = function (response) {
    // Process the response
  }
  PayFrame.onFinish = function (response) {
    // Process the response
  }

onSuccess will execute only if the payment was successful. onFailure will execute only if the payment failed. onFinish will execute whether the payment was successful or not.