Billwerk+ WebsiteHelp Center ENHelp Center DE

SubscriptionJS IFrame

When it comes to payments via credit card PCI DSS compliance is required. When using your own implementation to capture payment data based on SubscriptionJS, you need to comply with SAQ A-EP. By using billwerk’s hosted self-service you are only required to comply with SAQ A. This is also true if you use our Payment Form Iframe to capture payment data. Your benefit with the use of the new separate self-service server, is you only have to deal with the implementation of this single iframe. SubscriptionJS create the element itself and can be configured to the needs of your business.

SubscriptionJS.createElement(embeddableElement, embedInElement, config, style, error)

SubscriptionJS offers createElement to let you use different embeddable elements, like our paymentForm iframe.

The table below details the properties used to configure and style embeddable elements:

PropertyTypeDescription
embeddableElementstringThe type of element to be embedded. Only paymentForm is currently supported.
embedInElementDOM ElementThe DOM element that will act as the container for the embeddableElement.
configobjectA configuration object that includes your public API key, available payment methods, locale, and return URL. For more information, refer to the detailed configuration guide.
styleobjectA style object allows customization of various style properties for the embeddable element. For more information, refer to the style properties documentation.

Important:

  • Ensure that the embedInElement is a valid DOM element that exists in the DOM at the time of embedding.
  • The config object should be properly formed according to the specifications provided in the detailed configuration guide.
  • The style object should follow the guidance provided in the style properties documentation to maintain consistency and functionality across different browsers and devices.

🚧

Caution! For standard workflows you don't need to use any of the following methods. They serve special purposes where you need more control.

paymentForm.processPaymentData(totalGross, currency, success, error)

processPaymentData sends the payment data to the PSP and returns the processed data or an error. This enables you to do further checks on this data, e.g. BIN checks (CC), bank country (Debit). All PSPs which support PSD2 can be used with this method. Please note that this method is not meant to validate payment data!

PropertyTypeDescription
totalGrossdecimalThe gross total value of the order. Obtain this by calling Signup.preview(...), which returns preview.Order.TotalGross.
currencystringThe currency of the order's total value. This is retrieved using Signup.preview(...), which returns preview.Order.Currency.

processPaymentData success result

{
  "bearer": {
    "pseudoCardPan": "4111111111111111",
    "TruncatedCardPan": "****",
    "ExpiryMonth": "12",
    "ExpiryYear": "2030",
    "Holder": "Marcellus Wallace"
  },
  "selectedPaymentMethod": "CreditCard:FakeProvider",
  "returnUrl": "https://sandbox.billwerk.com/portal/finalize.html"
}

paymentForm.payerDataChanged(customerData)

Sends the customer data to the paymentForm. This is needed as the form does not know anything about the customers data so far. Must be called on changes to the customer data.

PropertyTypeDescription
customerDatacustomerDataInformation about the customer such as name, address, VAT ID, etc. This information is required already because the final price might depend on the country of residence, VAT ID, etc.