Backend Flow (Card)

Through this flow, 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 now initialize OpenFabric SDK in their BillEase payment flow. OpenFabric SDK will present BillEase button for 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 the 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 initialize SDK below.

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 specific 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.