Skip to main content

Backend Flow (Card)

Merchants can get direct access to the secure, one-time use card that is approved for a transaction and process this directly with their PG.

This is ideal for merchants that can deal with card data directly (i.e. they are PCI-compliant).

Integration Steps​

1. Request access token (Server-side) as described earlier​

2. Initialize OpenFabric SDK (Client-side)​

Merchants will initialize OpenFabric SDK in their BillEase payment flow. This enables OpenFabric SDK to present BillEase button to their customers.

Once the customer clicks BillEase button, OpenFabric SDK will orchestrate the transaction approval with you. Post-transaction approval, OpenFabric will generate a secure, one-time use card that will be handed back to the merchant page.

2.1 Add dependency​

Merchant to include OpenFabric Merchant SDK js as a dependency to their payment application.

<script type="module" src="https://unpkg.com/@openfabric/[email protected]/dist/index.umd.min.js"></script>

2.2 Add a placeholder for BillEase's button​

Merchant to define where they want OpenFabric's SDK to present BillEase button on their payment page.

<div id="bnpl-button"></div>

2.3 Initialize SDK​

Merchant will now initialize the OpenFabric SDK.

Initializing OpenFabric SDK for Backend Flow (Card) will require:

  • Access token (generated in step 1)
  • Order details (purchase context, customer billing/shipping info, etc.)
  • Callback URLs (success and failure URLs, etc.)

Sample of initializing SDK:

const { OpenFabric } = OpenFabricMerchantSDK;

const initializeOrder = () => {
    // Get order details
}

// Pass order related information to SDK. 
const {
  shipping_address,
  billing_address,
  customer_info,
  item
} = initializeOrder();

// Card token handler
const cardHandler = (card_fetch_token: string) => {
  // Pass received card_fetch_token to your endpoint described below (Step 3.2)
};

// Initialize OpenFabric SDK with all configurations
const openFabric = OpenFabric(ACCESS_TOKEN, // access token from backend
    "https://example-shop.ph/of/result", // optional callback url for a successful transaction
    "https://example-shop.ph/of/cancel", // optional callback url for a cancelled transaction
  )
  .setDebug(true) // log diagnostic messages during integration
  .setEnvironment(Environment.sandbox) // dev, sandbox, production
  .setPaymentMethods(["billease"]);

// Payment context and order information
openFabric.createOrder(
  {
    customer_info,
    amount: 2300,
    currency: "PHP",
    merchant_reference_id,
    transaction_details: {
      shipping_address,
      billing_address,
      items: [item],
      tax_amount_percent: 10,
      shipping_amount: 10,
      original_amount: 130
    }
  }
)
// Button presentment and redirect handling instructions
openFabric.renderButton("bnpl-button"); // id of the placeholder div where openfabric button gets rendered
// Final call to apply all the settings above
openFabric.initialize();

Once OpenFabric SDK is initialized, the SDK will now present BillEase's button in the section that was configured.

When a customer clicks on it, OpenFabric SDK will redirect to BillEase's payment flow.

3. Fetch and process card with PG (Server-side)​

When BillEase successfully approves a transaction, OpenFabric SDK will generate a secure, one-time use card that is unique for this transaction. A token that identifies this card is sent back to the merchant.

3.1 Generate a Card Fetch access token​

Same way we request for access token to create transaction but the scope is resources/cards.read

3.2 Fetch card details with Card Fetch access token​

http POST https://issuer.sandbox.openfabric.co/i/fetchCard \
    "Authorization: Bearer <access_token from 3.1>" \
    card_fetch_token=<txn_card_token in the URL>

Note: URL would be https://issuer.openfabric.co/i/fetchCard for production.