Framepay express methods

What are express methods?

Manual entrance of payment data like billing or delivery address could be a tiresome task for clients. To help clients with this task express methods were created. Thanks to them, transaction data is filled for the client in an automated fashion.

Express methods and FramePay

Importantly, if you want your transaction from express methods to be processed by the Payments AI gateway you need to add chosen express methods to the FramePay. Below you could check configuration options for Apple Pay, Google Pay^TM, and PayPal.

Prerequisites

To successfully add express methods please have in the mind the following stipulations:

to show PayPal in FramePay you must also connect PayPal in Payments AI gateway section
importantly, for PayPal currencies available in this gateway and default gateway (Payments AI) must be aligned
to show in FramePay ApplePay and Google Pay^TM you must first obtain from a method of interest Merchant ID and verify your domain
for ApplePay you must also host a domain verification file

Supported Gateways

Digital wallets are supported on the following payment gateways:

Stripe
PayPal
NMI
Payments AI (Native Payments AI gateway)
TestProcessor (sandbox environment only)

Note: Ensure your gateway account supports the payment card payment method and digital wallets before proceeding with configuration.

Verifying Available Payment Methods

You can verify which payment methods and digital wallets are available for your organization using the Ready to Pay API endpoint:

GET /v1/organizations/{organizationId}/ready-to-pay

This endpoint returns all available payment methods, including:

Supported card brands (Visa, MasterCard, American Express, etc.)
Available digital wallets (Apple Pay, Google Pay, PayPal if enabled)
Payment method configurations

Use this endpoint to verify that your digital wallet connections are properly configured and available for use in FramePay.

Basic HTML FramePay skeleton

<html>
  <head>
    <link href="https://framepay.payments.ai/framepay.css" rel="stylesheet" />
    <script src="https://framepay.payments.ai/framepay.js"></script>
  </head>
  <body>
    <form id="payment-form">
      <input id="first-name" placeholder="First Name" />
      <input id="last-name" placeholder="Last Name" />
      <div id="mounting-point"></div>
      <p>below mounting point</p>
    </form>
    <button id="submit-button">Submit</button>
    <script src="index.js"></script>
  </body>
</html>

Basic index.js script

const publishableKey = '';

Framepay.initialize({
  organizationId: '',
  websiteId: '',
  publishableKey: `${publishableKey}`,
  transactionData: {
    currency: 'USD',
    amount: 1,
    label: 'Demo purchase label',
  },
});
Framepay.on('ready', function () {
  console.log('framepay ready');

  const card = Framepay.card.mount('#mounting-point');
});
Framepay.on('token-ready', function (token, extraData) {
  console.log('token-ready:', token);
});
Framepay.on('error', function (error) {
  console.error('error:', error);
});

const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', async function () {
  try {
    const form = document.getElementById('payment-form');
    const firstName = document.getElementById('first-name').value;
    const lastName = document.getElementById('last-name').value;
    const paymentToken = await Framepay.createToken(form, {
      billingAddress: { firstName, lastName },
    });
    console.log('paymentToken: ', paymentToken);
  } catch (error) {
    console.log('Create token error:', error);
  }
});

Adding express methods

Now, as you have the basic skeleton and script you can expand it to include also express methods like: Apple Pay, Google Pay^TM and PayPal.

Adding: Apple Pay

This process describes how to set up Apple Pay for use in embedded payment forms.

Create an embedded payment form. For more information, see Client-Side Integration.
Configure Apple Pay for your environment:

For Sandbox Environment:
- Register your domain in Rebilly
  
  This process describes how to register your domain or check if it is already registered to use Apple Pay. When the domain is registered, you can use Apple Pay in embedded payment forms.
  1. Log in or sign up to Rebilly
  2. In the left navigation bar, press Settings
  3. In the Configuration section, press Gateway accounts
  4. In the list of gateways, select a gateway account with Apple Pay
  5. Press Add Apple Pay domain
  6. Add a domain and press Save
  Note: For testing in sandbox, you'll need to create an Apple sandbox tester account and add a test card to your wallet. Testing must be done in Safari on an Apple device.
For Live Environment:
- Host the domain verification file on your domain
  
  Important: You must host the domain verification file on your server BEFORE registering your domain in Rebilly. The domain checker will verify the file when you register the domain in Rebilly, and registration will fail if the file is not present.
  - The file must be accessible at: https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
  - If you're using Payments AI custom domains, this file is already present
  - Upload this file to your server before proceeding to the next step
- Register your domain in Rebilly
  
  This process describes how to register your domain or check if it is already registered to use Apple Pay. When the domain is registered, you can use Apple Pay in embedded payment forms.
  1. Log in or sign up to Rebilly
  2. In the left navigation bar, press Settings
  3. In the Configuration section, press Gateway accounts
  4. In the list of gateways, select a gateway account with Apple Pay
  5. Press Add Apple Pay domain
  6. Add a domain and press Save
  7. The domain checker will verify the file is accessible at the expected path
  Note: The domain verification file must be hosted and accessible on your merchant application before registering the domain in Rebilly, otherwise the registration will fail.
Add Apple Pay to Your FramePay Component

Add the following to your form:
```
<div id="apple-pay-mount"></div>
```
And then, in the script ready event listener:
```
Framepay.applePay.mount('#apple-pay-mount');
```

Adding: Google Pay^TM

Important: Google Pay is configured automatically by Payments AI. You don't need to manually configure it in your gateway account.

Add Google Pay to Your FramePay Component

Add the following to your form:

<div id="google-pay-mount"></div>

And then, in the script ready event listener:

Framepay.googlePay.mount('#google-pay-mount');

Adding: PayPal

Important: Before you can use PayPal in your FramePay integration, you must connect PayPal as a payment gateway. Ensure that:

PayPal is enabled in your gateway accounts
The currencies available in the PayPal gateway match the currencies in your default gateway (Payments AI)

Add PayPal to Your FramePay Component

Add the following to your form:

<div id="pay-pal-mount"></div>

And then, in the script ready event listener:

Framepay.paypal.mount('#pay-pal-mount');

Apple Pay Styling

Here you could check the official documentation related to Apple Pay configuration. Use the following parameters to configure the Apple Pay express options:

applePay: {
	buttonColor: ‘white-outline’,
	buttonType: ‘buy’,
	buttonLanguage: ‘en-US’
}

Google Pay^TM Styling

There are strict brand guidelines on how you can configure the Google Pay^TM button. You can check them here. FramePay enables you to change the following parameters:

googlePay: {
	buttonColor: ‘black’,
	buttonType: ‘buy’
	buttonHeight: ‘50px’,
	shippingAddressRequired: true
}

PayPal Styling

Before you start to work on PayPal button style check the official guidelines. The following parameters can be used to configure the PayPal express method in FramePay:

paypal: {
	buttonColor: ‘gold’,
	buttonShape: ‘pill’,
	buttonHeight: 50,
}

Testing Digital Wallets

Testing Apple Pay

Sandbox Environment:

Create an Apple sandbox tester account and add a test card to your wallet
Open your embedded payment form in Safari on an Apple device (required for testing)
Click the Apple Pay button
Follow the on-screen instructions to complete the payment
Verify the transaction in your Payments AI dashboard

Live Environment:

Use a live payment card added to your Apple Wallet
Open your embedded payment form in Safari on an Apple device
Click the Apple Pay button
Complete the payment flow
Verify the transaction in your Payments AI dashboard

Note: Apple Pay testing requires Safari on an Apple device. It will not work in other browsers or on non-Apple devices.

Testing Google Pay

Open your embedded payment form in any browser
Click the Google Pay button
Follow the on-screen instructions to complete the payment
For test payments, use test cards from the Google Pay test card suite
Verify the transaction in your Payments AI dashboard

Testing PayPal

Open your embedded payment form in any browser
Click the PayPal button
Follow the PayPal checkout flow
Use PayPal sandbox test accounts for testing in development
Verify the transaction in your Payments AI dashboard

What are express methods?​

Express methods and FramePay​

Prerequisites​

Supported Gateways​

Verifying Available Payment Methods​

Basic HTML FramePay skeleton​

Basic index.js script​

Adding express methods​

Adding: Apple Pay​

Adding: Google PayTM​

Add Google Pay to Your FramePay Component​

Adding: PayPal​

Add PayPal to Your FramePay Component​

Apple Pay Styling​

Google PayTM Styling​

PayPal Styling​

Testing Digital Wallets​

Testing Apple Pay​

Testing Google Pay​

Testing PayPal​