Integrating multiple payment components


Step 3: Create an order

Handle the interaction

Note: This step only applies if using your own or an existing payment button.

1. Assign the button element to a variable:

const paymentButton = document.querySelector('#payment-button');

2. Create an event handler for the payment button:

  • When the customer clicks the payment button, call the getPaymentData() method.
  • Send the response to your server and create an order.
  • Return the reponse from your server to the client-side to redirect the customer.
paymentButton.addEventListener('click', e => {
    paymentButton.addAttribute('disabled');
    if (PaymentComponent.hasErrors()) {
        let errors = PaymentComponent.getErrors();
        console.log(errors);
        return false;
    }
    createOrder(PaymentComponent.getPaymentData()).then(response => {
        if(!response || !response.success) {
            paymentButton.removeAttribute('disabled');
            console.log(response);
        } else {
            PaymentComponent.init('redirection', {
                order: response.data
            });
        }
    });
});

 

Avoid duplicate orders

When using your own payment button, if the customer clicks it again during the latency before redirection, this creates duplicate orders.

To avoid duplicate orders, disable the button until you have attempted to create an order. Then, check response.success:

  • If true, don’t re-enable the button and proceed to the redirect.
  • If false, re-enable the button for the customer to try again.
Redirect to 3D verification

The init('redirection') method redirects customers paying by credit card to the relevant page.

If 3D Secure verification is:

  • Required, the customer is first directed to 3D Secure. If successful, they are then redirected to the redirect_url.

  • Not required, the customer is redirected to the redirect_url.

Redirect bank transfer payments

In the gateway_info object, you receive the bank account details for the customer to wire the funds to.

Render the account details in the interface for the customer with clear instructions. (MultiSafepay also emails these details to the customer.)

Example gateway_info object

{
  "gateway_info":{
    "mtpinfo":"NL25DEUT7351811717",
    "reference":"9202124254788300",
    "issuer_name":"Sofortbank",
    "destination_account_id":"003001380000",
    "destination_holder_name":"MultiSafepay",
    "destination_holder_city":"Zurich",
    "destination_holder_country":"CH",
    "destination_holder_iban":"NL25DEUT7351811717",
    "destination_holder_swift":"DEUTCHZZ",
    "account_holder_name":"testperson-nl approved",
    "account_holder_city":"gravenhage",
    "account_holder_coutry":"NL"
  }
}

Create an order

Create an order from your server, appending the payment_data collected from the Payment Component UI to the order data.

See API reference – Payment Component order.

Feedback

Propose a change on GitHubexternal-link-icon or
send an email to [email protected]

Other languages

For an explanation in another language, contact your account manager.