Jump to content

Payment Request API

Recommended Posts

  • Moderators

HTML5.2 was introduced a month or 2 ago, with a couple of new features.
One of them being the payment request api.



The Payment Request API is a W3C standard candidate that is meant to eliminate checkout forms. It vastly improves user workflow during the purchase process, providing a more consistent user experience and enabling web merchants to easily leverage different payment methods.

The Payment Request API is designed to be vendor-agnostic, meaning it does not require use of a particular payment system. It's not a new payment method, nor does it integrate directly with payment processors; with the browser acting as an intermediary, all the information necessary for a fast checkout can be stored in the browser, so users can just confirm and pay, all with a single click.


So basically it provides all the forms necessary to display a checkout, capture card info, addresses and  shipping costs etc.
The api is implemented in Chrome and Edge, but doesn't work (yet) in Firefox. 
Forms in these browsers are rendered somewhat browser specific :



This includes validity check of cc details etc.

I suppose in time there will be a "W3C.payment" file included in the API's/W3C subdirectory to help with structuring the payment request constructor (hint)

For now this works

procedure TForm1.W3Button1Click(Sender: TObject);

  //set up merchant structure
  var supportedInstruments : array of variant;
  supportedInstruments[0] := class
    supportedMethods := 'basic-card';
    data := class
      supportedNetworks : array of string;
      supportedTypes    : array of string;

  //set up invoice structure
  var details := class
    total := class
      label : string;
      amount := class
        currency : string;
        value    : string;
    displayItems    : array of Variant;
    shippingOptions : array of variant;

  //set up options
  var options := class
    requestShipping := true;

  //populate merchant structure with supported cards
  supportedInstruments[0].data.supportedNetworks[0] := 'visa';
  supportedInstruments[0].data.supportedNetworks[1] := 'mastercard';
  supportedInstruments[0].data.supportedNetworks[2] := 'amex';
  supportedInstruments[0].data.supportedNetworks[3] := 'jcb';
  supportedInstruments[0].data.supportedNetworks[4] := 'diners';
  supportedInstruments[0].data.supportedNetworks[5] := 'discover';
  supportedInstruments[0].data.supportedNetworks[6] := 'mir';
  supportedInstruments[0].data.supportedNetworks[7] := 'unionpay';

  //populate merchant structure with supported card types
  supportedInstruments[0].data.supportedTypes[0] := 'credit';
  supportedInstruments[0].data.supportedTypes[1] := 'debit';

  //populate invoice structure with totals
  details.total.label := 'Payments invoice Q2018-02';
  details.total.amount.currency := 'AUD';
  details.total.amount.value    := '230.00';

  //populate invoice structure with line items
  var displayItems : array of variant;
  displayItems[0] := new JObject;
  displayItems[0].label := 'labour hire';
  displayItems[0].amount := new JObject;
  displayItems[0].amount.currency := 'AUD';
  displayItems[0].amount.value := '65.00';
  displayItems[1] := new JObject;
  displayItems[1].label := 'material costs';
  displayItems[1].amount := new JObject;
  displayItems[1].amount.currency := 'AUD';
  displayItems[1].amount.value := '165.00';
  details.displayItems := displayItems;

  //populate invoice structure with shipping costs
  var shippingOptions : array of variant;
  shippingOptions[0] := new JObject;
  shippingOptions[0].id := 'standard';
  shippingOptions[0].label := 'Standard shipping';
  shippingOptions[0].amount := new JObject;
  shippingOptions[0].amount.currency := 'AUD';
  shippingOptions[0].amount.value    := '0.00';
  details.shippingOptions := shippingOptions;


  //finally do a payment request
  var request : variant := new JObject;
  asm @request = new PaymentRequest(@supportedInstruments, @details, @options); end;

Does not work in the ide, starting from file system is ok


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...