When paying via QR code, e.g., using WeChat Pay or Alipay, the seller generates a QR code that the user scans with their payment application. After the payment is confirmed and the funds are debited, the seller receives a notification about the successful transaction. This method ensures the payment security, as the user doesn’‎t enter their bank details and all data is processed by the payment system.

To use Headless checkout to accept payments via QR code:

1. Add the handling of the show_qr_code event for displaying a QR code.

Example:

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_qr_code': {
      showQrCode = true;
    }
  }
});

2. Add the psdk-qr-code component to the HTML markup of the payment UI.

Example:

@if (showQrCode) {
  <psdk-qr-code></psdk-qr-code>
  <psdk-submit-button text="Show status" />
}