Skip to main content

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 PayTM, 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 PayTM 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

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 (error) {
  console.error('token-ready:', error);
});
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 liek: Apple Pay, Google PayTM and PayPal.

Adding: Apple Pay​

To add Apple Pay to your FramePay component please add in the form the layer:

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

And then, in the script ready event listener:

Framepay.applePay.mount('#apple-pay-mount');

Adding: Google PayTM​

To add Google Pay to your FramePay component please add in the form the layer:

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

And then, in the script ready event listener:

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

Adding: PayPal​

To add Google Pay to your FramePay component please add in the form the layer:

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

And then, in the script ready event listener:

Framepay.applePay.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 PayTM Styling​

There are strict brand guidelines on how you can configure the Google PayTM 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,
}