Skip to main content

SDK and APMs load - Single container

The following section describes how to integrate and use the Revup APM SDK. When using this API, remember that the following apply to every case:

Single container

  • The APM SDK is separate from the card payment SDK (Revup Form and Revup Frames). The APM SDK works the same way whether you're using Revup Form or Revup Frames for card payments.
  • The APM SDK must be instantiated independently. This SDK is independent of the card payment SDK, so the instantiation can be carried out separately.
<script
   type="text/javascript"
   charSet="utf-8"
   src="<Revup public apm sdk url>" />

Revup APM SDK:
https://hosted.revuppayments.com/sdk/app/form/3/0/loader.js

Test environment URL
https://test.hosted.revuppayments.com/sdk/app/form/3/0/loader.js

Configuration Object​

To create an instance, a configuration object must be provided through the class constructor that has a parameter. The following table describes the configuration object:

const config = {
    apiKey: <Misma api key que para el formulario>,
    merchantDomain: <Origin de la web desde donde se está cargando el SDK>,
    orderId: 'orderId',
    env: 'live'/'test'
};

APM Container Setup​

You must create a div with the following attributes to show the APMs:

<div 
  id="revup-apms-container"
  data-qa="apms-container">
</div>

You can put the div anywhere.

SDK Initialization​

The following code must be invoked:

const apmsSdk = new Apms(<Configuration Object>);
await apmsSdk.init(['all']);

apmsEnabled: This is the string array where you must send all the alternative payment methods you want to show in the form. If not, it will only show the card form. Revup will apply a later validation to ensure that only the payment methods that have the correct configuration are shown.

Possible values:

  • all: all the alternative payment methods available
  • apple_pay: Apple Pay
  • stripe_link: Stripe Link
  • paypal: PayPal
const apmsSdk = new Apms(<Configuration Object>);
await apmsSdk.init(['apple_pay']);

Events​

The Revup form will emit the responses through two events:

apmsSdk.onError(error => {
  // eslint-disable-next-line no-console
  console.error(error);
});

apmsSdk.onMessage(message => {
  // eslint-disable-next-line no-console
  console.log(message);
});

Message Examples​

{
  "transactionStatus": "success",
  "message": "The payment has been processed successfully",
  "transactionId": "ff625e76-36c0-4de6-a651-2943bf794af8"
}
{
  "transactionStatus": "failed",
  "error": {
    "code": 300,
    "message": "Insufficient funds"
  },
  "transactionId": "ff625e76-36c0-4de6-a651-2943bf794af8"
}

Error Example​

{
  "name": "NameError",
  "message": "Error message"
}
info

Please note that control of the Apple Pay button is delegated to the Apple SDK.

Payments with Stripe Link and PayPal are handled indirectly by returning a WAITING_USER_INTERACTION status and unlocking with a notification to a final status.

This status handling is similar to what is done with user-authenticated or 3D Secure card payments and the redirection will be to threeDSChallengeResult field URL.

An event is sent in the onMessage indicating this status and the transactionId.

{    
  "transactionStatus": "waiting_user_interaction",
  "message": "The payment is being processed",
  "transactionId": ""
}