CARD_PAYMENT

Fund transactions using credit and debit cards.

Specifications

Refer example: https://github.com/QuoineFinancial/qex-b2b-examples/blob/master/currency-swap/react-fiat-crypto/src/app/card-payment.tsx

Accept funding using Visa credit and debit cards card using funding method CARD_PAYMENT.

Setup Parameters

None

Input Parameters

Note that an iframe should be rendered for card tokenization which will submit this information.

Field	Type	Description	Required
transaction_key	CARD_TOKEN	Tokenized card details	true

Result Parameters

Field	Type	Description	Always Present
transaction_key	TRANSCATION_RECEIPT	Third party transaction number	true

Tokenization

Card details must be recorded via loading a minimally intrusive and unstyled iframe. Card details cannot be submitted via normal API.

<iframe 
  id="qex-card-capture"
  src="https://partners.liquid.com/api/v1/method/card/{settlement_instruction_id}" 
  />
<script>
    window.addEventListener('message', (event) => {
      const data: CustomPostMessage = event.data;
      if (data !== undefined && data !== null && data.event !== undefined) {
        switch (data.event) {
          case 'success':
            console.log('Tokenization Success', data.payload);
            break;
          case 'failure':
            console.log('Tokenization Failed', data.payload );
            break;
          case '3ds-frame':
            console.log('Must render 3DS iframe', data.payload)
            break
          case 'card-validation':
            console.log('Card validation updated', data.payload);
            break;
        }
      }
    }, false);
    const iframe = document.getElementById('qex-card-capture');
    const initializePostMessage = {
      event: "initialize"
    };
    iframe.contentWindow.postMessage(initializePostMessage, "*");
</script>

The initialize postMessage is essential to loading the iframe. It can contain a payload attribute which specifies some optional custom parameters for the input form.

const initializePostMessage = {
  event: "initialize",
  payload: {
    style: {
      base: {
        color: "#FFF",
        fontSize: "15px",
      },
      placeholder: {
        base: {
          color: "#aaaaaa",
        },
      },
    };
    localization: {
      card_number: 'Card Number' ,
      card_month: 'MM',
      card_year: 'YY',
      card_cvv: 'CVV'
    },
  },
};

See swagger documentation: https://partners.liquid.com/swagger/#/default/get_api_v1_method_card__settlement_instruction_id_

Submit

The host application must render a "submit" button and call a submit post message when the user clicks it. This post message can optionally contain a payload which holds cardHolder information. This information is not always required, however some card issuers will reject transactions where it is not present.

const cardholder = {
  name: userInfo.fullName,
  billingAddress: userInfo.billingAddress,
  phone: userInfo.phoneNumber,
};
const submitMessage: CustomPostMessage = {
  event: "submit",
  payload: { cardholder },
};
iframe.contentWindow.postMessage(submitMessage, "*");

3D Secure

Card issuers must support the 3D Secure standard. To process 3DS, a second iframe must be rendered.

The address of this iframe must be obtained from the previous iframe. See 3ds-iframe postMessage in the code above.

When the user completes the 3DS the new iframe will fire either the success or failure event.

Example Responses

GET https://partners.liquid.com/api/v1/transaction/70f7cd4c-bb6b-48eb-abe8-b92eac9e3db8

{
  "success": true,
  "environment": "PRODUCTION",
  "message": "Transaction created. Transaction is filled. Payout has been delivered.",
  "payload": {
    "transaction_id": "70f7cd4c-bb6b-48eb-abe8-b92eac9e3db8",
    "api_key": "ef6cf2a7-a6e8-48d1-8c8a-677187dfcd8f",
    "status": "FILLED",
    "funding_settlement": {
      "settlement_instruction_id": "fba2b4eb-7d17-453a-a69f-c5e991384091",
      "transaction_id": "70f7cd4c-bb6b-48eb-abe8-b92eac9e3db8",
      "currency": "AUD",
      "direction": "FUNDING",
      "method": "CARD_PAYMENT",
      "quantity": "100.00",
      "status": "COMPLETE",
      "expires": {
        "unix_ms": 1589254269593,
        "iso8601": "2020-05-12T03:31:09.593Z",
        "ttl_ms": 20000
      },
      "input_parameters": {
        "card_token": "tok_wiooyb6dhkquvikbxsvw2uymhy"        
      },
      "result_parameters": {
        "card_receipt": "act_3ycvlqyprmme3kh3l36blhu7om"
      },
      "_links": {
        "status": {
          "href": "https://partners.liquid.com/api/v1/settlement/status/fba2b4eb-7d17-453a-a69f-c5e991384091"
        }
      }
    },
    "payout_settlement": {
      "settlement_instruction_id": "e6560d70-2fa8-4e2a-b86b-3979694016ad",
      "transaction_id": "70f7cd4c-bb6b-48eb-abe8-b92eac9e3db8",
      "currency": "USDC",
      "direction": "PAYOUT",
      "method": "BLOCKCHAIN_TRANSFER",
      "quantity": "60.640",
      "status": "COMPLETE",
      "expires": {
        "unix_ms": 1589254253947,
        "iso8601": "2020-05-12T03:30:53.947Z",
        "ttl_ms": 20000
      },
      "input_parameters": {
        "wallet_adress": "0xC5b83d3C0f48807AF09ee5Bd1c95Ee870878f36B"
      },
      "result_parameters": {
        "wallet_address": "0xC5b83d3C0f48807AF09ee5Bd1c95Ee870878f36B",
        "transaction_hash": "0x8698693ddaec3cad825c0c42e326105e3e14f70ebbcd425c3a8b577570168335"
      },
      "_links": {
        "status": {
          "href": "https://partners.liquid.com/api/v1/settlement/status/e6560d70-2fa8-4e2a-b86b-3979694016ad"
        }
      }
    },
    "_links": {
      "status": {
        "href": "https://partners.liquid.com/api/v1/transaction/status/70f7cd4c-bb6b-48eb-abe8-b92eac9e3db8"
      }
    }
  }
}